CSS3 - držte krok s dobou (nové vlastnosti)

Určitě jste již slyšeli o připravovaných a žhavých technologiích CSS3 a HTML5. V tomto článku se pokusím představit hlavní a nové vlastnosti, které vám aktuálně CSS3 nabízí.

Krátký úvod do přítomnosti

Dnes je stále doporučován standard konsorcia W3C pro druhou verzi. Ovšem již od roku 2005 o sobě dává nástupce druhé verze stále impulzivněji vědět. Ano, mluvíme tu o CSS3. I když stále není konsorciem W3C plně dokončen vývoj této technologie, který se mimochodem táhne už pár let, a během pár dní dokončen taky nebude (předpokládaný je rok 2015), tak se aktuálně nové verze webových prohlížečů přetahují v tom, co všechno už podporují, a to jak z CSS3, tak HTML5. Rozhodně to nechci odsuzovat, je dobré, když tu panuje taková rivalita, alespoň dobré pro nás uživatele a také webdesignery. Proto mi přijde hloupé dnes tvrdit, že by se neměly tyto nové technologie používat, protože by neměly fungovat a nevím co ještě. Není důvod se CSS3 bát!

Kromě tohoto článku se můžete o CSS3 dozvědět více na http://www.css3.info. Všechny zmíněné vlastnosti si můžete také vyzkoušet na http://css3generator.com, odkud jsem čerpal grafiku. Jako další zdroj informací lze použít návrh dokumentace W3C na http://www.w3.org/TR/css3-roadmap.

Kulaté rohy (border-radius)

Dodnes byste asi řešili kulaté rohy pomocí obrázku, to už ale není třeba, vlastnost border-radius umožní nastavit zaoblení vašeho objektu. Vlastnost má více možností zápisu: pokud chcete mít všechny rohy stejně kulaté, stačí zadat pouze jednu hodnotu, v případě že chcete nastavit horizontální a vertikální rohy jiné, tak použijete dvě hodnoty, první je horizontální a druhá vertikální, a třetí možnost je nastavení každého rohu zvlášť (1 = horní, 2 = pravý, 3 = spodní a 4 = levý). (Hodnotami jsou délkové míry.)

Ukázka hotového kódu:

<div style="-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px;">Objekt</div>

Živá ukázka:

Stín (box-shadow)

Další novinkou je stín, dnes velmi oblíbená grafická vlastnost. Má čtyři hodnoty: první má na starosti posunutí stínu horizontálně od objektu, druhá naopak vertikálně, třetí hodnota nastavuje okraj stínu, který přechází do ztracena, a čtvrtá hodnota je samotná barva stínu.

Ukázka hotového kódu:

<div style="-webkit-box-shadow:10px 5px 20px #000; -moz-box-shadow:10px 5px 20px #000; width:200px; height:60px; background-color:#808080; color:#fff; text-align:center; line-height:50px; box-shadow:10px 5px 20px #000;">Objekt</div>

Živá ukázka:

Stín u textu (text-shadow)

Obdobné jako box-shadow s rozdílem, že text-shadow se využívá pro stín u textu (jak název vlastnosti napovídá ;)), proto není třeba dále rozebírat. Postačí ukázka níže.

Ukázka hotového kódu:

<span style="-webkit-text-shadow:15px 10px 15px #000; -moz-text-shadow:15px 10px 15px #000; text-shadow:15px 10px 15px #000; font-size:50px; color:#808080;">Text</span>

Živá ukázka:

Pohyb, rotace (transform)

Transform je asi jedna z nejvyužívanějších a nejočekávanějších vlastností - nastavuje rotaci a pohyb objektu. Taková operace s objektem dřív nebyla možná bez využití JavaScriptu, to je ale minulost. Vlastnost má čtyři hodnoty, které pracují odlišně a mají své další podhodnoty. Aby každý pochopil, tak vlastnost transform říká, že se bude pohybovat objektem, její hodnota říká jakým způsobem, například otáčet, a podhodnota této hodnoty říká přesně, o kolik se objekt otočí.

translate nastavuje 2D pohyb objektu po osách x a y, hodnoty: (x[em],y[em])

• x = posunuje objekt doprava při kladné hodnotě a doleva při záporné hodnotě
• y = posunuje objekt dolů při kladné hodnotě a nahoru při záporné hodnotě

rotate otáčí objekt, hodnoty: (x[deg])

• x = rotuje objekt ve směru hodinových ručiček

scale pracuje s velikostí objektů, hodnoty: (x)

• x = nastavuje zvětšení objektu, přičemž hodnota 1 je standardní velikost, hodnota 2 je dvojnásobná a hodnota 0.5 je poloviční velikost

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="-webkit-transform: translate(3em,1em); -moz-transform: translate(3em,1em); margin:5px 10px; width:100px; height:60px; border:2px solid blue;  text-align:center;  line-height:60px; background-color:#fff;">Objekt 1</div> // posune objekt dolů o 3 em a doprava o 1 em
<div style="-webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); margin:5px 10px; width:100px; height:60px; border:2px solid blue;  text-align:center;  line-height:60px; background-color:#fff;">Objekt 2</div> // otočí objekt o 100 stupňů ve směru hodinových ručiček
<div style="-webkit-transform: scale(2); -moz-transform: scale(2); margin:5px 10px; width:100px; height:60px; border:2px solid blue;  text-align:center;  line-height:60px; background-color:#fff;">Objekt 3</div> // zvětší objekt na dvojnásobek

