Webdesignérův průvodce po CSS3: první díl

Většina následujících laskomin slouží hlavně k tomu, že v nových prohlížečích nabídneme návštěvníkovi hezčí web. Neměli byste je používat pro věci, které jsou na stránce zcela nezbytné, protože uživatelé starších prohlížečů je neuvidí – pokud si tedy nedáte extra práci a nedoděláte to i pro ně. Je skutečně jen málo případů, kdy to dává smysl. Pokud byste ale chtěli něco takového dělat, určitě se podívejte na Modernizr. V případe IE pak můžete vyzkoušet úžasný skript CSS3Pie, který spoustu CSS3 laskomin bez větších problémů zprovozní i v IE6–8.

Již minule jsme také zmiňovali vendor prefixy. Dneska je budeme hodně používat. Nezapomeňte však vždy napsat standardní CSS3 definici až za vendor prefixy! (Odpověď na otázku Proč? najdete v článku Chrise Coyiera.)

Ale dost povídání, pojďme si ten webdesignérský život pořádně osladit.

border-radius

S tzv. webem 2.0 přišla éra kulatých rohů a všichni z nás si jistě pamatují, jak náročné je bylo vytvořit. Člověk často potřeboval 4 spany navíc, jen kvůli nim. Kdo má rád sémantiku a udržitelný kód, tak nad takovou konstrukcí musel jen zoufale lomit rukama.

CSS3 nás nechá udělat kulaté rohy jednoduchým zápisem:

border-radius: 5px;

A bum, věc, které tohle přidáme do stylů, bude najednou mít všechny 4 rohy hezky kulaté. Tedy, v Safari 5, Opeře a, pozor, IE9! Pro starší Safari musíte použít -webkit-border-radius, pro Firefox pak  -moz-border-radius.

Také můžete zacílit jen jeden roh, třeba ten dolní levý: border-bottom-left-radius: 5px; (Pozor pak ovšem na syntaxi u Mozilly, má ji trošku odlišnou:  -moz-border-radius-bottomleft: 5px;)

Border-radius funguje ve všech majoritních prohlížečích, s výjimkou IE8– (ale vážně, zkuste ten CSS3Pie).

Gradients

Další věc, kterou často potřebujeme nakódovat, jsou přechody. CSS3 je umožňuje definovat v kódu (zatím to podporuje Webkit a Mozilla), pro zbytek můžete použít starý dobrý obrázek či jednoduchou barvu na pozadí.

