Najprv sme si ukázali Esenciálne CSS tipy a triky, nasledovali Užitočné CSS tipy a triky a dnes si povieme čo to o CSS3.

CSS3 je nová špecifikácia, ktorá do CSS pridáva kopu efektov a srandičiek. A mnohé z nich radikálne uľahčujú dizajnérom život. Zatiaľ to nie je oficiálny štandard, čo niektorí chápu ako povolenie vystupovať proti jeho používaniu. Kravina, CSS3 je awesome a je použiteľné už dnes.

Fun fact: aby sa špecifikácia stala oficiálnym štandardom, musia ju plne podporovať dva prehliadače. CSS2.1, ktoré používate, nie je plne podporované žiadnym. Najbližšie k tomu má IE8 ;) (zdroj: remy sharp)

Realita je taká, že moderné prehliadače podporujú mnohé z CSS3 atribútov už dnes a kľudne ich môžete používať. Staršie prehliadače neznáme atribúty jednoducho odignorujú a svet sa nezrúti keď v IE ten tieň nebude ;)

Noviniek v CSS3 je veľa, reálne použiteľných je ich menej a my si ukážeme tie, ktoré v rámci brm používame najčastejšie. Ak budem v texte používať výraz "moderné prehliadače", myslím tým Operu, Firefox, Chrome a Safari. Sorry ostatní :)

Pozor: v starých prehliadačoch nasledovné efekty nemusia byť viditeľné. Ak je toto váš prípad, stiahnite si najnovšiu verziu svojho prehliadača, v tomto prípade je novšie prakticky vždy lepšie ;)

text-shadow: [px] [px] [px] [farba]

Tieň pod písmom patrí medzi tie subtílne efekty, ktoré je fajn mať, ale ak nie sú, nič závažné sa nestane. text-shadow podporujú všetky moderné prehliadače bez problémov už nejakú tú dobu a funguje asi takto:

brm brm brm

text-shadow: 2px 2px 3px #317392;

bla bla bla

text-shadow: -1px -1px 0px #ccc;

Zoberme si prvý príklad. Tieň je od textu odsadený sprava [2px] zhora [2px] rozmazaný cez [3px] vo farbe [#317392]. Druhý príklad ukazuje odsadenie o 1px doľava hore cez mínusové prvé dve hodnoty. Vo výsledku to nevyzerá ako tieň, kvôli tretej hodnote 0px to nie je rozmazané a písmo vyzerá ako obtiahnuté pevnou čiarou.

Osobne mám tento "nerozmazaný tieň" najradšej, používam ho na jemné zvýraznenie textu, hlavne nadpisov. Najčastejšie moje CSS vyzerá takto:

p { 
  text-shadow: 1px 1px 0px [farba]; 
}

Pro tip: text môže mať naraz viac tieňov, stačí oddeliť čiarkou. text-shadow: 1px 1px 0px #fff, 3px 2px 4px #ff6600; ale pozor na to, to už je chodenie po tenkom ľade :)

box-shadow: [px] [px] [px] [farba]

Znova tieň, tentoraz pre html elementy, ktoré nie sú text ;) Ak chcem mať <div> s tieňom, spravím:

Dôležité: takto to bude fungovať v Opere (10.60+), na rozbehanie v Chrome/Safari je treba prihodiť -webkit-box-shadow a pre Firefox -moz-box-shadow.

Prečo? Zjednodušene, ak si výrobcovia prehliadačov nie sú 100% istí svojou implementáciu daného efektu, vyžadujú používanie predpôn. -webkit- pre Chrome/Safari, -moz- pre Firefox. Je to ich spôsob ako povedať "funguje to, môžete to používať ale je možné, že to v budúcnosti ešte zmeníme". Ale nebojte sa, kľudne používajte.

Vaše CSS teda bude vyzerať nasledovne:

#outter_shadow {
  box-shadow: 2px 2px 3px #d3d3d3;
  -webkit-box-shadow: 2px 2px 3px #d3d3d3;
  -moz-box-shadow: 2px 2px 3px #d3d3d3;
}

