2 overlappende foto's middels schuine rand

[Edwinboss]

Het plaatje spreekt al een beetje voor zich, ik ben bezig met een site die op de home 2 foto's naast elkaar heeft staan.
Beide foto's moeten afzonderlijk faden naar andere foto's, 2 verschillende slideshows naast elkaar als het ware.

Maar zoals je ziet overlappen de foto's elkaar, ik ben bang dat het haast gewoon onmogelijk is voor elkaar te krijgen met alleen css(3) en javascript.
Er zijn genoeg JavaScript (jquery) plugins voor het croppen maar niet voor schuin croppen.

Mischien heeft iemand van jullie toch een idee hoe ik dit makkelijk client-side kan oplossen.

Het kan wel met bijvoorbeeld PHP en daar met ImageMagick een randje eruit snijden en transparant maken maar dat is in verband met het CMS wat ik gebruik veel werk.

[Flowmo]

Standaard css kan dit inderdaad (nog) niet. Je zal hiervoor mogelijk van HTML5 canvas gebruik moeten maken, met een fallback voor IE.

Edit: Webkit browsers kunnen dit wel, dmv CSS Masks. Zie http://www.webkit.org/blog/181/css-masks/
Helaas nog niet cross-browser dus...

[ Voor 36% gewijzigd door Flowmo op 10-08-2011 11:36 ]

[djexplo]

Je zou het ook kunnen doen zonder canvas, door zelf een base64 embedded blaatje te maken met javascript

code:

 <img alt="Embedded Image" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

[Bosmonster]

Vergeet ook niet dat dit schuin afsnijden redelijk lelijk wordt, aangezien je de foto's nooit goed op elkaar aangesloten krijgt, tenzij je ze op de pixel, zonder anti-aliasing uitgemaskerd krijgt.

Ik zou even overleggen met de designer als die je zoiets geeft en je geen Flash mag/wil gebruiken, ipv je in allerlei hoeken te wringen voor iets wat uiteindelijk qua functionaliteit toch onbelangrijk is.

[ Voor 15% gewijzigd door Bosmonster op 10-08-2011 11:55 ]

[Flowmo]

Heb nog een idee, maar dat zorgt ervoor dat je je afbeelding op een specifieke manier moet opmaken (de afbeelding roteren).

Mbv CSS rotate en overflow:hidden kun je de foto's zo positioneren dat de schuine rand eigenlijk de linker- of rechterzijde is van de afbeelding. Als je dan de afbeelding roteert, heb je dus een schuine rand. Je afbeelding maak je dan op op (ik noem maar wat) -20 graden, en dan in je html roteer je deze dan met +20 graden. Dit zou ervoor moeten zorgen dat de afbeelding weer "recht" staat en je een schuine rand hebt.
Dit is mbv een HTC file cross-browser te realiseren, FF en webkit ondersteunen de css rotate property namelijk al.

Zie hier voor de .htc file en een cross-browser demo: http://samuli.hakoniemi.n...-transformation-with-css/

[ Voor 20% gewijzigd door Flowmo op 10-08-2011 12:11 ]

[Bosmonster]

Als je dan toch zelf de afbeeldingen gaat bewerken, knip dan gewoon die hoek eraf en maak er een PNG van

[Verwijderd]

Bosmonster schreef op woensdag 10 augustus 2011 @ 13:01:
Als je dan toch zelf de afbeeldingen gaat bewerken, knip dan gewoon die hoek eraf en maak er een PNG van

Hij zegt toch dat dat veel extra werk kost ?

Ik snap zijn issue wel... je wil gewoon uploaden en een klein stukje code de rest laten doen... dat is automatisering !

[Flowmo]

Verwijderd schreef op woensdag 10 augustus 2011 @ 13:04:
[...]


Hij zegt toch dat dat veel extra werk kost ?

Ik snap zijn issue wel... je wil gewoon uploaden en een klein stukje code de rest laten doen... dat is automatisering !

Probleem is dat dit meer werk kost dan "een klein stukje code". Het is óf op voorhand je afbeeldingen bewerken, óf een flink lap code server-side, óf een flink lap code met canvas + fallback client side. Er is geen "snelle en makkelijke" manier om dit uit te voeren. Ten minste, voor zover ik daarvan op de hoogte ben.

