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

CSS 3D perex

V minulém díle jsme si povídali co je CSS3, jak se vyvíjí, jak funguje a i to, jaký je stav implementace v prohlížečích. Dneska se podíváme na takové ty webdesignérské laskominy. Zkrátka na drobnosti, které nám mohou ušetřit hromadu nervů a času a navíc vypadají „zatraceně“ dobře.

Seriál: Webdesignérův průvodce po CSS3 (6 dílů)

  1. Webdesignérův průvodce po CSS3: nultá kapitola 14.9.2010
  2. Webdesignérův průvodce po CSS3: první díl 21.9.2010
  3. Webdesignérův průvodce po CSS3: Media Queries 5.10.2010
  4. Webdesignérův průvodce po CSS3: selektory 12.10.2010
  5. Webdesignérův průvodce po CSS3: typografie 19.10.2010
  6. Fonty a web včera, dnes a zítra 18.3.2011

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?

Chystáte se na CSS3?

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 20

Přehled komentářů

JakubS -moz-border-radius
pisatel Re: -moz-border-radius
Martin Malý Re: -moz-border-radius
Čelo Re: -moz-border-radius
pisatel Re: -moz-border-radius
Martin Michálek Re: -moz-border-radius
Čelo Re: -moz-border-radius
mikiqex Re: -moz-border-radius
Čelo Re: -moz-border-radius
Rejpal Re: -moz-border-radius
w0ndr Re: -moz-border-radius
noname Re: -moz-border-radius
Kout Práce s klientem
Martin Michálek Re: -moz-border-radius
JakubS Re: -moz-border-radius
Martin Michálek CSS3Pie a výkon
Jan Sládek Re: CSS3Pie a výkon
karf Re: CSS3Pie a výkon
richinek Re: Webdesignérův průvodce po CSS3: první díl
farin kulate obdelniky
Zdroj: https://www.zdrojak.cz/?p=3329