En av de delar som är som mest spännande med CSS3 är möjligheten att jobba med effekter. Det vi tidigare var tvingade att göra i Photoshop kan vi idag enkelt tillverka med hjälp av CSS regler. Här nedan följer ett ex antal effekter som du kan tillämpa på olika objekt i din CSS-kod.

Runda hörn.
Ändra radius värdet för hur runt ditt objekt skall vara.

.box_round {
-webkit-border-radius: 12px; /* Safari, iOS, Android */
-moz-border-radius: 12px; /* Firefox */
border-radius: 12px; /* Opera, IE, Safari, Chrome, Firefox, iOS 4, Android 2.1 */
}

Box skugga
Skuggor kan man både sätta på text och på boxar. För att kontrollera vart skuggan skall hamna så styr man det med både X-led, Y-led och hur hård/mjuk skuggan skall vara. Se bilden under för tydligare instruktion.

.box_skugga {
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Safri, Chrome */
-moz-box-shadow: 0px 0px 4px #ffffff; /* Firefox – 3.6 */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
}

Text skugga

.text_skugga {
text-shadow: 2px 2px 3px #000; /* Firefox, Opera, Safari, Chrome */
}

Genomskinliga färger
Att kunna sätta en halvgenomskinlig färg på en box kan vara ett snyggt sätt att kunna visa vilken bakgrundsfärg man har. Se Illustrationen för att se vad de olika värdena representerar.

.farg_rgba {
background-color: transparent;
background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6–IE9
zoom: 1;
}

Färgövertoningar