Dan kan je wel "automatisering" gaan roepen, maar niet alles in de automatisering gaat met een klein stukje code. Afbeeldingen bewerken in een browser kost nou eenmaal wat meer code dan een paar regeltjes PHP of JS/CSS.

[Bosmonster]

Verwijderd schreef op woensdag 10 augustus 2011 @ 13:04:
[...]

Hij zegt toch dat dat veel extra werk kost ?

Ik snap zijn issue wel... je wil gewoon uploaden en een klein stukje code de rest laten doen... dat is automatisering !

Lees anders de post waar het een reactie op was ook even. Het voorstel was dus om de foto's te draaien in bewerking en met CSS terug te draaien. Dat is net zoveel werk.

De oplossing hier ligt mijns inziens helemaal niet in automatisering of bewerkingen overigens, maar in communicatie en teamwork. De designer moet iets bedenken dat wel reeel is.

[ Voor 16% gewijzigd door Bosmonster op 10-08-2011 13:16 ]

[OkkE]

Of wachten tot CSS Masks in alle browsers geïmplementeerd is.

[Verwijderd]

Bosmonster schreef op woensdag 10 augustus 2011 @ 13:15:
[...]


Lees anders de post waar het een reactie op was ook even. Het voorstel was dus om de foto's te draaien in bewerking en met CSS terug te draaien. Dat is net zoveel werk.

De oplossing hier ligt mijns inziens helemaal niet in automatisering of bewerkingen overigens, maar in communicatie en teamwork. De designer moet iets bedenken dat wel reeel is.

Je reactie gaat gewoon nergens over... voegt niets toe!

Jij zegt wel dat die code net zoveel werk is... echter hoef je de code maar een keer te bouwen en kan het met xxxxxx foto's werken... zeker fijn als je ze random laadt laden.

[Bosmonster]

Verwijderd schreef op woensdag 10 augustus 2011 @ 13:28:
[...]


Je reactie gaat gewoon nergens over... voegt niets toe!

Jij zegt wel dat die code net zoveel werk is... echter hoef je de code maar een keer te bouwen en kan het met xxxxxx foto's werken... zeker fijn als je ze random laadt laden.

Le-zen.

Flowmo's voorstel gaat uit van gedraaide foto's die je weer terugdraait met CSS om de schuine kant te benutten. Dat is dus bewerking + script.

Ik zeg: als je dan toch bewerking gaat doen, laat dat script dan achterwege en bewerk ze zo dat je ze direct kunt gebruiken (door de hoek eraf te knippen).

[Verwijderd]

Bosmonster schreef op woensdag 10 augustus 2011 @ 13:35:
[...]


Le-zen.

Flowmo's voorstel gaat uit van gedraaide foto's die je weer terugdraait met CSS om de schuine kant te benutten. Dat is dus bewerking + script.

Ja en ? Prima oplossing dus!

Ik zeg: als je dan toch bewerking gaat doen, laat dat script dan achterwege en bewerk ze zo dat je ze direct kunt gebruiken (door de hoek eraf te knippen).

Ik denk dat hij wel blij zal zijn als jij dat voor al zijn foto's in zijn CMS wil doen... dat is zijn issue namelijk... gaan ongetwijfeld wisselende foto's worden of iets dat je gewoon door uploaden wil laten veranderen.

Is dat nou echt zo moeilijk om in te denken ?

Gezien flash geen echte optie meer is zal hij dus moeten scripten!

[ Voor 4% gewijzigd door Verwijderd op 10-08-2011 14:05 ]

[Edwinboss]

Bosmonster schreef op woensdag 10 augustus 2011 @ 13:15:
[...]

De oplossing hier ligt mijns inziens helemaal niet in automatisering of bewerkingen overigens, maar in communicatie en teamwork. De designer moet iets bedenken dat wel reeel is.

Heb even overlegd en heb begrepen dat de klant goed met photoshop overweg kan.
De klant gaat zelf de foto's voorbewerken volgens een stramien om ze vervolgens te uploaden.

Thx in ieder geval voor het meedenken allemaal

[Flowmo]

Edwinboss schreef op woensdag 10 augustus 2011 @ 14:17:
[...]


Heb even overlegd en heb begrepen dat de klant goed met photoshop overweg kan.
De klant gaat zelf de foto's voorbewerken volgens een stramien om ze vervolgens te uploaden.

