CSS3 in All Browsers – Rounded Corners, Drop Shadows, Glows and Gradients

CSS3 supports a bunch of nice new CSS features, including rounded corners, drop shadows, glows, and gradients. However, different CSS vendors will use different prefixes to standard CSS3 features while still in an ‘experimental’ stage. This means you need multiple lines to accomplish the one CSS feature, to target all the different browsers. Below is a bunch of CSS that will give you these CSS features in as many browsers as possible (yes, including older versions of IE).

CSS Vendor Prefixes

A standard CSS3 feature looks like this in CSS.

box-shadow: 5px 5px 5px black;

If you are only support the latest versions of each browser, thats all you will need. However, if you want to support older versions, you need to use the experimental prefixes. This is how a prefixed CSS3 feature looks for Firefox

-mox-box-shadow: 5px 5px 5px black;

Here are all the prefixes for the different browsers.

• Firefox: -mox-
• Safari and Chrome: -webkit-
• Internet Explorer 8: -ms-
• Internet Explorer 5.5-7: no prefix

If you aren’t going to support one of these browsers, just remove the lines from your CSS. Note, since Safari and Chrome both use the Webkit engine to render pages, you can target both browsers with a single line.

CSS3 Features

Drop Shadows

Drop shadows, called a ‘box-shadow’ in CSS, allow you to put a shadow on a specific element.

Full support: FF, Safari, Chrome, Opera, IE5.5 and up

.drop-shadow {
  /* offset left, top, thickness, color with alpha */
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  /* IE */
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
  /* slightly different syntax for IE8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}

Outer Glow

.outer-glow {
  -webkit-box-shadow: 0 0 10px rgba(50, 50, 50, 0.8);
  -moz-box-shadow: 0 0 10px rgba(50, 50, 50, 0.8);
  box-shadow: 0 0 10px rgba(50, 50, 50, 0.5);
  filter:progid:DXImageTransform.Microsoft.glow(Strength=5, Color='gray');
  -ms-filter:"progid:DXImageTransform.Microsoft.glow(Strength=3, Color='gray')";
}

Gradient

.gradient {
	background-image: -moz-linear-gradient(top, #641d1c, #f00);
	/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
	/* Safari 4+, Chrome 1-9 */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#641d1c), to(#f00));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000)";
}

Rounded Corners

Unfortunately, no love before IE9 for rounded corners. There are a few non-CSS techniques that I will cover in a later blog post.

.rounded-corners {
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
}

<!–border-radius before ie 9 (which supports it)

CSS performance: UI with fewer images

https://fetchak.com/ie-css3/

Curved corner (border-radius) cross browser

https://css3pie.com/–>

• css