Crossbrowser CSS drop shadow

Mark — Wed, 28 Apr 2010 08:39:30 +0000

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+

CSS

.shadow {
  -moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */
  -webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */
  box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */
  /* Voor IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  /* Voor IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Nartuurlijk zal je de ms-filter & filter via conditional comments laden?

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS opacity voor IE6-7 & IE8

Mark — Wed, 20 May 2009 11:15:15 +0000

Opacity is het semi-transparent kleuren van elementen, (dus geen solide kleur) en wordt tegenwoordig door eigenlijk alle browsers ondersteund.
Alhoewel elke op een andere manier van implementeren.

Internet Explorer 6 & 7

CSS

foo {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

foo {
filter: alpha(opacity=80);
}

Internet Explorer 8

foo {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Meer info

Meer info over opacity voor ander browser kan je in deze CSS Snippet vinden.