Thx in ieder geval voor het meedenken allemaal

Nu wachten op het telefoontje "Maar hoe doe ik dat eigenlijk? Kan ik bij jullie een cursus Photoshop doen?"

Gelukkig is het op deze manier wel opgelost voor je! Scheelt je een hoop werk..

[ Voor 8% gewijzigd door Flowmo op 10-08-2011 14:41 ]

[Bosmonster]

Verwijderd schreef op woensdag 10 augustus 2011 @ 14:04:
[...]

Ik denk dat hij wel blij zal zijn als jij dat voor al zijn foto's in zijn CMS wil doen... dat is zijn issue namelijk... gaan ongetwijfeld wisselende foto's worden of iets dat je gewoon door uploaden wil laten veranderen.

Is dat nou echt zo moeilijk om in te denken ?

Ik snap je punt niet zo.

Waar zie jij precies het verschil tussen serverside afbeeldingen roteren of deze af te knippen? Voor beiden zit je met hetzelfde euvel dat jij noemt.

Sterker nog, met roteren moet je ook nog vergroten/uitknippen om er weer een vierkante afbeelding van te krijgen, wat betekent dat je originelen dus al een stuk groter moeten zijn dan hoe je ze gaat gebruiken. Dat lijkt me vanuit het CMS, zeker met bestaande foto's, nogal een issue.

Ik krijg sterk het idee dat je eigenlijk niet zo goed snapt wat flowmo's oplossing nu eigenlijk inhield, aangezien zijn oplossing juist veel ingrijpender is als het gaat om serverside bewerkingen op de foto's.

Dus anyway. Doe even rustig en bedenk je dat er ook een reele kans is dat je het zelf gewoon niet goed snapt, ipv ik

[ Voor 41% gewijzigd door Bosmonster op 10-08-2011 15:40 ]

[Flowmo]

Bosmonster schreef op woensdag 10 augustus 2011 @ 15:30:
[...]


Ik snap je punt niet zo.

Waar zie jij precies het verschil tussen serverside afbeeldingen roteren of deze af te knippen? Voor beiden zit je met hetzelfde euvel dat jij noemt.

Sterker nog, met roteren moet je ook nog vergroten/uitknippen om er weer een vierkante afbeelding van te krijgen, wat betekent dat je originelen dus al een stuk groter moeten zijn dan hoe je ze gaat gebruiken. Dat lijkt me vanuit het CMS, zeker met bestaande foto's, nogal een issue.

Ik krijg sterk het idee dat je eigenlijk niet zo goed snapt wat flowmo's oplossing nu eigenlijk inhield, aangezien zijn oplossing juist veel ingrijpender is als het gaat om serverside bewerkingen op de foto's.

Dus anyway. Doe even rustig en bedenk je dat er ook een reele kans is dat je het zelf gewoon niet goed snapt, ipv ik

Mijn oplossing ging sowieso ook niet over een server-side oplossing, meer het opmaken van een bestaande afbeelding (in photoshop of whatever) met een vooraf ingestelde rotatie welke met CSS weer terug werd geroteerd. Voordeel van deze aanpak tov schuin afgesneden transparante png is dat de rand van de schuine afbeelding ook echt de rand is waar je op kan klikken. Met een transparante png zit je uberhaupt nog met een transparante hitbox.

[Verwijderd]

Flowmo schreef op woensdag 10 augustus 2011 @ 16:11:
[...]

Mijn oplossing ging sowieso ook niet over een server-side oplossing, meer het opmaken van een bestaande afbeelding (in photoshop of whatever) met een vooraf ingestelde rotatie welke met CSS weer terug werd geroteerd. Voordeel van deze aanpak tov schuin afgesneden transparante png is dat de rand van de schuine afbeelding ook echt de rand is waar je op kan klikken. Met een transparante png zit je uberhaupt nog met een transparante hitbox.

Hoezo ? Je kunt toch een map over je plaatje heen zetten, twee stuks dus.

[Flowmo]

Verwijderd schreef op woensdag 10 augustus 2011 @ 16:14:
[...]


Hoezo ? Je kunt toch een map over je plaatje heen zetten, twee stuks dus.

En hoe ga je die map defnieren dan?

