Drop shadow – ofwel de illusie dat iets zweeft en diepte heeft – wordt al jarenlang met afbeeldingen gedaan, ofwel met nuffige semi-CSS oplossingen.
CSS3 is nog niet voor elke browser 100%, maar drop shadow is één van de zaken die we nu reeds kunnen doen en het werkt in:
- Firefox 3.5+
- Safari 3+
- Google Chrome
- Opera 10.50
- Internet Explorer 5.5+
Om hoofdpijn van te krijgen, change() function werkt blijkbaar niet in Internet Explorer 8 & 7, dus waarschijnlijk ook niet niet in Internet Explorer 6. Maar de oplossing is vrij eenvoudig;
Met bind() 2 functions meegeven, click() voor IE en change() voor de anderen:
Het is altijd weer het wiel opnieuw uitvinden, een eenvoudige manier om via een klik op een element een ander element te tonen of te verbergen.
Dit is ideaal voor headers, kopregels en titels en zo. Wat we eigenlijk gaan doen is 2 regels tekst met CSS zo positioneren dat ze elkaar overlappen, uiteindelijk zal het eruit zien als een afbeelding.
Meestal als je afbeeldingen, of verschillende blokken langs elkaar float, bijvoorbeeld 5 langseen, en je weet niet op voorhand hoeveel items er zullen zijn, zit je altijd met het probleem van margin aan de rechter kant (als je op deze manier spatie wilt verzekeren tussen je blokken). Nu kan de laatste margin-right je laatste blok naar de volgende lijn schuiven omwille van de extra ruimte die nodig is.
Je kan dit met Jquery oplossen.