• creatyna - inspiracje i informacje
  • web.creatyna - tutoriale dla webdesignerów
  • tech|Creatyna - blog o internecie

  • rss|Creatyna - wszystkie serwisy w jednym RSS

poniedziałek, 4 października 2010

CSS3: Gradient

CSS3 daje możliwość stworzenia gradientu jako tła do elementu bez konieczności używania obrazka. Dziś pokażę jak to zrobić i to tak by działał w większości przeglądarek.


Tworzymy gradient w CSS3

Dla przeglądarek Webkit (Safari, Chrome)

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

Dla Firefoxa 3.6+

background: -moz-linear-gradient(top,  #FFBE0F,  #CF9700);

Dla IE (Internet Explorer nie obsługuje gradientów)

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


Gradient Cross-browser

Łączymy kod aby uzyskać Gradient Cross-browser (dla wszystkich przeglądarek), dodatkowo dodajemy kolor dla background dla starszych przeglądarek.

background: -moz-linear-gradient(top,  #FFBE0F,  #CF9700);
background: -webkit-gradient(linear, left top, left bottom, from(#FFBE0F), to(##CF9700)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBE0F', endColorstr='#CF9700'); 
background: #FFBE0F;


Ograniczenia IE

Internet Explorer nie obsługuje color-stop czy radial gradient, dlatego możliwe jest ustawienie jedynie dwukolorowego, liniowego gradientu z pionowym lub poziomym położeniem.


Sterowanie gradientem

Gradientem można dowolnie sterować; dodawać kolory, określać odległość między nimi, wybrać typ gradientu, dotyczy to jednak jedynie dwóch przeglądarek Webkit(Chrome,Safari) i Firefoxa. Ręczne pisanie kodu może być trochę zawiłe i długie, dlatego warto skorzystać z generatorów gradientów:
  1. gradients.glrzad.com
  2. westciv.com
  3. display-inline.fr
  4. http://www.colorzilla.com/gradient-editor/


Gradientowy tekst

Przeglądarki WebKit pozwalają na ustawienie gradientu na tekście:

h1 {
font-size: 54px;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

W przypadku innych przeglądarek można zastosować pewne hacki więcej można przeczytać tutaj i tu.

Brak komentarzy:

Prześlij komentarz

Copyright 2009 - 2010 Creatyna. All rights reserved.