CSS3 text-shadow: mer än att bara skugga texten med

CSS
Postad: 04.09.2011 | CSS

Sedan CSS3 slog igenom med buller och bång använder många egenskapen text-shadow för att lägga en snygg skugga på texten, men det man inte tänker på är att text-shadow också ett ypperligt redskap för att snygga till pixliga typsnitt med.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

När vi kommer upp på rubriknivå blir inte alltid typsnittet så snyggt. Jag ser ofta rubriker där typsnittet är gråsvart och bakgrunden vit. Fonten spretar, inte sällan om den är kursiv, och ibland är den så pixlig att det knappt går att urskilja bokstäverna.

Har ni inte också sett det?

Detta är faktiskt lätt åtgärdat förutsatt att man inte vill använda text-shadow för att skugga texten. Anges samma färg på egenskapen text-shadow som bakgrundsfärgen så försvinner nämligen mycket av pixligheten på typsnittet.

Det skulle kunna se ut så här (koden är förenklad):

#selektor {bakground-color:#fff;}
h1, h2, h3 {color:#333; text-shadow:#fff 1px 1px 1px;}

Nu behöver ju inte bakgrunden vara just vit, försök bara att hitta en nyans som bäst överensstämmer med bakgrunden och ange denna som text-shadow och voilá! Typsnittet blir mjukare och mer lättläst – för att inte tala om att det blir snyggare :)

2 svar på “CSS3 text-shadow: mer än att bara skugga texten med ”

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.