The Interesting New World of CSS3

CSS3 is fun. Make no bones about it. I’ve giggled, laughed, and exclaimed, “Oh wow!,” as I play with new properties and selectors. It’s like being child who just received a new Lego set. Truly, that’s what CSS3 is for web designers.

However, To encapsulate the entirety of it in a single blog post would be a monumental task, so I’m just going to touch on what I feel are the most useful new properties, and detail three of them.

The first two properties I’d like to mention are border-radius and box-shadow – which work in the latest versions of Firefox, Chrome, Safari, Opera, and even Internet Explorer. The first of these Adobe-eat-your-heart-out gemstones allows you to add rounded corners to an element. Just say border-radius: and add a value. The second property, box-shadow, allows you to add a drop shadow to any block-level element like so:
box-shadow: 8px 8px 8px #888888;
The syntax is box-shadow: h-shadow v-shadow blur spread color inset;.

Next, I’d like to discuss more in depth the RGBA color, gradient, and text-shadow properties.

RGBA color allows you to add opacity (in addition to color) to an element. It is more useful than the latter because with opacity all descendant tags of the selector inherit it, which can be a real nuisance. Here’s an example of how RGBA color works:
background-color: rgba(87, 96, 140, .75);
The first three values are the red, green, blue values, and the third is the alpha transparency value (which goes from 0 to 1). In this case, a value of .75 means the element’s background will be 75% opaque. This property, while useful, does not work in Firefox 2, Opera 9, and Internet Explorer 8 (nor earlier versions of all three, obviously), though, amazingly, it actually works in IE 9. (Let’s have a party!) Anyhow, to avoid having no background color displayed in the aforementioned browsers which do not understand RGBA, do the following:

  1. Add a background-color rgb declaration before the rgba declaration, like so:
    background-color: rgb(87, 96, 140);
    This will work for all browsers except IE 6 and 7, which get confused, give up, and simply display nothing at all. So,
  2. Add a separate IE only style using conditional comments like so: 
    <!--[if IE]>
    <style type="text/css">
    .element {
    background-color: transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#665C9B8D,endColorstr=#665C9B8D);
    zoom:1;
    </style>
    <!--[endif]-->
    }

    I know, it’s ridiculous, and I’m not even going to explain it. Just do it. You do need to know two things, however: 1). The first two values in the hexadecimal-ish color codes are the transparency values, where 00 is invisible and FF is totally opaque, and 2). Make both of these hexadecimal-ish color codes match (unless you want a gradient). Then, you will have your alpha transparency in IE.
    *Shivers* Phew! Ok, I’m done with that now.

Next, CSS3 gradients allow you to apply a gradient as a background-image. To generate this, I recommend you visit gradients.glrzad.com/ and let it generate the code for you. It’s going to look something like this:
.element {
background-image: linear-gradient(bottom, rgb(186,175,227) 11%, rgb(224,210,255) 56%);
background-image: -o-linear-gradient(bottom, rgb(186,175,227) 11%, rgb(224,210,255) 56%);
background-image: -moz-linear-gradient(bottom, rgb(186,175,227) 11%, rgb(224,210,255) 56%);
background-image: -webkit-linear-gradient(bottom, rgb(186,175,227) 11%, rgb(224,210,255) 56%);
background-image: -ms-linear-gradient(bottom, rgb(186,175,227) 11%, rgb(224,210,255) 56%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.11, rgb(186,175,227)),
color-stop(0.56, rgb(224,210,255))
);
}

Cool, eh? I love this property because I think it’s fun to program graphics. Plus, you no longer have to cut and import an image from a graphics program. Be aware, however, that this property won’t work in browsers earlier than Safari 4, Chrome 1, Firefox 3.6, and Opera 11.10, so for that you will have to go back to your Photoshop, or Fireworks, or Gimp. Perhaps I spoke too soon. Moreover, for IE (all versions I believe) you have to use this:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

The first value is the beginning of the gradient and the second value is its end. Bear in mind that this only works if you don’t need a background image as a fallback (because the background-image property will override the filter property). So, perhaps I spoke too soon on the gradient declaration…for now. It will become mainstream soon enough, though, so keep it in mind!

The last new CSS3 awesomeness I want to discuss is the text-shadow property. This fancy newbie in yet another way challenges Adobe’s corner on the web design market. It allows you to add a shadow to any text, like so:
text-shadow: 2px 2px #ff0000;
The syntax is: text-shadow: horizontal-shadow vertical-shadow blur color;.
Unfortunately, this does not work in Firefox 3 or before, nor in IE at all. Therefore, one thing to avoid is creating white text that is apparent only because it is defined by a text-shadow. Don’t do that, yet. Otherwise, know you can add as many text shadows as you want, such as:
text-shadow: 2px 2px #ff0000, 1px -1px 2px #111;
While, like CSS3 gradients, text-shadows is not accepted by all, it will one day be the standard, and sooner rather than later. So get on it!

In conclusion, I hope you’ve learned as much from reading this article as I have from writing it. CSS3 is being developed in modules, and vendors are free to accept these new rules as they are standardized. While this article has only scratched the surface of what’s possible with this new version of presentational code, it will revolutionize the ways graphics are created for the web. Enjoy!

Advertisements

About NickAndrea19

My goal has always been and continues to be the liberation of minds, my own and what influence I may have on others, to perceive the extraordinary beauty all around us. To this end, I write, play music, and design websites. Don't hesitate to contact me for more information about any of these activities. :)
This entry was posted in Tech. Bookmark the permalink.

One Response to The Interesting New World of CSS3

  1. Good thoughts Nick, you don’t have to post this comment but I should tell you that http://www.modernizr.com/ is a much more effective way to accomplish the goal you’re after here. After calling the javascript in the head of your document, Modernizr will actually give you this:

    [body class=”ie6″] // [body class=”ie7″]

    which makes it MUCH easier to write clean code like this (conditional comments should be avoided since it forces you to write your CSS inline within your document ):

    .my_gradeint_bg {
    background-image: linear-gradient(bottom, rgb(186,175,227) 11%, rgb(224,210,255) 56%);
    }

    .ie6 .my_gradeint_bg, .ie7 .my_gradeint_bg {
    background: #000 /*non-gradient bg color*/;
    background-image: url(‘../my_fallback_bg_img.png’) top left repeat-x /*non-gradient bg color*/;
    }

    Also, for nitpicks and discrepancies among newer browsers, you should use this boilerplate addon: http://rog.ie/post/9089341529/html5boilerplatejs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s