Základní vlastnosti

Základní vlastnosti kaskádových stylů:

Text a písmo

Sdružená definice písma – font

Umožňuje zkrácený zápis všech vlastností písma:

font-size
line-height
font-variant
font-weight
font-style
font-family

p {font: small-caps bold italic Arial 120%/1.5;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

p {font: 90% bold;}

Typ písma – font-family

Proporcionální písmo – různé znaky mají různou šířku, která obsahuje prázdný prostor před a za písmenem
- Bezpatkové (rodina sans-serif)
- Patkové (rodina serif)
- Ozdobné písmo (rodina fantasy, cursive)
Neproporcionální písmo (rodina monospace) – všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu)

body, table {
  font-family: 'Arial CE', 'Helvetica CE', Arial, Helvetica, clean, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman CE', 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;
}
pre, code {
  font-family: Profont, 'lucida console', 'Courier New CE',
   'Courier CE', 'Courier New', Courier, Monaco, monospace;
}

Více viz Font-Family.

Velikost písma – font-size

h2 {font-size: 185%;}

Výška řádku – line-height

p {line-height: 1.5;}

Varianta písma – font-variant

abbr {font-variant: small-caps;}

Tučnost písma – font-weight

p {font-weight: normal;}
strong {font-weight: bold;}

Styl písma – font-style

em {font-style: italic;}

Barva textu – color

body, table {color: purple;}

Velikost mezer mezi slovy – word-spacing

h1 {word-spacing: 1em;}

Nepodporuje IE5.5

Velikost mezer mezi písmeny – letter-spacing

h1 {letter-spacing: .3em;}

Bílé znaky – white-space

Určuje způsob zacházení s mezerami, tabulátory a konci řádků.

normal – výchozí hodnota
nowrap – zakáže automatické zalamování řádků
pre – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu
pre-wrap – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu, ale je povoleno automatické zalamování řádků (nepodporuje IE7-, FireFox 2.0-, Opera 7.5- a Safari 2.0-)
pre-line – zobrazuje zlomy řádků tak, jako v kódu dokumentu (nepodporuje IE7-, FireFox 3.0-, Opera 9.2- a Safari 2.0-)

th {white-space: nowrap;}

Horizontální zarovnání obsahu – text-align

h1 {text-align: center;} /* na stred */
p {text-align: justify;} /* do bloku */
cite {text-align: right;} /* vpravo */

Vertikální zarovnání – vertical-align

Používá se pro vertikální zarovnání např. malého obrázku na vyšším řádku nebo v tabulkách.

.horni-index {vertical-align: super;} /* v tabulce jako baseline */
.dolni-index {vertical-align: sub;} /* v tabulce jako baseline */
.co-nejvyse {vertical-align: top;}
.s-hornim-okrajem-textu {vertical-align: text-top;} /* v tabulce
 jako baseline */
.doprostred {vertical-align: middle;}
.s-dolnim-okrajem-textu {vertical-align: text-bottom;} /* v tabulce
 jako baseline */
.co-nejnize {vertical-align: bottom;}

IE5- podporuje pouze hodnoty baseline, sub a super.

Dekorace textu – text-decoration

a:hover {text-decoration: underline;} /* podtrzeno */
.ne {text-decoration: line-through;} /* preskrtnuto */
.reklama {text-decoration: blink;} /* blikajici */

IE7 nezná hodnotu blink.

Odsazení prvního řádku – text-indent

p {text-indent: 2em;}

Převod textu – text-transform

.kapitalky {text-transform: capitalize;}
.mala {text-transform: lowercase;}
.velka {text-transform: uppercase;}

Stín textu – text-shadow

