Allt fler webbläsare har nu stöd för CSS3, däribland Firefox, Safari och Google Chrome. Med CSS3 blir saker som att få till runda hörn och skugga bakom en div väldigt enkelt. Fördelarna är många, bland annat att du slipper använda bilder eller javascript för att få till snygga effekter, vilket i sin tur kommer att göra din hemsida snabbar och stabilare.

Trots att Internet Explorer inte har stöd för det ännu är det helt klart dags att börja uppdatera sin layout med lite trevliga CSS3-tricks för att öka användarvänligheten för de med en ordentlig webbläsare.

Runda hörn

Jag har skrivit om det tidigare, men det tåls att skriva om igen. Runda hörn är ett grymt enkelt sätt att piffa upp en annars kantig(ha, ha) design.

I Firefox:

.box {
	-moz-border-radius: 5px; /* Gör alla hörn runda */
}

	-moz-border-radius-bottomleft: 5px;
	/* Gör nedre hörnet till vänster runt */

	-moz-border-radius-topright: 5px
	/* Gör nedre övre till höger runt */

I webkit-baserade webbläsare(Safari, Chrome, Opera):

.box {
	-webkit-border-radius: 5px; /* Gör alla hörn runda */
}

.box {
	-webkit-border-bottom-left-radius: 5px;
	/* Gör nedre hörnet till vänster runt */

	-webkit-border-top-right-radius: 5px
	/* Gör nedre övre till höger runt */
}

Exempel


Twitter använder runda hörn i sin design.

Skugga

Att lägga in skugga bakom antingen text eller ett element är ett bra sätt att få in yttligare en dimension i sin design.

Skugga bakom ett element:

-moz-box-shadow: 1px 2px 3px #000;
 /* För Firefox */

-webkit-box-shadow: 1px 2px 3px #000;
/* För webkit(safari etc.)  */

Den första parametern(1px) bestämmer hur många pixlar i sidled skuggan ska vara, den andra(2px) i vilken höjd och den tredje(3px) hur suddig den ska vara. Ett minusvärde på de två första gör att den hamnar till höger eller ovanför elementet.

Skugga bakom text:

p {
	text-shadow: 2px 1px 3px #000;
}

Den första parametern(2px) bestämmer hur många pixlar i sidled skuggan ska vara, den andra(1px) i vilken höjd och den tredje(3px) hur suddig den ska vara. Ett minusvärde på de två första gör att den hamnar till höger eller ovanför texten.

Exempel

Snygga knappar utan bakgrundsbilder

Trött på att använda bakgrundsbilder för att få till en snygg gradient på dina knappar? CSS3 har en ny funktion som gör det enkelt. Det här stöds bara av webkit-baserade webbläsare än så länge, men Firefox är antagligen på gång.

button {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
}

Enkelt, du ställer in två färger(i rgb-format) som är startfärgen och slutfärgen och du har din gradient. Den stora fördelen är att du slipper ha olika stilar för olika stora knappar.

Exempel




Google använder det för Chorme och Safari.

Nya CSS-selectors

En skön grej när man gör en layout är CSS-selectors. Möjligheten att exempelvis göra den första bokstaven i en paragraf extra stor, eller att ha en unik stil på den första blogposten i WordPress. I CSS3 får vi ett par nya att leka med:

p [title^=abc] {
color: red;
}
// Detta kommer ändra alla paragrafer med en title-tag som börjar med abc.

div [rel$=123] {
color: red;
}
// Detta kommer ändra alla divar som har ett rel-värde som slutar med 123.

img [alt*=css3] {
border: none;
}
// Detta kommer ändra alla bilder med en alt-tagg innehållandes css3.

Mer läsning på CSS3.info.

Animera med CSS

Ja, det är sant, man kan animera med CSS3. Tyvärr är det mestadels webkit som har stöd för detta, men Firefox är förhoppningsvis på gång.

button {
background-color: #555;
-webkit-transition: background-color 0.3s linear; // MAGI!
}

button:hover {
background-color: #222;
}

När man nu håller musen över en knapp kommer bakgrundsfärgen fade:as över på 0.3 sekunder.

Exempel

Gå in på designskolan.net med Safari eller Chrome och håll musen över menyn för att se effekten.

Vad tror du om CSS3?

När kommer vi kunna börja använda det ordentligt? Microsoft har gått ut och sagt att de ska ha stöd för CSS3 i Internet Explorer 9. Men med tanke på hur många som fortfarande använder IE7, så kommer det antagligen ta år innan vi kan göra våra hemsidor beroende av det.