Verfraai jouw afbeeldingen door reflectie toe te passen Jeroen Hoekstra |
 2009-08-05 |
 Webdesign
Als je afbeeldingen op je website zet (foto's, tekeningen, icoontjes etcetera), dan kun je die op allerlei manieren laten zien. Gewoon rechttoe rechtaan, met een kader eromheen, in een album, maar ook met reflectie. Met reflectie lijkt het alsof de afbeelding op een spiegel staat. Het maakt een afbeelding net wat dynamischer. Hieronder zie je een voorbeeld van reflectie, toegepast op een foto van mijn collega Radovan:
Reflection.js is een javascript-bestandje waarmee je reflectie kunt toevoegen aan de afbeeldingen op je website. De installatie is supereenvoudig. Je begint met het downloaden van het javascript-bestandje. Dat doe je via http://cow.neondragon.net/stuff/reflection/reflection.zip. Pak vervolgens het zip-bestand uit met behulp van unzip-software en upload reflection.js met een FTP-programma naar je webruimte. De code voor het aanroepen van het javascript-bestandje voeg je toe aan je HTML-pagina's binnen de <head> en </head>-tag. De code ziet er als volgt uit: <script type="text/javascript" src="reflection.js"></script> * Klik hier voor meer uitleg over hoe je deze code op je website kunt plaatsen. Je wilt misschien niet dat iedere afbeelding van je site voorzien wordt van een reflectie. In dat geval moet je aangeven welke afbeeldingen een reflectie moeten krijgen. Dit doe je door aan de < img>-tag een CSS-class toe te voegen. Normaal ziet een < img>-tag er als volgt uit: <img src="voorbeeld.jpg" alt"voorbeeld van een img-tag" /> Nu voegen we de CSS-class toe: <img class="reflect" src="voorbeeld.jpg" alt"voorbeeld van een img-tag" /> Sla nu je HTML-bestand op en upload het naar je webruimte. Als je nu de pagina in een browser gaat bekijken, dan zul je zien dat er een reflectie onderaan de afbeelding is verschenen. Je kunt de reflectie nog enigszins beïnvloeden door de lijst van CSS-classes uit te breiden. Hieronder staan enkele voorbeelden. De standaardreflectie neemt een ruimte in van 50% van de afbeelding. Vind je dit te veel of te weinig dan voeg je een extra CSS-class toe die de hoogte van de reflectie definieert: <img class="reflect rheight25" src="voorbeeld.jpg" alt"voorbeeld van een img-tag" /> De CSS-class 'rheight25' geeft nu aan dat de reflectie nog maar een ruimte van 25% van de afbeelding in beslag neemt. Zo kun je verder nog de mate van ondoorschijnendheid (= de opaciteit) van de reflectie beïnvloeden door een extra CSS-class toe te voegen. De werking is hetzelfde als bij het instellen van de hoogte: <img class="reflect ropacity75" src="voorbeeld.jpg" alt"voorbeeld van een img-tag" /> De ropacity75 class geeft aan dat slechts 75% van de afbeelding wordt doorgelaten in de reflectie. Een gecombineerde versie van de twee eigenschappen is ook mogelijk: <img class="reflect rheight25 ropacity75" src="voorbeeld.jpg" alt"voorbeeld van een img-tag" /> De uitleg van de gecombineerde versie spreekt voor zich. Voorbeelden van deze reflecties kun je vinden op http://cow.neondragon.net/stuff/reflection/src/readme.html. Kortom, je kunt met dit javascript-bestandje je afbeelding een frisse uitstraling geven. Probeer het maar eens uit. Succes! |
