Pár slov o CSS3 a pár ukázek s vysvětlením...
10.12.2010 00:00 | Lukáš Kovařík | přečteno 10167×
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:
text-shadow: 3px 2px 7px #000000;
filter: dropshadow(color=#000000, offx=3, offy=2);
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)
-webkit-box-shadow: 3px 4px 5px #000000;
-moz-box-shadow: 3px 4px 5px #000000;
box-shadow: 3px 4px 5px #000000;
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.
-webkit-box-shadow: inset 3px 4px 5px #000000;
-moz-box-shadow: inset 3px 4px 5px #000000;
box-shadow: inset 3px 4px 5px #000000;
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:
-moz-border-radius: 10px;
border-radius: 10px;
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:
outline: 3px dotted #d60bd6;
outline-offset: 10px;
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:
<!doctype html>
<meta charset="UTF-8">
<div id="neco"></div>
<neco></neco>