Nyheter i CSS3

Det dyker upp fler och fler sajter som använder inslag av nya CSS3 standarden. Vad kan man egentligen göra med CSS3 och vilka funktioner finns? I den här artikeln går jag igenom en del av de nya funktioner som finns och vad man kan använda dom till.

Skuggor

En funktion som används flitigt redan idag och även här på bloggen är skuggor. Man kan använda skuggor på texter och på boxar, det är två olika definitioner och dom ser ut såhär:

Rundade hörn

En annan funktion som också används väldigt mycket är möjligheten att runda hörnen på blockelement. I dagsläget stödjer inte Internet Explorer eller Opera funktionen men det enda som händer i de webbläsarna är att hörnen blir fyrkantiga vilket inte ställer till det alltför mycket. Så här ser korthandsdefinitionen ut:

Notera att det krävs -moz och -webkit för att det ska renderas korrekt i webbläsarna. Den ursprungliga implementationen ska dock vara border-radius. I dagsläget är det ingen webbläsare som stödjer det, men det kommer i och med Opera 10.50 och troligtvis även i Internet Explorer 9. För att styra varje hörn individuellt skiljer det sig lite på Firefox och Webkit implementationen:

RGBA

RGBA är något som kan bli användbart då man kan styra opaciteten på ett element direkt i färgdefinitionen. Smidigt och enkelt blir det och så här definierar du det:

Övertoningar

För webkit baserade webbläsare (läs Safari och Google Chrome) kan man nu också göra övertoningar direkt i CSS. Definitionen ser ut såhär:

Multipla bakgrundsbilder

Det här är en funktion som jag själv har saknat väldigt mycket. Såhär ser det ut när man använder sig av flera bakgrundsbilder i samma element. Observera att detta för tillfället endast fungerar i webkit baserade webbläsare.

Det var en del av de nya funktioner som har kommit med CSS3 men det finns en hel uppsjö med fler smarta saker som i framtiden kommer att underlätta webbutvecklandet. Bland annat en massa nya smarta selektorer som gör det enklare att plocka ut de element man vill ha. Det har också tillkommit animationsteknik direkt i CSS:en. Finns det intresse så skriver jag givetvis ihop artiklar om dessa också.

Du har kommit till slutet av inlägget

Tyckte du inlägget var intressant? Läs dessa också:

Hur du utformar en utskriftsmall

Introduktion i hur man utvecklar en webbplats

Skriv över inline styles med CSS

Skrivet 6 mars - 2010 Postat i: Tips & Trick, Övrigt