Živá ukázka:

Zdroj ukázky: http://www.csshrou.sk/css3-transforms/

Průhlednost (opacity)

Další novou vlastností je průhlednost. Vlastnost má pouze jednu hodnotu, číslo z intervalu <0, 1>, přičemž 0 je 100% průhlednost (neviditelnost) objektu, a tudíž 1 je 0% průhlednost. Tento efekt je vykreslován až na konečný stav objektu.

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="opacity:0.2; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Průhledný objekt</div> // průhlednost objektu se nastaví na 80 %

Model Barev (RGBA)

Další novou vlastností je funkce pro nastavení barev a průhlednosti. Ke klasickému RGB přibývá u nového RGBA čtvrtá hodnota, a to průhlednost. Nová hodnota je totožná s hodnotou opacity, proto není třeba ji představovat, pouze se hodí malá ukázka.

Ukázka hotového kódu:

<div style="backfround-color:rgba(50, 100, 10, 0.7); width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Text</div> // příklad z obrázku, využití RGBA

Model Barev podruhé (HSL)

U barev ještě zůstanem, v CSS3 přibyla další možnost definování barev, a to HSL (Hue, Saturation, Lightness). Tato vlastnost má tři hodnoty a to jsou: barva, sytost a světlost. První je hue (barva), samotné nastavení základní barvy z intervalu <0, 360>, přičemž 0 a 360 je červená, 120 zelená, 240 modrá a zbylá čísla jsou odstíny těchto barev. Druhá hodnota je saturation, neboli sytost. Určuje se v procentech, přičemž 100% je maximální barevnost a 0% minimální barevnost. Třetí hodnota je lightness, neboli světlost. Určuje se také v procentech, přičemž 0% je tmavá (černá), 100% světlá (bílá) a 50% je průměr.

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="background-color:hsl(0,100%, 50%); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 1</div>
<div style="background-color:hsl(120,100%, 50%); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 2</div>
<div style="background-color:hsl(240,100%, 50%); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 3</div>

Živá ukázka:

Model Barev potřetí (HSLA)

HSLA je stejné rozšíření HSL, jako RGBA rozšiřuje RGB, tedy obohacení o průhlednost. Vše je zde stejné, proto opět stačí jen malá ukázka.

Podporují: Firefox, Chrome, Safari a Opera

Ukázka hotového kódu:

<div style="background-color: hsla(0,100%,50%,0.2); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 1</div> // průhledný z 80 %
<div style="background-color: hsla(0,100%,50%,0.4); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 2</div> // průhledný z 60 %
<div style="background-color: hsla(0,100%,50%,0.6); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 3</div> // průhledný ze 40 %
<div style="background-color: hsla(0,100%,50%,0.8); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 4</div> // průhledný z 20 %
<div style="background-color: hsla(0,100%,50%,1); float:left; margin:5px 10px; width:200px; height:60px; color:#fff; text-align:center; line-height:50px;">Objekt 5</div> // neprůhledný

Živá ukázka:

Sloupce (Multiple Columns)

Novinkou je také funkce, která si klade za cíl usnadnit práci s textem. Jedná se o funkci, která pomocí vlastnosti column-count rozdělí text v objektu do určitého počtu sloupců, které se řadí vedle sebe, a také pomocí vlastnosti column-gap nastaví mezery jednotlivých sloupců a nebo pomocí vlastnosti column-rule nastaví čáry mezi sloupci. Já ovšem použiji první možnost - column-gap. Každá vlastnost má pouze jednu hodnotu, u column-count je to počet sloupců, do kterých se má text rozdělit, a u column-gap je to délková míra, která nastavuje mezery mezi sloupci. U column-rule tomu je trochu jinak, ale touto možností se zabývat nebudu. Následuje příklad.

Ukázka hotového kódu:

<div style="-moz-column-count:2; -moz-column-gap:10px; -webkit-column-count:2; -webkit-column-gap:10px; column-count:2; column-gap:10px;">Text bude rozdělene do dvou sloupců!</div>

Živé ukázky vám nemusí vůbec nebo plně fungovat ve starších prohlížečích nebo v prohlížečích, které danou vlastnost ještě nepodporují. U každé vlastnosti je uvedeno, jaké prohlížeče vlastnost podporují, předpokládám, že máte nejnovější verzi svého browseru.

Závěr

Toto je samozřejmě jen špetka toho, co vám CSS3 nabízí oproti svému předchůdci, chtěl jsem vám pouze ukázat nové vlastnosti. Toto není článek, který by vám vysvětloval teorii, tyto nové vlastnosti vám určitě usnadní práci a zpřehlední kód. Rád bych se příště zmínil o nové funkci Media Queries, také bych rád ukázal práci s formuláři a zkusil vytvořit ukázkový layout.