#inner_shadow {
  box-shadow: inset 2px 2px 5px #ddd;
  -webkit-box-shadow: inset 2px 2px 5px #ddd;
  -moz-box-shadow: inset 2px 2px 5px #ddd;
}

Slovíčko inset na začiatku zmení tieň na ekvivalent "inner shadow" vo photoshope.

border-radius: [px]

Internet je plný oblých rohov a border-radius je ako dar z neba. Kde teraz stačí 1 riadok kódu bolo v minulosti nutné stvárať neuveriteľné kúsky plné obrázkov, zbytočného HTMLka, občas dokonca JavaScriptu. Ľudia používajúci IE sa takto síce budú musieť zmierať s hranatou klasikou, ale tak im treba ;)

Ak chceme zaobliť všetky rohy (#box2) stačí border-radius: 10px ak chceme zaobliť len niektoré rohy tak border-radius: [ľh] [ph] [ľd] [pd], kde ľh je ľavý horný roh, atď. Rovnako ako pri box-shadow je ale nutné používať -webkit- a -moz- predpony.

Check it:

#box1 {
  background: #faff8b; border: 2px solid #cccc66; color: #cccc66; 
}
#box2 {
  background: #fcd8e8; border: 2px solid #ff99cc; color: #ff99cc; 
  border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
#box3 {
  background: #a9eec1; border: 2px solid #66cc99; color: #66cc99;
  border-radius: 0 25px 0 25px; -webkit-border-radius: 0 25px 0 25px; 
  -moz-border-radius: 0 25px 0 25px;
}

Na border-radius je pekne vidieť, aké rozdiely môžu byť v implementáciách týchto "experimentálnych" CSS3 atribútov. Ak nepožijeme skrátenú formu border-radius: 0 25px 0 25px;, tak Opera pravý horná roh definuje ako border-top-right-radius, Firefox má
-moz-border-radius-topright a Chrome/Safari -webkit-border-top-right-radius. Uh...

opacity: [%]

Dosť možno najpoužívanejší z CSS3 efektov. Bol totiž implementovaný a používaný ešte dávno predtým, ako sa o CSS3 začalo hovoriť. O čo ide? O priesvitnosť!

.opacity_50 { opacity: .50; -moz-opacity: .50; filter: alpha(opacity=50); }

Predponu -moz- už poznáme, filter: alpha(opacity=50); je tu pre Internet Explorer 6. Uvedený zápis funguje vo väčšine prehliadačov a zmení priesvitnosť na 50%.

Toto funguje dobre na obrázky a tak, nie vždy je to však ideálne riešenie. Na druhom obrázku vidíme, že priesvitnosť je aplikovaná aj na text "censored", pretože opacity dedia všetci potomkovia rodiča. To zvykne byť problém.

Dá sa to nejako vyriešiť? Glad you asked...

background: rgba([0-255], [0-255], [0-255], [%])

.rgba_bg { background: rgba(0, 0, 0, .75); }

Používame to napr. pri vyhľadávaní vpravo hore tu na stránke. Prvé 3 atribúty sú RGB hodnota farby v rozmedzí [0-255], štvrtý atribút je to isté ako pri opacity.

Ak poznáte iba hex zápis, čiže #ffccff a neviete odkiaľ zobrať RGB, tak vo photoshope to máte tu:

Internet Explorer sa s tým však nekamaráti, ten potrebuje niečo takéto:

.rgba_ie {
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
  zoom: 1;
} 

zdroj css-tricks

linear-gradient

Gradient je plynulý prechod z jednej farby na druhú (ako dúha, wheee!). Často sa používa napríklad na tlačítkach a linear-gradient nám umožňuje zbaviť sa obrázkov, ktoré sa používajú momentálne.

Teoreticky. V praxi je to zatiaľ podporujú len novšie verzie Firefoxu a Chrome/Safari a v nich to vyzerá asi takto:

background: -moz-linear-gradient(left top 270deg, #fefefe, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ddd));

Znova odlišná syntax. Mimochodom, ak sa divíte prečo Chrome a Safari spomínam stále spolu a prečo oba používajú predponu -webkit-, tak vedzte, že používajú rovnaký vykresľovací engine. Volá sa webkit :)

V prípade Firefoxu je prvý argument left top pozícia, na ktorej začíname, nasleduje uhol 270deg, pod ktorým má prechod postupovať. Takže začíname vľavo hore, natočíme sa o 270° a postupujeme smerom nadol. Nasledujú tzv. "color stops". V tomto prípade začíname na farbe #fefefe a postupne prejdeme na #ddd.

Vo webkit prehliadačoch začíname argumentom linear, nasleduje začiatočná pozícia left top, konečná pozícia left bottom a nakoniec o niečo doslovnejší zápis pre "color stops" - from(#fefefe) a to(#ddd). Vidíme, že pri Chrome/Safari nenastavujeme uhol ale priamo začiatočnú a konečnú pozíciu. Firefox si konečnú určí sám na základe uhla a začiatočnej pozície.

Pozícia je v oboch prípadoch vyhodnocovaná rovnako ako pri background-position, takže je možné používať px, % a tak vôbec.

Color stops nie sú obmedzené na začiatočnú a konečnú farbu. Kľudne môžete v zadávaní farieb pokračovať (oddelíte čiarkou) a ony budú plynulo jedna cez druhú prechádzať. Ale nepreháňajte to, nechcem vidieť žiadne double rainbows ;)

@font-face

Tie pixelové fonty v nadpisoch tu na blogu? @font-face. Typografia bola dlhú dobu temnou stránkou webdizajnu. Dizajnéri sa museli uspokojiť s určitou skupinou tzv. "bezpečných" fontov. To sú tie, ktoré má v sebe každý počítač od základu. A keď uvážime, že Windows ponúka iné fonty ako Mac a Mac iné fonty ako Linux a každý z týchto systémov má X rôznych verzií zistíme, že na výber toho nemáme zas tak veľa.

@font-face nám dáva možnosť použiť prakticky akýkoľvek font chceme. Rovnako ako na server nahrávame napr. obrázky, máme teraz možnosť nahrať fonty a v CSS sa na ne odkazovať bežným spôsobom.

Handwritten text is handwritten

@font-face {
    font-family: Handwritten;
    src: url('fonts/handsean.ttf');
}

p {
    font-family: Handwritten, Helvetica, Arial, sans-serif;
    text-shadow: 1px 1px 1px #e0e0e0;
}

Aby to však nebolo tak jednoduché... :) Opera a Chrome/Safari akceptujú TrueType (.ttf) a OpenType (.otf) fonty, najnovšie Firefoxy okrem nich podporujú aj Web Open Font Format (.woff) a Internet Explorer vyžaduje Embedded OpenType (.eot) a iPhone chce vektory (.svg).

Pre normálne prehliadače teda použijete .ttf, vytvoríte CSS špeciálne pre IE a do neho hodíte:

@font-face {
    font-family: Handwritten;
    src: url('fonts/upirpaw.eot'); /* Eat this IE. Also, fuck you. */
}

Prípadne si môžete preštudovať tento mega podrobný návod ako rozbehať @font-face prakticky všade. Plus Google WebFonts ponúka niekoľko preddefinovaných fontov s nastaveniami aj všetkým... len si treba dávať pozor, či vami vyhliadnutý font rozumie slovenčine - teda či má mäkčene, dĺžne a tak podobne.

---

Tento príspevok končí našu sériu trachtátov s CSS tematikou. Predošlé články:

• Esenciálne CSS tipy a triky
• Užitočné CSS tipy a triky (sem sa nám tiež priplietla jedna css3 srandička, check it out!)

Verím, že nadobudnutú moc budete používať s rozvahou (Spiderman!) a obohatíte internety o kvalitné, použiteľné a pekne vyzerajúce stánky. V tomto poradí ;)

kthxbye :)