Edit: Ja, ik snap em. Die definieer je eveneens vooraf als standaard markup. Kan ook inderdaad. Ik zat meer in de richting te denken van een <a> om de <img> en dan gaat dat dus niet. Met een <map> en <area> wel.

[ Voor 31% gewijzigd door Flowmo op 10-08-2011 16:31 ]

[Verwijderd]

Flowmo schreef op woensdag 10 augustus 2011 @ 16:27:
[...]

En hoe ga je die map defnieren dan?

Zoiets? http://www.elated.com/articles/creating-image-maps/

[R4gnax]

Je kunt natuurlijk ook gewoon een container met overflow: hidden een rotatie van ca. 20 graden geven met CSS3 (of het matrix transform filter voor IE<9) en daarbinnen het plaatje zelf weer 20 graden terug de andere kant op roteren. Aangezien je klikbare plaatjes wilt hebben kan die container zelfs gewoon al de <a> tag zijn.

Geen bewerkingen met photoshop voor nodig.

In Mozilla browsers kun je het ook nog voor elkaar krijgen met SVG clip masks, maar dat heeft hetzelfde cross-browser compatibility probleem als eerder genoemde CSS masks die door Webkit gepioneerd worden.

[ Voor 7% gewijzigd door R4gnax op 10-08-2011 16:43 ]

[Verwijderd]

Container zou ook prima gaan inderdaad welke hidden is.

Maar voor de basics leek mij een map handiger gezien er al gedacht wordt om plaatjes te bewerken wat prima gescript kan worden !

[R4gnax]

Verwijderd schreef op woensdag 10 augustus 2011 @ 16:48:
Container zou ook prima gaan inderdaad welke hidden is.

Maar voor de basics leek mij een map handiger gezien er al gedacht wordt om plaatjes te bewerken wat prima gescript kan worden !

Met boven beschreven aanpak roteer je de container om een schuine rand te maken, en roteer je het plaatje binnen de container een zelfde aantal graden in de tegenovergestelde richting. Zo komt het plaatje weer recht te staan.

Je hoeft met zo'n aanpak je plaatjes helemaal niet voor te bewerken.

[TheJVH]

Dit is toch heel makkelijk op te lossen met een mooie Photoshop batch action? Volgens mij is dat dan zo gedaan voor een stack foto's.

[DeEindbaas]

Hier heb ik een oplossing voor je gemaakt, ik hoop dat het is wat je bedoeld:
http://www.dreamwire.nl/klanten/tweakers/

Getest in Chrome, Firefox, IE 9.0, IE 8.0, IE 7.0 en IE 6.0

[ Voor 72% gewijzigd door DeEindbaas op 10-08-2011 21:08 ]

[Edwinboss]

Dreamwire schreef op woensdag 10 augustus 2011 @ 20:13:
Hier heb ik een oplossing voor je gemaakt, ik hoop dat het is wat je bedoeld:
http://www.dreamwire.nl/klanten/tweakers/

Getest in Chrome, Firefox, IE 9.0, IE 8.0, IE 7.0 en IE 6.0

Dat werkt inderdaad prima, maar de foto's staan er dan wel gedraaid in, dat kun je dan oplossen zoals al aangegeven werd door de foto de andere kant op terug te draaien voor het uploaden.
Maar omdat je dan toch al moet fotoshoppen kun je net zo goed gewoon de hoekjes eruit snijden en zonder al die trucjes de foto's over elkaar heen zetten met z-index.

TheJVH schreef op woensdag 10 augustus 2011 @ 18:26:
Dit is toch heel makkelijk op te lossen met een mooie Photoshop batch action? Volgens mij is dat dan zo gedaan voor een stack foto's.

En er word een soort photoshopsjabloon of hoe je zoiets ook noem gemaakt hier door de ontwerpster zodat de klant met een peer klikken de foto's kan voorbereiden.

[Cartman!]

Ik zou toch echt gewoon 1 losse php-file maken die van de 2 images er 1 maakt. Das 1 keer even een scriptje schrijven en daarna ben je klaar en hoef je niks meer in photoshop te roteren oid.

Tevens werkt t dan in elke browser ongeacht of ie bepaalde implementaties css heeft.

[ Voor 18% gewijzigd door Cartman! op 11-08-2011 08:52 ]

[Edwinboss]