.stin {text-shadow: 3px 3px 1px #999;}
.embossed {text-shadow: 0 -1px 1px rgba(0,0,0,0.5);}
h1 {
  color: #502a2d;
  letter-spacing: 0.75em;
  text-shadow:
    2px 2px 0 #bab0a6,
    2px -2px 0 #bab0a6,
    -2px 2px 0 #bab0a6,
    -2px -2px 0 #bab0a6,
    9px 9px 0 #a63e3b;
  font-effect: outline;
}

Podpora: Firefox 3.5, Gecko 1.9.1, Opera 9.5 Safari 1.1, WebKit 100, Konqueror 3.4, Chromium 2.0.158.0

Nepodporuje IE8-, (IE5.5 podporuje pouze filtry Shadow a DropShadow)

Směr psaní textu – direction

p {direction: rtl;}

jQuery Mobile RTL for Right-To-Left layout

Orientace toku textu – unicode-bidi

p {unicode-bidi: bidi-override; direction: rtl;}

Font-Family

Google Fonts

Tipy pro češtinu:

Zvolte: Latin Extended
Pro kontrolu využijte Pangram (z řečtiny „každé písmeno“): "Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890"
Volte raději užší písmo (u moc širokého písma se vejde na řádek málo znaků)
Sekce "Quick Use" zobrazuje rychlost načítání písma

Font Squirrel

Font Squirrel umožňuje aplikovat zvolený font písma nezávisle na fontech uživatelského operačního systému.

Výhody:

neobaluje HTML zdroj pomocnými tagy
využívá kombinace javascriptu a CSS
font je možné i tisknout
má menší datovou náročnost než Cufón
font se aplikuje i na obsah "dotažený" např. pomocí jquery
podpora v prohlížečích:
- WOFF – Web Open Font Format (84 %)
- EOT – Embedded OpenType fonts (16 % – pouze IE)
- TTF/OTF – TrueType and OpenType font support (89 % – moderní prohlížeče)

Postup:

Stáhnout si požadovaný TTF font písma:
- České fonty (Pangram: "Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890")
- Font Squirrel (české webové fonty)
- Google Fonts (české – latin extended: Oregano, Devonshire, Black Ops One, Poiret One, New Rocker, Hanalei, Aladin, Black Ops One, Open Sans Condensed atd.)
- The League of Moveable Type
- Lost Type
- Typekit.com
- KERNEST
- Fonts4Free
- Fontdeck (jen placené)
- Fonts.com (jen placené nebo s reklamou)
Pomocí Font Squirrel generátoru vygenerovat požadované soubory:
- pro české fonty nastavit volby:
  - Expert
  - Subsetting: Custom Subsetting
    - Language: Czech
    - (Unicode Tables: Basic Latin, Latin Extended-A)
Rozbalit webfontkit archiv, rozbalený adresář přejmenovat např. na fonts a umístit do svého tématu vzhledu.
V html zdroji připojit CSS fonts/stylesheet.css (v Drupalu nejlépe pomocí .info souboru).
Název fontu obsažený v souboru stylesheet.css je možné použít v libovolném CSS jako vlastnot font-family.
Tipy:
- Velikost fontu @font-face udávaná v jednotkách em někdy neodpovídá předpokladům, proto je vhodnější udávat velkost fontu v jednotkách px.
- Ačkoli by přidání vyhlazení a průhledného stínu nemělo nic změnit – opak je pravdou. Přidáním níže uvedených vlastností se font najednou renderuje úplně jinak a to mnohem lépe:
- ```
.selector {
  -webkit-font-smoothing: antialiased;
  text-shadow: transparent 0px 1px 1px;
}
```

Font Awesome

fortawesome.github.io/Font-Awesome – ikony zdarma i pro komerční účely.

Glyphicons

Zdarma pouze obárzky ve formátu PNG.

Porovnání rychlosti načítání stránek s "online" a "offline" fontem:

Pozadí

Sdružená definice pozadí – background

Umožňuje zkrácený zápis všech vlastností pozadí:

background-color
background-image
background-position
background-repeat
background-attachement
background-size

body {background: #cf3 url(../images/pozadi.jpg) top left repeat-x;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Barva pozadí – background-color

p {background-color: #cf3;}
#header p {background-color: transparent;}

Obrázek na pozadí – background-image

body {background-image: url(../images/pozadi.jpg);}
.zadny-obrazek {background-image: none;}

Pozice obrázku na pozadí – background-position

body {
  background: url(../images/pozadi.jpg) no-repeat;
  background-position: center bottom; /* osa x a osa y */
}

Ekvivalentní zápisy:

left top ~ 0% 0% ~ 0 0
right bottom ~ 100% 100%

Pokud uvedete pouze jednu hodnotu, druhá se automaticky nastaví na střed:

0 ~ left ~ left center ~ 50% 50%
50% ~ center ~ center center ~ 50% 50%
100% ~ right ~ right center ~ 100% 50%
top ~ center top ~ 50% 0% ~ 50% 0
bottom ~ center bottom ~ 50% 100%

V jedné deklaraci nepoužívejte současně textové a číselné hodnoty.

Opakování obrázku na pozadí – background-repeat

body {
  background-image: url(../images/pozadi.jpg);
  background-repeat: repeat-x; /* repeat-y, no-repeat, repeat */
}

Posouvání obrázku na pozadí – background-attachment

body {
  background-image: url(../images/pozadi.jpg);
  background-attachment: fixed;
}

IE6- umožňuje použít hodnotu fixed pouze pro element body.

Velikost pozadí na pozadí – background-size

body {
  background-image: url(../images/pozadi.jpg);
  background-size: cover;
}

Průhlednost – opacity

Vlastnost průhlednosti nastavená na 30 % je definovaná pro IE, FireFox a ostatní moderní prohlížeče (černá barva pozadí je nepovinná).

img {
  background-color: black;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8+ */
  filter: alpha(opacity=30); /* IE5+ (order 1. "-ms-filter", 2. "filter" work in IE8′s emulating IE7 mode too) */
  opacity: 0.3;
}

Přechody – gradienty

Dokumentace viz W3C gradients.

Generátory gradientů vám mohou ušetřit mnoho času (podpora prohlížečů). Některé generátory umožňují např. i převádět obrázky gradientů na CSS.

Lineární přechod – linear gradient

Podpora: FF3.6+, Chrome, Safari4+, Opera11.1

horizontální nebo vertikální přechod dvou barev: IE6+
přechod dvou barev o libovolném úhlu: IE9+
přechod tří a více barev o libovolném úhlu: IE10+

Příklad vertikálního přechodu dvou barev:

.gradient {
  background-color: #bada55; /* background color if gradients are not supported */
  background-image:    -moz-linear-gradient(top, #bada55 0%, #2a562c 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bada55), color-stop(100%,#2a562c)); /* Chrome, Safari4+ */
  background-image: -webkit-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Chrome10+ and Safari5.1+ */
  background-image:      -o-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Opera(11.1 to 12.0) */
  background-image:     -ms-linear-gradient(top, #bada55 0%, #2a562c 100%); /* pre-releases of IE10 */
  background-image:   linear-gradient(to bottom, #bada55 0%, #2a562c 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bada55', endColorstr='#2a562c',GradientType=0); /* IE(6 to 9) */
}

Příklad přechodu dvou barev v úhlu 135°:

Pro úplnou podporu multi-stop (více barev) gradientu v IE9 (pomocí SVG) je nutné pomocí podmíněného komentáře "zakázat" filtr.

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

.gradient {
  background-color: #1e5799; /* background color if gradients are not supported */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8)); /* Chrome, Safari4+ */
  background-image: -webkit-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Opera(11.1 to 12.0) */
  background-image: -ms-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* pre-releases of IE10 */
  background-image: linear-gradient(135deg, #1e5799 0%, #7db9e8 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1); /* IE(6 to 8) fallback on horizontal gradient ONLY */
}

Filtry - filter

Příklad odbarvení obrázku na pozadí:

.gray {
  background: url('../images/pozadi.jpg') no-repeat 0 0;
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  filter: gray; /* IE5+ */
  filter: grayscale(100%);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.gray:hover { 
  -webkit-filter: grayscale(0);
  filter: none;
}

...

Rámeček, okraje a rozměry

Zápis hodnot vlastností, u kterých je možné nastavovat všechny čtyři strany je možné zkrátit.

Příklad nastavení vnitřního okraje
Definice	Horní	Pravý	Dolní	Levý
`padding: 1px 2px 3px 4px;`	1	2	3	4
`padding: 1px 2px 3px;`	1	2	3	2
`padding: 1px 2px;`	1	2	1	2
`padding: 1px;`	1	1	1	1

Sdružená definice rámečku – border

Umožňuje zkrácený zápis všech vlastností rámečku:

border-width
border-style
border-color

h1 {border: 4px groove green;}
p {border: 4px ridge green;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Samostatně lze zadávat i jednotlivé strany:

body {
  border-top: 10px solid lime;
  border-right: 10px double green;
  border-bottom: 10px dotted purple;
  border-left: 10px dashed blue;
}

Šířka rámečku – border-width

body {
  border: solid green;
  border-width: 1px 2px 3px 4px;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: solid green;
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
}

Šířka vykreslování klíčových slov (thin, medium, thick) se v jednotlivých prohlížečích liší.

Styl rámečku – border-style

solid – spojitý
double – dvojitý
groove – příkop
ridge – val
inset – vmáčknutý
outset – vystouplý
dotted – tečkovaný
dashed – čárkovaný
none – žádný

body {
  border: 10px green;
  border-style: solid;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px green;
  border-top-style: double;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: none;
}

IE6- vykresluje tečkovaný rámeček o šířce 1px čárkovaně.

IE5- vykresluje tečkovaný a čárkovaný rámeček jako spojitý.

Barva rámečku – border-color

body {
  border: 10px solid;
  border-color: red black blue green;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px solid;
  border-top-color: red;
  border-right-color: black;
  border-bottom-color: blue;
  border-left-color: transparent;
}

Zaoblení rámečku – border-radius

.radius {
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
  behavior: url('sites/all/themes/legadino/design/pie.htc');
}

V současné době nepodporují prohlížeče IE a Opera. Pro prohlížeče Mozilla Firefox, Google Chrome a Safari je možné již dnes používat zkušební vlastnosti -moz-border-radius a -webkit-border-radius.

Omezení:

zaoblit rohy elementu <img>není možné, ale můžete použít obrázek v pozadí elementu <div>
pro prohlížeč Opera musí být styl pro kulaté rožky uveden ve zdrojovém kódu stránky (na odstranění tohoto omezení se pracuje)

Vnější okraj – margin

p {margin: 1em 0 .5em;}

Samostatně lze zadávat i jednotlivé strany:

p {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: .5em;
  margin-left: 0;
}

Vnitřní okraj – padding

th, td {padding: 0.1em .3em 0;}

Samostatně lze zadávat i jednotlivé strany:

th, td {
  padding-top: .1em;
  padding-right: .3em;
  padding-bottom: 0;
  padding-left: .3em;
}

Výška – height

pouze pro blokové elementy (pro řádkové je možné použít vlastnost line-height)
hodnota vyjádřená procenty se vztahuje k zadané výšce nadřazeného elementu
je-li obsah elementu menší než zadaná výška, vytvoří se pod obsahem prázdné místo
přetečení obsahu řeší vlastnost overflow

#header {height: 100px;}

Maximální výška – max-height

div {max-height: 100px;}

Nepodporuje IE6-

Minimální výška – min-height

div {min-height: 100px;}

Nepodporuje IE6-

Šířka – width

pouze pro blokové elementy
hodnota vyjádřená procenty se vztahuje k zadané šířce nadřazeného elementu
je-li obsah elementu menší než zadaná šířka, vytvoří se vedle obsahu prázdné místo
přetečení obsahu řeší vlastnost overflow

#header, #content, #footer {width: 760px;}

Maximální šířka – max-width

div {max-width: 100px;}

Nepodporuje IE6-

Minimální šířka – min-width

div {min-width: 100px;}

Nepodporuje IE6-

Stín bloku – box-shadow

box-shadow: [horizontální posun] [vertikální posun] (rozostření) (roztažení) [barva] (pozice), (...další stíny...)

.box-shadow {
  -moz-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                   0 -20px 20px 20px rgba(0, 0, 0, .7); /* FF(3.5-3.6) */
  -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                      0 -20px 20px 20px rgba(0, 0, 0, .7); /* Chrome(4-9), Safari(3.1-4), iOS(3.2-4.3), Android(2.1-3) */
  box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
              0 -20px 20px 20px rgba(0, 0, 0, .7); /* Opera10.5+, IE9+ */
}

Praktický příklad použití stínů je vidět např. u loga Microsoft.

Zobrazení, pozice a obtékání

Způsob zobrazení – display

Skrytý element na stránce nezabírá žádné místo.

h1 {display: inline;} /* zobrazi se jako radkovy element */
#menu a {display: block;} /* zobrazi se jako blokovy element */
.hidden {display: none;} /* nezobrazi se */

Viditelnost – visibility

Skrytý element na stránce stále zabírá své místo.

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

Přetečení – overflow

Určuje jakým způsobem zacházet s obsahem, který se do elementu nevejde:

visible – přetékající obsah se zobrazí
hidden – přetékající obsah se nezobrazí
scroll – posuvníky se zobrazí vždy
auto – posuvníky se zobrazí pouze v případě nutnosti

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

Samostatně lze zadávat i jednotlivé směry:

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

Pozice – position

Umístění každého elementu v rámci dokumentu může být statické (výchozí), relativní, absolutní nebo fixní. Umístění se vztahuje vždy k obsahovému bloku elementu.

Statické pozicování – static:

Obsahovým blokem je nejbližší nadřazený blokový element.
Blok elementu je umístěn v rámci běžného toku dokumentu (dle zdrojového kódu).

Relativní pozicování – relative:

Obsahovým blokem je nejbližší nadřazený blokový element.
Blok elementu je posunut z původního umístění jedním nebo více směry.
Původní prostor po elementu zůstane zachován.
Nová pozice elementu neovlivní pozici jiného elementu.

Absolutní pozicování – absolute:

Obsahovým blokem je nejbližší nadřazený pozicovaný element v jiném než statickém umístění.
Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
V nové pozici blok nijak neovlivňuje jiné elementy.

Fixní pozicování – fixed:

Obsahovým blokem je zobrazovací obslat prohlížeče.
Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
Blok zůstane v nové pozici i při posunu obsahu prohlížeče.

IE6- vyhodnocuje fixní umístění jako absolutní.

img {
  position: absolute;
  bottom: 0;
  left: 50%; /* levy roh se umisti na stred nadrazeneho elementu */
}

Horní vzdálenost – top

Vzdálenost horního vnějšího okraje relativně či absolutně pozicovaného elementu od horního vnitřního okraje nadřazeného elementu.

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

Pravá vzdálenost – right

Vzdálenost pravého vnějšího okraje relativně či absolutně pozicovaného elementu od pravého vnitřního okraje nadřazeného elementu.

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

Spodní vzdálenost – bottom

Vzdálenost spodního vnějšího okraje relativně či absolutně pozicovaného elementu od spodního vnitřního okraje nadřazeného elementu.

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

Levá vzdálenost – left

Vzdálenost levého vnějšího okraje relativně či absolutně pozicovaného elementu od levého vnitřního okraje nadřazeného elementu.

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

Vrstva – z-index

Umístění absolutně pozicovaného elementu do vzdálenější (nižší číslo) nebo bližší vrstvy (vyšší číslo).

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

Ořez – clip

Ořízne absolutně pozicovaný element.

img {
  position: absolute;
  clip: rect(10px auto auto auto); /* souradnice z leveho horniho
   rohu */
}

IE6- neumí oříznout pozadí, ale pouze obsah elementu

Plovoucí pozice – float

Obsahovým blokem je nejbližší nadřazený blokový element.
Blok elementu je možné umístit vlevo nebo vpravo v rámci obsahového bloku.
Následujícímu obsahu je umožněno, aby element v plovoucím umístění obtékal zprava nebo zleva.
Plovoucí blok elementu se snaží umístit co možná nejvýše v rámci svého obsahového bloku.
V nové pozici plovoucí blok ovlivňuje pozice následujících elementů v normálním toku dokumentu.
Původní pozice je uvolněna pro další elementy.

Hodnoty:

left – umístí element vlevo a umožní dalšímu obsahu, aby jej obtékal zprava
right – umístí element vpravo a umožní dalšímu obsahu, aby jej obtékal zleva
none – běžný tok dokumentu (zrušení plovoucí pozice)

img {  
  width: 100px; /* definovana sirka je nutnou podminkou */
  float: right;
}

Ukončení obtékání – clear

Určuje stranu, ze které se ukončí obtékání.

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

Příklad stylování 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: '“';
}

Sloupce

Rozdělení obsahu (např. nečíslovaného seznamu) na definovaný počet sloupců

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

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

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

Tabulka

Vertikální zarovnání obsahu buněk tabulky – vertical-align

Hodnoty:

baseline – účaří prvního řádku všech buněk na řádku (různé velikosti písma, vložený objekt)
top – horní okraj
middle – střed
bottom – spodní okraj

th {vertical-align: bottom;}
td {vertical-align: top;}

Splynutí rámečku sousedních buněk a tabulky – border-collapse

table {
  border: 1px dotted blue;
  border-collapse: collapse;
}
table.dvojramecek {
  border: 1px solid green;
  border-collapse: separate; /* oddelene bunky a ramecek tabulky */
}

Velikost mezer mezi rámečky – border-spacing

table {
  border: 1px dotted blue;
  border-spacing: 10px;
}

Nepodporuje IE7-

Umístění titulku – caption-side

Hodnoty:

top – nad tabulkou
bottom – pod tabulkou
left – vlevo
right – vpravo

table {
  caption-side: bottom;
}

Nepodporuje IE7-

Opera zná pouze hodnoty top a bottom

Rámeček kolem prázdných buněk – empty-cells

table {
  border: 1px dotted blue;
  empty-cells: hide;
}
table.zobrazit {
  border: 1px solid green;
  empty-cells: show;
}

Nepodporuje IE7-

Seznamy

Sdružená definice seznamů – list-style

Umožňuje zkrácený zápis všech vlastností seznamů:

list-style-type
list-style-position
list-style-image

ul li {list-style: square outside none;}
ol li {list-style: upper-latin outside url(images/menu.gif);}

Typ označení položky seznamu – list-style-type

ul, ol {list-style-type: none;} /* bez oznaceni */
ul.kolecko {list-style-type: disc;}
ul.kruh {list-style-type: circle;}
ul.ctverec {list-style-type: square;}
ol.cislo {list-style-type: decimal;}
ol.velke-pismeno {list-style-type: upper-latin;}
ol.male-pismeno {list-style-type: lower-latin;}
ol.velke-rimske {list-style-type: upper-roman;}
ol.male-rimske {list-style-type: lower-roman;}
ol.velke-pismeno {list-style-type: upper-alpha;}
ol.male-pismeno {list-style-type: lower-alpha;}
ol.recke-pismeno {list-style-type: lower-greek;} /* nefunguje v IE */
ol.s-pocatecni-nulou {list-style-type: decimal-leading-zero;}
 /* nefunguje v IE */
ol.armenske-cislo {list-style-type: armenian;} /* nefunguje
 v IE a Opeře */
ol.hebrejske-cislo {list-style-type: georgian;} /* nefunguje
 asi nikde */

Pozice označení položky seznamu -list-style-position

ul {list-style-position: outside;}
ol {list-style-position: inside;}

Obrázek označení položky seznamu – list-style-image

Definovaný obrázek přepíše vlastnost list-style-type.

ul {list-style-image: url(images/menu.gif);}

Tipy:

CSS3 Ordered List Styles

Animace

CSS3 přechody

Original Hover Effects with CSS3 Transitions and Animations

Syntaxe:

transition:
  (hlidane_vlastnosti)
  trvani_animace
  (funkce_prubehu)
  (zpozdeni)
  (, dalsi_prechody);

CSS3 transformace

Rotace, zvětšení a změna průhlednosti při najetí myší:

.thumbs {
  opacity: 0;
  transform: rotateY(180deg) scale(0.5, 0.5);
  transition: all 450ms ease-out 0s;
}
.thumbs:hover {
  opacity: 1;
  transform: rotateY(0deg) scale(1, 1);
}

CSS3 animace

Změna průhlednosti obrázku po najetí myši

/* css3 hover opacity */
img {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  -ms-opacity: 0.5;
  -o-opacity: 0.5;
  opacity: 0.5;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
img:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  opacity: 1;
}

Změna průhlednosti (prolnutí) obsahové části při načtení stránky

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
#section-content {
  /* use animattion ease-in and repeat it only 1 time */
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

Postupná změna průhlednosti odstavců po načtení stránky

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
p {
  /* make invisible upon start */
  opacity: 0;
  /* use animattion ease-in and repeat it only 1 time */
  -webkit-animation: fadein ease-in 1;
  -moz-animation: fadein ease-in 1;
  -ms-animation: fadein ease-in 1;
  -o-animation: fadein ease-in 1;
  animation: fadein ease-in 1;
  /* tafter animation is done we remain at the last keyframe value (opacity: 1) */
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /* duration */
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  /* delay */
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -ms-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
p.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -ms-animation-delay: 0.7s;
  -o-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
p.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  -ms-animation-delay:1.2s;
  -o-animation-delay:1.2s;
  animation-delay: 1.2s;
}
p.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -ms-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}