Tag Archives: shadow

A fancy box with rounded corners and drop shadow with CSS3 only. Really?

I have to admit that when I like the design of a website I check its CSS and HTML to see the code hoping to learn something new. I’m horrible at design and I cannot make a box even if I have it in front of me for 24 hours non stop but I love all kinds of tricks to make the content more appealing: rounded boxes, sexy quote marks, bubbles, everything.

What is really weird is that all these fancy design elements are usually cut as images and put as background-image for some DIV while the vast majority of them can be recreated with CSS. I admit, not all of them are simple but some do and today I’ll show you my latest experiment. I love a certain kind of box and I’m trying to make it using CSS3 only. After a little prayer to the CSS3 God let’s start.

If you’re not a patient person skip all this and go directly to the test page.
Continue reading

Crossbrowser CSS dropshadows

Very simple problem with a pretty complicated solution, mostly because IE is ignoring the box-shadow CSS3 property. Instead progid:DXImageTransform.Microsoft.Shadow is doing the trick for it and an equivalent can be found.

box-shadow: 4px 4px 8px #000;

for the white shadow is visually-similar to

progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8)

because box-shadow has the parameters:

horizontal-offset, vertical-offset, blur-radius, color

and progid:DXImageTransform.Microsoft.Shadow:

color, 
direction (90 for right bottom, it can also be 0, 45, 135, 180, 225, 270 and 315 )
strength (the distance, in pixels, that a filter effect extends - more like the combination of 4px 4px in the box-shadow)

What it doesn’t have is the blur-radius. Altough progid:DXImageTransform.Microsoft.Blur exist, it will blur the content of the box too, making the text unreadable.

The result is quite similar, with some small differences in how IE displays the corners. As you can see the top-right corner and the bottom-right corner are a mess (the bottom-left doesn’t feel very well either), but let’s be grateful they exist…

crossbrowser dropshadows in mozilla and internet explorer

You can check the demo link if you want to play with other browsers.
The complete CSS code for all browsers is:

.black-shadow { 
-moz-box-shadow: 4px 4px 8px #000;
-webkit-box-shadow: 4px 4px 8px #000;
box-shadow: 4px 4px 8px #000;
 
filter: progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=90,strength=8)
        progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=180,strength=8)
}

Check the Spanish version of this post:
Sombras CSS en múltiples navegadores