Interessante css3-features

Html5 en css3 bieden tal van nieuwe mogelijkheden om je pagina's meer allure te geven. We zetten hier een aantal css3-voorbeelden op een rij.

Schaduw-effect achter tekst
text-shadow: 2px 2px rgba(0, 0, 0, 0.2);

Schaduw-effect achter kader
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.50);
-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.50);

Transparantie van tekst
color: rgba(255, 255, 255);

Transparantie van achtergrond
background: rgba(255, 255, 255, 0.30);

Ronde hoeken om afbeelding of kader
-moz-border-radius: 15px;
border-radius: 15px;

Gedeeltelijk ronde hoeken om afbeelding of kader
-moz-border-top-left-radius: 15px;
-moz-border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;

Tekst in kolommen
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;