Box-shadow ger problem med transparenta bilder

På bloggen har jag aktiverat en del CSS3-egenskaper, bland annat box-shadow och text-shadow, vilket ger bra effekter när de används rätt och subtilt.

Idag upptäckte jag något som kommer gäcka och irritera många när CSS3 blir mer allmänt använt. Box-shadow och transparenta bilder går inte ihop.

sok grafik Box shadow ger problem med transparenta bilder
Önskad effekt i exemplet ovan är att använda rundade hörn med en subtil skuggning runt. Men eftersom box-shadow enbart sätter skugga runt boxen och inte under så kommer den transparenta bilden tappa i effekt om den används.

Notera att padding är satt på 3px runt bilden i exemplet.

Exempel på hur du använder box-shadow

box-shadow: <horisontal offsett> <vertikal offsett> <blur> <färg>;

För att använda box-shadow redan nu så använd -moz-box-shadow samt -webkit-box-shadow.

Lösningen involverar mer CSS3

Hur man löser problemet är egentligen lika briljant som enkelt. Du använder ett annan CSS3 metod: border-radius.

På bilden i mitt exempel så sätter jag border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; för att följa mitt rundade hörn.

sok grafik efter Box shadow ger problem med transparenta bilder

Kommer följa upp denna bloggpost med mer ingående analys av både box-shadow och border-radius.

Skrivet 27 Oct, 20:10, i kategorierna Webbdesign, av som taggats med , , , ,
  • http://nemrod.se nemrod

    Det är knappast något problem med box-shadow och transparenta bilder, det är ju självklart att box-shadow lägger skuggan runt elementet det används på, och är inte det elementet runt blir givetvis inte skuggan rund, transparent bild eller inte. Lösningen är lika självklar som problemet, varför använda en transparent bild för rundade hörn över huvud taget? Såna work-arounds är ju det första man arbetar bort, innan man försöker göra det snyggare. Eller är det bara jag?

    • http://cynatic.org Andreas

      Workarounds av detta slaget kommer inte försvinna förens majoriteten stödjer css3, mitt problem som jag trodde jag gjorde en poäng över är att man kan använda css3 ändå – men med fallback för vissa lösningar. Exemplet vill jag ska ha rundade hörn. Bilder är där det snyggaste alternativet för webbläsare som inte stödjer border-radius, vill man där använda en skugga via css3 också så är en workaround på detta viset det enda som får det att se snyggt ut – förrutom att göra skuggan som bild också (vilket går emot hela min poäng med att pusha ut css3 här och där men inte så det bryter användarupplevelsen).