Ibland vill man skapa en design på bloggen eller hemsidan där en färg linjärt övergår till en annan. Här visar jag hur man med css gradient kan skapa snygga menyer eller boxar.
Många wordpressteman använder sig av en .png eller .gif bild som återupprepas i x-led (horisontellt) eller y-led (lodrätt) för att skapa denna effekt. Detta fungerar förstås alldeles utmärkt även om jag själv tycker att det kan vara lite pilliggare att göra det där än i stilmallen (css-mallen). Därför har jag den senaste tiden börjat använda mig av css för att skapa denna gradient effekt och tänkte att någon annan kanske också skulle kunna vara intresserad av detta.
Nu krävs det dock olika kod för detta i olika webbläsare vilket gör det hela en aning krångligare. Men har man bara fått till koden en första gång så är det mest klipp och klistra som gäller och det går snabbt och enkelt. Så över till koden för detta.
Det som skapas nu är följande effekt nedan:
Gradient kod för Firefox
background: -moz-linear-gradient(center top , #FFFFFF, #000000) repeat scroll 0 0 transparent;
Gradient kod för Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000');
Gradient kod för Chrome/Safari
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
För att få detta att bli bra i alla webbläsare gäller det alltså att köra med alla tre css raderna vilka du får koden till här nedan:
background: -moz-linear-gradient(center top , #FFFFFF, #000000) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000'); background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
Hoppas att detta kan vara till nytta när du fixar och trixar med din hemsida!
Läs gärna mer steg för steg guider:
{ 5 comments… read them below or add one }
Hade ingen aning om att man kunna göra gradient-effekter med enbart css. Utmärkt inlägg!
Santos: Tackar, kul att höra att du uppskattar det!
Vilken hacker du har blivit Simon! =)
J: Haha, nää knappast ännu, men jag har lärt mig mycket när jag har tampats med att skapa ett eget Wordpresstema som nääästan är klart nu. Fattas bara att få till en kontrollpanel till temat för några funktioner som att bestämma vilken ordning kolumnerna skall komma i..
Oj det luktar proffstema lång väg!
{ 4 trackbacks }