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+
Je kan CSS via conditionele comments (zie eerdere Snippet) toevoegen, maar je kan in plaats van een extra CSS bestand, conditioneel een extra class toevoegen aan zoals in dit voorbeeld de body tag.
Tekst values op een submit button zou je willen verbergen als je de submit knop wilt vervangen door een afbeelding, met text-indent kan je voor alle browsers de tekst-valu verbergen, bij Internet Explorer 6 & 7 lukt dit niet, hiervoor is nu een oplossing:
Een achtergrond afbeelding, die altijd past, of het browser-venster nu groter of kleiner gemaakt wordt.
Ik was verbaasd te zien dat, zelfs zoveel jaren later, het probleem nog steeds bestaat voor Internet Explorer 6 – dus ik dacht dat ik deze snippet even tentoon stel.
Wees gewaarschuwd, als u werkt met Internet Explorer 6, de browser zal zeer waarschijnlijk crashen, waarbij al uw geopende vensters eveneens zullen ineenstorten, en mogelijk wordt daardoor uw systeem onstabiel. Ik zou adviseren u om uw werk opslaan.