spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Ernest Sawyer 9.10.2011, článok je súčasťou seriálu CSS triky
Hodnoť článok:
2 0

CSS triky 6: gradient (farebný prechod) funkčný vo všetkých prehliadačoch

Snívali ste niekedy o tom, aby vám na farebný prechod stačil nejaký CSS kód namiesto obrázku s repeat-x? Ukážeme si ako na to!

  • IE6+
  • Opera
  • Chrome
  • Firefox
  • Safari

CSS gradient bol prvý krát svetu predstavený niekedy v roku 2008 ako súčasť webkitu. Nedostalo sa mu však veľkej obľuby, nakoľko webkit máme len v chrome a safari (vtedy len Safari). Dnes je však situácia iná a okrem webkit-gradient tu máme aj -moz-gradient (Firefox), -ms-gradient, linear-gradient a ďalších x možností definovania gradientu. Na začiatok vám vysvetlím ako funguje gradient pre webkit, -moz- a ie filter. V konečnom dôsledku nie je však cieľom tohto článku otravovať vás kopou nudnej teórie a ani znechutiť vás definovaním 9 príkazov kvôli jednému prechodu. Práve preto si v závere článku ukážeme ONLINE nástroj, kde si len nahodíte farby (úplne rovnako ako vo photoshope) a ono vám to vypľuje cross-browser valid css kód pre váš prechod. Takže, ako na to?

Gradient pre webkit

background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));

Ako vidíte, funguje to cez štandardný css atribút background. To čo nasleduje však už nie je veľmi štandardné.

Vysvetlenie:
gradient

Gradient pre firefox

background: -moz-linear-gradient(top,  #444,  #000);

Vysvetlenie:
gradient

Gradient pre IE

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');

Vysvetlenie:
gradient

Všetko dokopy

Keď to teda dáme dokopy, budeme to mať pekne funkčné pre všetky prehliadače (okrem operi, ale k tomu sa dostaneme ochvíľu).

background: #444; /* pre prehliadače bez podpory CSS*/
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); /* Safari, Chrome  */
background: -moz-linear-gradient(top,  #444,  #000); /* Firefox 3.6+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); /* IE */

Online vizuálny nástroj na generovanie CSS pre gradienty vrátane opacity za pár sekúnd

Tak a je to tu, konečne sa dostávame k tomu, čo bude mať pre vás prínos. Ide o ultimátny nástroj Colorzilla- Gradient editor ktorý je online a zadarmo prístupný tu:

http://www.colorzilla.com/gradient-editor/

Náhľad:

gradient

Okrem preddefinovaných prechodov si tam môžete vyrobiť aj vlastný. Prechodom môžete nastavovať opacity rovnako ako vo photoshope (dokonca rovnakým nástrojom). Najväčšou výhodou je však výsledný kód, ktorý funguje okrem normálnych prehliadačov aj v IE a to od verzie 6 vyššie! No nie je to úžasné? ;)

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest

Ernest Sawyer Ernest Sawyer

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)


Hodnoť článok:
2 0

2 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Ernest Sawyer 10.10.2011 14:00:03
martin: ďakujem za notice, zahrniem to do článku k IE hackom ktorý sa chystám urobiť ako číslo 9, samozrejme s poďakovaním tebe ;)
0 0 Martin Stříbný 10.10.2011 12:37:43
Poslední dobou máme nějak společné témata :-). Mám k tomu pár postřehů.
A) Tady tohle řešení nebude fungovat v IE v případě, že chci použít současně přechod na pozadí a kulaté rohy. IE vykreslí pozadí jako obdélník.
Víc o tom píšu tady: http://blog.bronzi.cz/linearni-prechody-pomoci-css3-ve-vsech-prohlizecich/

B) V IE se někdy přechod pomocí filtru nezobrazí a je potřeba použít kličku zoom:1 aby vše fungovalo jak má.
Zajtra.sk > Programovanie > CSS/HTML > CSS triky 6: gradient (farebný prechod) funkčný vo všetkých prehliadačoch


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama