ARCHIV

CSS3 - Seznámení

Pár slov o CSS3 a pár ukázek s vysvětlením...

10.12.2010 00:00 | Lukáš Kovařík | Články autora | přečteno 10171×

Co to vlastně CSS3 je?

CSS3 je vlastně doplněk pro CSS, neboli upgradovaná verze CSS. Oproti CSS má několik grafických vylepšení, ať už to jsou stíny či zaoblené hrany

Výhody a nevýhody

Výhod je hned několik ať už se jedná o grafické spestření či usnadnění práce programátorovy, ale k tomu se dostaneme postupně v následujících příkladech. O něco horší už to bude s nevýhodama. Většina prohlížečů CSS3 v pohodě bere jen IE opět nezklamal a pro jistotu novinky z CSS3 ignoruje. Některých věcí se nechá složitější cestou docílil i v IE, ovšem zdaleka jich neni tolik jako pro ostatní prohlížeče. Toto je asi tak jediná nevíhoda o proti standardu CSS, ale poměrně podstatná. Změny se snad dočkáme v roce 2015, kdy by mělo CSS3 mít plnou podporu všech prohlížečů.

Pár ukázek co CSS3 umí

Tak teorie bylo dost, teď si jdeme ukázat co umí CSS3 v praxi. Nejprve si ukážeme například stín za textem. Stínu za textem docílím epomocí toho jednoduchého zápisu:

Co která hodnota znamená? První údaj, tedy 3px určuje horizontáloní posun stínu. Druhá hodnota (2px) určuje vertikální posun stínu, třetí hodnotou se natavuje velikost ("rozmazání") stínu. A nakonec můžeme zadat ještě barvu stínu (#000000)

Stejně tak jako si můžeme pohrát se s tínem za textem, tak můžeme i se sínem za boxem. Zápis je stejný jako u textu (horizontální zarovnání, vertikální zarovnání, stín, barva)

Stín ovšem nemusí být jen za boxem, ale může být také jako tzv. vnitřní stín. Toho docílíme poze připsáním "inset" na první pozici.

Box (rám, objekt) už máme vystínovaný a co ho třeba trochu zaoblit? Žádný problém, poslouží nám tento stručný zápis, kde nastavujeme akorád míru zaoblení, zase doporučuji vyzkoušet:

Dále je třeba zajímavé ohraničení textu, ale klasický rám (border) už je nuda. Co třeba tečkovaný nebo čárkovaný rámeček? Jak je libo, opět nic složiteho:

první hodnotou (3px) určujeme velikost rámečku (teček), jako druhý parametr máme právě styl rámečku (dotted - tečkovaný) a poslední barametr určuje barvu rámečku.

Na výber máme z těchto rámečků: inherit, dotted, dashed, solid, groove, ridge, inset, outset, double.

Dále za zmínku stojí nové selektory, z nichž nejužitečnější podle mě bude :nth-child(), který v závislosti na svém parametru, jenž se zadává do závorek, selektuje ntý element, který je "dítětem" svého rodičovského elementu. Pro pochopení bude nejlepší ukázka.

tr:nth-child(4) {background-color: blue} /* čtvrtý řádek bude mít modré pozadí */
tr:nth-child(2n) {background-color: blue} /* sudé řádky budou mít modré pozadí */
tr:nth-child(2n+1) {background-color: blue} /* liché řádky budou mít modré pozadí */

CSS3 a HTML5 - obrazně

V dnešní době a i do budoucna se plánuje využívání CSS3 s HTML5. Co to ovšem HTML5 je a jak se liší od klasického HTML? Hned se to obrazně dozvítě v následujícím odstavci.

Většinou v HTML5 proběhlo snad jen zjednodušení od klasického HTML4, například hned specifikací dokumentu, kde nám k zápisu poslouží pouze:

Verze pro tisk