CSS afbeeldingmanipulatie
Aan afbeeldingen kan gemakkelijk een "look" worden gegeven met CSS afbeeldingmanipulatie, een cross-browser CSS techniek. Denk dan aan het toevoegen van een randje of bepaalde schaduw in een afbeelding.
Zie hieronder twee voorbeelden van een grunge en een cleane look.
Voorbeeld 1 (#example1): Live resultaat met een foto van twee frambozen. Schuif de cursor erover om de CSS afbeeldingmanipulatie uit te zetten.
Voorbeeld 2 (#example2): Live resultaat met een foto van een landschap met daarboven een tekst. Animaties met lagen zijn gemakkelijk mogelijk.
Waarom CSS afbeeldingmanipulatie?
Voordeel: afbeeldingen hoeven niet te worden bewerkt. De gebruiker of server hoeven geen tijdrovende taken uit te gaan voeren om alle afbeeldingen de juist touch te geven, zeker als sites veel afbeeldingen bevat kan CSS afbeeldingmanipulatie veel tijd besparen.
Voordeel: aan foto's kunnen gemakkelijk watermerken, teksten, etc. worden toegevoegd.
Nadeel (of voordeel..): afbeeldingen zijn niet meer te selecteren.
Voordeel: de techniek is cross-browser. Alleen bij Internet Explorer 6 moet worden opgelet met het gebruik van alphatransparantie in PNG's.
Techniek
1. De <img> wordt in een <div class="afbeelding">, die relatief gepositioneerd is, geplaatst.
2. Vervolgens voeg je in deze <div class="afbeelding"> onder de <img>-tag nieuwe lagen toe. Dit kun je doen door nieuwe <div>s te openen met de eigenschappen position:absolute; top:0; left:0; en natuurlijk de width en de height van de afbeelding en de PNG-achtergrondafbeelding.
3. Maak eigen variaties!
Bekijk voor meer technische informatie hierover de source van deze pagina en de css: css_afbeeldingmanipulatie.css.
2011.03.25: spelfouten zijn verbeterd.2011.03.16