kaxigt.com

Med CSS3 så öppnar sig en helt ny arena med visuella effekter.

Tyvärr så har äldre Internet Explorer 5.5 – 7 inte samma stöd för CSS3 men jag tänker i alla fall tipsa om hur man snyggast och enklast kan skapa CSS3 text shadow på IE. Genom att använda IE:s eget filter kan vi få samma, om än liknande, effekt som text shadow på fonten, men det fungerar bara på IE8. IE 10 och senare har stöd för CSS3.

Robert Nyman tipsar dock om andra mer avancerade metoder av filter:dropshadow respektive filter:shadow för Internet Explorer IE 5.5 – 7.

Genom att lägga in filter:shadow i en class med .shadow som selektor kan vi implementera effekten även på IE 5.5 – 7.

.shadow {
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Det finns enklare sätt att skapa texteffekter om du inte så noga med att IE 5.5 – 7 inte har stöd av dessa. Valet är ju annars att inte ha några alls.

Efter att typografiskt ha testat lite med olika fonter, storlekar och färger, och på dessa lagt in två filter som här kan vara aktuella kom jag fram till följande resultat, och jag bör här tillägga att testerna är gjorda i PC och MSIE. För text shadow lämpar sig filter:dropshadow bäst – inte filter:glow som så många skriver.

Anledningen är att filter:glow pixelerar många typsnitt. I samtliga fall blir effekten bäst och snyggast på liten font, det vill säga i brödtext med 11-13px eller mostvarande i em, pt.

Om storleken på typsnittet blir större än 14-15px tenderar ”skuggan” att bryta ned pixlarna på fonten så den blir kantig och ful, i synnerhet med filter:glow, och det spelar ingen roll vilken färg du använder på skuggan.

Filter:glow lägger sig som en ”ram” runt hela fonten och om det finns hål i denna, som exempelvis a, b och d, så får du en glödande effekt även i hålen eftersom man inte anger riktningen i vare sig x eller y-axeln. Det innebär att fontens utseende förändras beroende på typsnitt och storlek för att kantpixlarna accentueras.

Filter:glow som text shadow

filter: glow(color=#ffffff,strength=3);

Du anger color för färgen på skuggeffekten – inte textfärgen. Strength anger hur stor effekt du vill att färgen ska glöda. du kan välja mellan 1 – 255. Vanligast är just 3 men ju högre värden du väljer, desto längre ut från fonten sträcker sig skuggeffekten.

Observera att man inte förkortar värdet på färgen, är det en svart skugga ni vill ha så anges detta med samtliga siffror: #000000.

Filter:dropshadow som text shadow

filter: dropshadow(color=#ffff00,offX=1,offY=1, positive=1);

Color anger färgen på skuggeffekten – inte textfärgen. offX anger storleken på pixlarnas skugga i x-axis, det vill säga horisontellt. offY anger storleken på pixlarnas skugga i y-axis, det vill säga vertikalt.

Positivt värde ger en drop shadow för icke-transparenta pixlar, false eller nollvärden skapar skugga för transparenta pixlar på visuella objekt. Det går utmärkt att ta bort denna del av koden. Skuggan blir solid så värdet offX=1,offY=1 är snyggast.

Observera att man inte förkortar värdet på färgen, är det en svart skugga ni vill ha så anges detta med samtliga siffror: #000000.

filter: dropshadow(color=#ffff00,offX=1,offY=1);

Filter:shadow som text shadow

filter: shadow(color=#00cc66, direction=45);

Color anger färgen på skuggeffekten – inte textfärgen. Directional anger skuggan i 45 graders vinkel. Du kan välja mellan 0 and 315 grader där 0 är riktad mot toppen, 45 = top right, 90 = right och så vidare.

Värden som är större än 360 grader, eller negativa värden, kommer att täcka dess likvärdiga vinkel. Värdet anges och ökar medsols. Detta filter ger ingen solid skugga utan är mer ”soft”.

Fonter

Bortsett från att effekten filter:drop shadow i mitt tycker blir snyggast på mindre fontstorlekar så blir effekten även mest lik CSS3 text-shadow om man anger värdet 1.

Jag testade följande fonter upp till storlek 24px och 3em: Arial, Verdana, Times, Century, Georgia och Garamond, plus lite nya typsnitt.

Snyggast effekt där fonten inte berördes negativt var med Verdana från .75 em till .90em eller motsvarande storlek i px. Typsnittet Arial behöver bli större för läsbarheten, 12-13px eller 0.8-1em, men då äter skuggan upp kantpixlarna.

Till rubriker rekommenderar jag ingen skuggning alls!

Summa summarum

Vill ni använda CSS3 text shadow på den löpande texten anger ni följande i er stilmall (ljus bakgrund):

p {color:#000; text-shadow:1px 1px 1px #ffffff; filter: dropshadow(color=#ffffff,offX=1,offY=1);}

Lycka till!