Dropshadow in alle browsers

Auteur: Jeroen van der Meer. Gepost op:20-mei-2011 13:45

Een leuk schaduwrandje maakt een website wel af, als de rest van het design al snor is.

lees meerOok een afzichtelijk techneutendesign voor hello world kan er door opleven. Nu wil ik dat natuurlijk graag eenvoudig en crossbrowser realiseren. Dat hebben anderen gelukkig allang uitgezocht. Het volgende werkt bijvoorbeeld heel goed op heel veel browsers:

-moz-box-shadow: 3px 3px 6px #000;
-webkit-box-shadow: 3px 3px 6px #000;
box-shadow: 3px 3px 6px #000;
/* voor IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=140, Color='#000000' ,Positive='false') ";
/* voor IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=140, Color='#000000',Positive='false');

Schaduw links

Dit geeft echter een schaduw aan de rechter- en onderkant. Soms is het design gemaakt met de zon aan de andere kant. Dus er staan al designelementen op met een schaduw links en onder.

Dan pas je gewoon de Direction aan en de pixels en... klaar. Klopt je schaduw, staat goed.

MAAR dan ga je verder met het proces en krijg je een testbevinding dat de cursor van het invulveld voor invullen van het aantal producten niet in het vakje staat, maar ernaast. Ik heb twee uur gezocht met Firebug naar padding, margins en verzin het maar. Uiteindelijk heb ik de halveermethode toegepast. Deze methode heb ik zelf bedacht als laatste redmiddel bij het zoeken naar bugs. (PING! ik zal hier binnekort ook een kort blogje over schrijven...) Ik was er dus achter dat het lag aan het regeltje:

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=210, Color='#000000',Positive='false');

Als je het uitzet mbv Firebug zie je ook je hele website een stukje verschuiven. Die verschuiving dringt alleen niet door tot de textbox-inhoud. De textbox zelf verschuift, maar de cursor blijft staan. Als je er dan mee schuift staat de cursor half over letters heen zoals je ook in het plaatje hieronder kunt zien.

Bug in Internet Explorer

Dit is een Internet Explorer bug waar ik nog niet omheen heb kunnen werken. Ik was gedwongen voor die browser de schaduw naar de andere kant te zetten.

Je kunt natuurlijk spartaans zelf gradiënten neerleggen op een stel div-elementen die je dan een gradiënt background image geeft. Maar dat is toch een heel stuk lastiger te realiseren dan de bovenstaande 5 regeltjes. Hieronder een paar voorbeeldjes waar je de bug zelf kunt naspelen

In IE9 is dit overigens geen probleem meer, die gebruikt het regeltje box-shadow: 3px 3px 6px #000;

Als iemand trouwens weet hoe je de cursor op zijn plek weet te krijgen, dan hoor ik dat graag.