Cartman! schreef op donderdag 11 augustus 2011 @ 08:52:
Ik zou toch echt gewoon 1 losse php-file maken die van de 2 images er 1 maakt. Das 1 keer even een scriptje schrijven en daarna ben je klaar en hoef je niks meer in photoshop te roteren oid.

Tevens werkt t dan in elke browser ongeacht of ie bepaalde implementaties css heeft.

Mischien de begin-post even lezen, beide afbeeldingen moeten los van elkaar wisselen.

[Flowmo]

R4gnax schreef op woensdag 10 augustus 2011 @ 18:23:
[...]


Met boven beschreven aanpak roteer je de container om een schuine rand te maken, en roteer je het plaatje binnen de container een zelfde aantal graden in de tegenovergestelde richting. Zo komt het plaatje weer recht te staan.

Je hoeft met zo'n aanpak je plaatjes helemaal niet voor te bewerken.

Dat is misschien nog wel de beste optie inderdaad...!

[-LA-]

Dreamwire schreef op woensdag 10 augustus 2011 @ 20:13:
Hier heb ik een oplossing voor je gemaakt, ik hoop dat het is wat je bedoeld:
http://www.dreamwire.nl/klanten/tweakers/

Getest in Chrome, Firefox, IE 9.0, IE 8.0, IE 7.0 en IE 6.0

Dit, en dan op de images: style="-webkit-transform: rotate(-30deg); " (in chrome dan)

[DeEindbaas]

Edwinboss schreef op donderdag 11 augustus 2011 @ 08:47:
[...]


Dat werkt inderdaad prima, maar de foto's staan er dan wel gedraaid in, dat kun je dan oplossen zoals al aangegeven werd door de foto de andere kant op terug te draaien voor het uploaden.
Maar omdat je dan toch al moet fotoshoppen kun je net zo goed gewoon de hoekjes eruit snijden en zonder al die trucjes de foto's over elkaar heen zetten met z-index.

http://www.dreamwire.nl/klanten/tweakers/

De foto's zijn nu recht... enige nadeel nu is dat in IE 8.0, IE 7.0 en IE 6.0 ze niet meer worden afgesneden maar netjes naast elkaar staan.

Chrome, Firefox, IE 9.0 --> Perfect hoe jij het wilt hebben.
IE 8.0, IE 7.0 IE 6.0 --> Werkt goed alleen loopt de lijn gewoon recht.

View oude IE's:

[ Voor 3% gewijzigd door DeEindbaas op 11-08-2011 10:06 ]

[Cartman!]

Edwinboss schreef op donderdag 11 augustus 2011 @ 09:09:
[...]


Mischien de begin-post even lezen, beide afbeeldingen moeten los van elkaar wisselen.

Hmm, dat stukje was niet goed aangekomen. Maar dan kun je nog steeds met 1 php file elke image afsnijden door een stuk transparant te maken, scheelt je nog steeds n berg gedoe met CSS en blijft m'n argument staan. Gewoon image.php?img=file.png&side=left en dan check je of die variant bestaat, zonee: maak deze en sla em op, zoja: header redirect erheen. Dan hoef je alleen nog te maken dat de images in- en uitfaden maar dat lijkt me geen probleem verder.

[jurp5]

En met wat gepruts krijg je het ook in IE aan de praat: http://www.useragentman.c...ss-transforms-even-in-ie/

[Edwinboss]

Dreamwire schreef op donderdag 11 augustus 2011 @ 10:05:
[...]


http://www.dreamwire.nl/klanten/tweakers/

De foto's zijn nu recht... enige nadeel nu is dat in IE 8.0, IE 7.0 en IE 6.0 ze niet meer worden afgesneden maar netjes naast elkaar staan.

Chrome, Firefox, IE 9.0 --> Perfect hoe jij het wilt hebben.
IE 8.0, IE 7.0 IE 6.0 --> Werkt goed alleen loopt de lijn gewoon recht.

View oude IE's:
[afbeelding]

Dat komt aardig in de buurt, mooi bedacht!
Ga het denk ik op die manier alsnog doen, en dan op onderstaande manier in IE7+ ook goed werkend proberen te krijgen.

jurp5 schreef op donderdag 11 augustus 2011 @ 10:19:
En met wat gepruts krijg je het ook in IE aan de praat: http://www.useragentman.c...ss-transforms-even-in-ie/

[DeEindbaas]

Edwinboss schreef op donderdag 11 augustus 2011 @ 10:27:
[...]