background-color: #aa0000; /* barva, která se použije, když nefungují ani gradienty, ani se nenačte obrázek */
background-image: url(gradient.png); /* obrázek, když nefungují gradienty */
background-image: -webkit-gradient(linear, left top, left bottom, from(#aa0000), to(#bb0000));
background-image: -moz-linear-gradient(top, #aa0000, #bb0000);

Je to trošku komplikované, a navíc Mozilla i Webkit s gradienty zacházejí trošku jinak. Každopádně jde o to, že nastavíte odkud kam má gradient vést a určíte počáteční a koncovou barvu. V našem příkladě jsme udělali jednoduchý lineární přechod shora dolů.

CSS gradienty toho umí ovšem MNOHEM víc než jen lineární přechod (proto je také jejich zápis složitý). Hezké vysvětlení i s obrázky: Mozilla gradients, Webkit gradients. A pokud se vám to nechce studovat, zkuste použít CSS gradients generátor.

Gradienty fungují v novém Webkitu (Safari 4,5, Google Chrome) a v Mozille od jádra Gecko 1.9.2. (Firefox 3.6).

text-shadow

Když se povede udělat pěkný stín u textu (třeba že vypadá, že je zapuštěn do obrazovky), vypadá to zatraceně dobře. Dlouho to však bylo možné udělat jen obrázkem. Sláva a hurá CSS3, už to můžeme udělat i v kódu. Ale opatrně, text-shadow umí design nejen vylepšit, ale i zničit.

text-shadow: 1px 1px 2px #000;

Zápis je naprosto jednoduchý: První dvě čísla značí, o kolik bude stín posunut na ose X a Y od původního textu. Třetí číslo udává, jak bude velký, a na konci je pochopitelně jeho barva.

Text-shadow podporují všechny majoritní prohlížeče, s výjimkou IE.

box-shadow

Pokud text-shadow přidával stín k textu, box-shadow ho přidává k boxu (jak překvapivé).

-webkit-box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
box-shadow: 5px 5px 10px #000;

Princip je stejný jako u text-shadow, podpora v prohlížečích ta­ké.

multiple-backgrounds

Jak často by se vám hodilo nadefinovat jednomu elementu několik pozadí? Ostatně – pamatujete si všichni techniku Sliding Doors, ne? S CSS3 to už nemůže být jednodušší.

background: url('left.jpg') top left no-repeat,
url('right.jpg') top right no-repeat,
url('middle.jpg') top center repeat-x;

Obrázků na pozadí si můžete nadefinovat kolik chcete a funguje to hezky všude kromě IE8 a nižších (Pozn. aut.: Všimněte si, že IE9 udělalo skutečně skok kupředu a ani multiple-backgrounds mu nedělají problém. Ostatně na posledním An Event Apart mu ve stoje aplaudoval sál plný webdesignérů.)

background-size

Další zajímavá věc u pozadí je, že nyní můžeme nastavit obrázku na pozadí velikost. Otevírá to cestu k mnoha zajímavým řešením, hlavně ve spojení s Responsive Web Design (pozn. aut.: o tom ale jindy – nejdříve na přednášce na WebExpo, o něco později i tady v seriálu).

background:url(obrazek.png) bottom right no-repeat;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
-webkit-background-size: 100px 100px;
background-size: 100px 100px;

Jak to funguje je zřejmé. Prostě nastavíte, jak veliký má obrázek být a on tak veliký bude. Funguje to úplně stejně jako u obrázku v HTML.

Podpora je zase všude kromě IE8 a nižších. Podrobně rozepsaný přehled podpory včetně zajímavých detailů najdete u Petera Paula Kocha na QuirksMode.

RGBA a HSLA

CSS3 přináší revoluci ještě do jedné věci – do definování průhlednosti. Už nepotřebujete poloprůhledná PNG či hrátky s opacity, stačí nadefinovat barvu pomocí RGBA (případně HSLA). RGB všichni známe, HSL je zápis pro barvy nikoli podle intenzity barevných složek, ale pomocí odstínu, sytosti a jasu (Hue, Saturation, Lightness). Viz. např.: CSS3info.

Více se používá RGBA a to A na konci znamená „alfa kanál“. Tedy definice průhlednosti.

color: rgba(200, 54, 54, 0.5);

Použijete normální zápis jako při definici barvy s rgb, akorát zadáte parametr navíc a nastavíte průhlednost. Hodnota je od 0 do 1 – jedna je neprůhledná, nula je zcela průhledná.

Podporu pro RGBA najdete zase kromě IE8 a nižších všude, pokud chcete používat HSLA, musíte počítat i s absencí IE9.

Tolik asi k lahůdkám a drobnostem

CSS3 toho zavádí mnohem víc, ale většina z těchto věcí si zaslouží samostatný článek. A také jej dostane! Příště se podíváme na základní CSS animace a transformace. A budete zírat!

Nedávno se tu na Zdrojáku pod článkem Martina Michálka probíralo, jak řešit „bordel“, který vendor prefixy dělají v CSS. Martin včera vydal poměrně podrobný článek, ve kterém se nad tématem zamýšlí podrobněji. Všem, kterým záleží na přehlednosti a čitelnosti jejich kódu vřele doporučuji.

PS: Myslíte, že tu chybí Web Fonts? Zkuste zavzpomínat na loňské WebExpo. Možná by si ale vývoj okolo Web Fonts po roce zasloužil samostatný článek. Co říkáte?