CSS3

While CSS3 is not an official standard yet the most recent versions of the modern browsers (IE, Safari, Chrome, FireFox) all support it to some extent and there is are many compelling reasons to use CSS3. These techniques shown here can save a lot of Photoshop time. If you use them now you will have to get out of the mindset that the page must look exactly the same in all browsers. It’s just too difficult to do.

Instead work fromt he mindset that it will look best in the latest browsers and still look good in older ones. What follows is not everything you can do in CSS3 but rather some basics that are currently working. The big pain with CSS3 currently is that many browsers have implemented some of the properties using proprietary property names. So you basically have to say the same thing a few different times to make sure it works across browsers.

Here are the properties we will try out:

Border-Radius

Box-Shadow (in progress)

Text-Shadow (in progress)

RGBA background color (in progress)

Interactive Examples

Perhaps even better than the tutorials is to just try these out directly on your own. For the links below to work you will need to use one of these browsers:

IE9, FF3.6+, Safari 4, Chrome

If you’re using an earlier version of the browsers some things may work and some may not.

Border-Radius.com

This site is very simple. You just enter in the border radius you want and it shows the CSS for it that you can copy and paste into your stylesheet. You can specify different numbers for each corner but it starts out changing all four values if you change one.

CSS3Please.com

This site allows you to modify a number of CSS3 properties: border-radius, box-shadow, rgba, transform, transition, text-shadow.

As you modify one of the values it updates both the CSS3 needed to get the value across browsers and also an element that shows you the results. In addition to the CSS3 ready browsers this site also has some properties for IE7 andIE8 as well. In the comments for the styles it shows which styles apply to which browsers.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>