Grafik digitálnych médií

Skrytý element na stránke nezaberá žiadne miesto.

h1 {display: inline;} /* zobrazí sa ako riadkový element */
#menu a {display: block;} /* zobrazí sa ako blokový element */
.hidden {display: none;} /* nezobrazi sa */

Viditeľnosť – visibility

Skrytý element na stránke stále zaberá svoje miesto.

.skryt {visibility: hidden;}
.zobrazit {visibility: visible;}

Pretečenie – overflow

Určuje akým spôsobom zaobchádzať s obsahom, ktorý sa do elementu nezmestí:

• visible – pretekajúci obsah sa zobrazí
• hidden – pretekajúci obsah sa nezobrazí
• scroll – posuvníky sa zobrazia vždy
• auto – posuvníky sa zobrazia iba v prípade nutnosti

pre {
  width: 556px;
  font-size: 13px;
  overflow: auto;
}

Samostatne je možné zadávať aj jednotlivé smery:

p {
  width: 100px;
  height: 100px;
  overflow-y: auto;
  overflow-x: scroll;
}

Pozícia – position

Umiestnenie každého elementu v rámci dokumentu môže byť statické (predvolené), relatívne, absolútne alebo fixné. Umiestnenie sa vzťahuje vždy k obsahovému bloku elementu.

Statické pozíciovanie  – static:

1. Obsahovým blokom je najbližší nadradený blokový element.
2. Blok elementu je umiestnený v rámci bežného toku dokumentu (podľa zdrojového kódu).

Relatívne pozíciovanie  – relative:

1. Obsahovým blokom je najbližší nadradený blokový element.
2. Blok elementu je posunutý z pôvodného umiestnenia jedným alebo viacerými smermi.
3. Pôvodný priestor po elemente zostane zachovaný.
4. Nová pozícia elementu neovplyvní pozíciu iného elementu.

Absolútne pozíciovanie  – absolute:

1. Obsahovým blokom je najbližší nadradený poziciovaný element v inom ako statickom umiestnení.
2. Blok elementu je vybratý z bežného toku dokumentu, kde uvoľní miesto nasledujúcim elementom a presunie sa na určenú pozíciu vzhľadom na svoj obsahový blok.
3. V novej pozícii blok nijako neovplyvňuje iné elementy.

Fixné pozíciovanie  – fixed:

1. Obsahovým blokom je zobrazovacia oblasť prehliadača.
2. Blok elementu je vybratý z bežného toku dokumentu, kde uvoľní miesto nasledujúcim elementom a presunie sa na určenú pozíciu vzhľadom na svoj obsahový blok.
3. Blok zostane v novej pozícii aj pri posune obsahu prehliadača.

IE6- vyhodnocuje fixné umiestnenie ako absolútne.

img {
  position: absolute;
  bottom: 0;
  left: 50%; /* lavý roh sa umiestni na stred nadradeného elementu */
}

Horná vzdialenosť – top

Vzdialenosť horného vonkajšieho okraja relatívne alebo absolútne poziciovaného elementu od horného vnútorného okraja nadradeného elementu.

#links {
  position: absolute;
  top: 0;
}

Pravá vzdialenosť – right

Vzdialenosť pravého vonkajšieho okraja relatívne alebo absolútne poziciovaného elementu od pravého vnútorného okraja nadradeného elementu.

#menu {
  position: absolute;
  right: 0;
}

Spodná vzdialenosť – bottom

Vzdialenosť spodného vonkajšieho okraja relatívne alebo absolútne poziciovaného elementu od spodného vnútorného okraja nadradeného elementu.

#footer {
  position: absolute;
  bottom: 0;
}

Ľavá vzdialenosť – left

Vzdialenosť ľavého vonkajšieho okraja relatívne alebo absolútne pozicovaného elementu od ľavého vnútorného okraja nadradeného elementu.

#menu {
  position: absolute;
  left: 10px;
}

Vrstva – z-index

Umiestnenie absolútne poziciovaného elementu do vzdialenejšej (nižšie číslo) alebo bližšej vrstvy (vyššie číslo).

h1 img {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
#links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

Orez – clip

Oreže absolútne poziciovaný element.

img {
  position: absolute;
  clip: rect(10px auto auto auto); /* súradnice z ľavého horného
   rohu */
}

 IE6- nevie orezať pozadie, ale iba obsah elementu

Plávajúce pozície – float

1. Obsahovým blokom je najbližší nadradený blokový element.
2. Blok elementu je možné umiestniť vľavo alebo vpravo v rámci obsahového bloku.
3. Nasledujúcemu obsahu je umožnené, aby element v plávajúcom umiestnení obtekal sprava alebo zľava.
4. Plávajúci blok elementu sa snaží umiestniť čo možno najviac v rámci svojho obsahového bloku.
5. V novej pozícii plávajúci blok ovplyvňuje pozície nasledujúcich elementov v normálnom toku dokumentu.
6. Pôvodná pozícia je uvoľnená pre ďalšie elementy.

Hodnoty:

• left – umiestni element vľavo a umožní ďalšiemu obsahu, aby ho obtekal sprava
• right – umiestni element vpravo a umožní ďalšiemu obsahu, aby ho obtekal zľava
• none – bežný tok dokumentu (zrušenie plávajúcej pozície)

img {  
  width: 100px; /* definovaná zápalka je nutnou podmienkou */
  float: right;
}

Ukončenie obtekania – clear

Určuje stranu, z ktorej sa ukončí obtekanie.

.clear {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}

Príklad štylovania prvku blockquote

<blockquote>
  <p>Text text text text...</p>
  <div>Autor: <cite>Jan Werich</cite></div>
</blockquote>

blockquote {
  position: relative;
  text-align: justify;
}
blockquote p:before,
blockquote p:after {
  position: relative;
  display: block;
  height: 40px;
  width: 40px;
  content: '„';
  font-size: 60px;
  color: #eee;
}
blockquote p:before {
  float: left;
  margin: -46px 0 0 -45px;
}
blockquote p:after {
  float: right;
  margin: -18px -50px 0 0;
  content: '“';
}

Stĺpce

Rozdelenie obsahu (napr. nečíslovaného zoznamu) na definovaný počet stĺpcov

ul.columns3 {
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari a Chrome */
  column-count:3;

  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari a Chrome */
  column-gap: 40px;

  -moz-column-rule:4px outset #f00; /* Firefox */
  -webkit-column-rule:4px outset #f00; /* Safari a Chrome */
  column-rule:4px outset #f00;
}