Tag Archives: dropshadow

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

Using CSS3 to style forms written in HTML5

Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.

When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.

The result: impossible to see the result on one browser only: the rounded corners can be seen on Mozilla/Chrome/Safari and the HTML5 elements on Opera.

Internet Explorer? Better don’t ask. No support whatsoever.

So the results:

  1. Mozilla 3: rounded corners + / HTML 5 elements
    capture-2
  2. Chrome: rounded corners + (they look weird) / HTML 5 elements –
    chrome-screenshot
  3. Safari: rounded corners + / HTML 5 elements –
    capture-3
  4. Opera 9: rounded corners – / HTML 5 elements +
    capture-1
  5. IE (doesn’t matter which one): rounded corners – / HTML 5 elements –
    ie8-screenshot

It seems we have to wait a little longer till we can drop Javascript from styling the forms  🙁

UPDATE

Ric Ferrer sent us a screenshot with the behavior of Mobile Safari from his Ipod. Thank you 🙂

37555934

Check the Spanish version of this post:
Usando CSS3 para dar estilo a formularios escritos en HTML5