Dat komt aardig in de buurt, mooi bedacht!
Ga het denk ik op die manier alsnog doen, en dan op onderstaande manier in IE7+ ook goed werkend proberen te krijgen.


[...]

Wacht even hoor ik zal even de goeie bestanden weer uploaden voor je ... ik was even met dat CSS gedoe bezig van JURP5...

*edit* Alles staat weer zoals de vorige post.

[ Voor 6% gewijzigd door DeEindbaas op 11-08-2011 10:34 ]

[Verwijderd]

Gewoon even een check inbouwen dat mensen met IE een Firefox download aangeboden krijgen of ze moeten hun hoofd schuin houden

Dat blijft de issue... maar zal best te workarounden zijn denk ik.

[Cartman!]

Wil toch nog even mijn php-variantje bewijzen...

origineel:


na masking:


mask:


source: http://media-encoder.com/tweakers/mask.phps

Zit nog geen beveilging/caching/optimalisatie in maar dat lijkt me niet zo moeilijk. Hiermee kun je gewoon in elke div een png prakken en die lekker laten faden.

edit: ik heb t dus in 5min gemaakt dus er geen kunnen rechten aan ontleend worden

[ Voor 12% gewijzigd door Cartman! op 15-08-2011 15:26 ]

[BtM909]

Sterker nog, door jouw oplossing kan je gewoon alleen de linkerafbeelding afsnijden en positioneren bovenop de rechterafbeelding.

[Cartman!]

Klopt ja, zo had ik em nog niet eens bekeken

M'n punt is vooral dat je wel de vette nieuwe technieken kunt gebruiken (css3) maar dat je met een hele eenvoudige oplossing het gewoon direct crossbrowser voor elkaar kunt hebben zonder dat je er daarna omkijken naar hebt. Ik steun de vooruitgang maar ik werk vooral uit praktisch oogpunt dat je klant ineens komt met versie x.y.z van browser Q die je oplossing niet pakt waarna t van uitzonderingen aan elkaar hangt.

[ Voor 81% gewijzigd door Cartman! op 12-08-2011 11:05 ]

[Verwijderd]

BtM909 schreef op vrijdag 12 augustus 2011 @ 09:19:
Sterker nog, door jouw oplossing kan je gewoon alleen de linkerafbeelding afsnijden en positioneren bovenop de rechterafbeelding.

Het voordeel is dat deze code ook op andere plaatsen weer her te gebruiken is.

Ik snap je simpelere oplossing maar dat is nu zo arsch van veel ontwikkelaars... net even NIET afmaken

Heeft deze ontwikkelaar dus wel gedaan

[Cartman!]

Verwijderd schreef op vrijdag 12 augustus 2011 @ 11:37:
[...]
Ik snap je simpelere oplossing maar dat is nu zo arsch van veel ontwikkelaars... net even NIET afmaken

Heeft deze ontwikkelaar dus wel gedaan

Is dat nu aan mij gericht? Het is n beetje onduidelijk wat je nu precies bedoelt.

[Verwijderd]

Cartman! schreef op vrijdag 12 augustus 2011 @ 11:41:
[...]

Is dat nu aan mij gericht? Het is n beetje onduidelijk wat je nu precies bedoelt.

Jij hebt het WEL afgemaakt juist! Vind de bovenstaande reactie wat "makkelijk", als het maar werkt!

Verder hoop ik wel dat je een Ar.... hebt

[Cartman!]

Verwijderd schreef op vrijdag 12 augustus 2011 @ 11:45:
[...]
Jij hebt het WEL afgemaakt juist! Vind de bovenstaande reactie wat "makkelijk", als het maar werkt!

Ah, zo, dank..

Verder hoop ik wel dat je een Ar.... hebt

Ik ben wel bezig vandaag...wat bedoel je met Ar?

[Verwijderd]

Cartman! schreef op vrijdag 12 augustus 2011 @ 12:00:
[...]

Ah, zo, dank..

Zouden er meer van moeten zijn mijn inziens

[...]

Ik ben wel bezig vandaag...wat bedoel je met Ar?

...sch

[phex]

Slim gedaan Cartman. Ik zie hier nog wel meer mogelijkheden in.

Zolang Css3 nog niet volledig ondersteund wordt door alle browsers is dit best mooi