Skip to content

Stataywhit's Blog

Just another WordPress.com site

CSS3 tags for review today include: border-radius, box shadow, text shadow, RGBA colors, multiple backgrounds, opacity, mulit-column layouts, transitions, and 2d transformations.

The definitions are as follows (brought to you by css3.info:

1. border-radius:”The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.”

this info came from css-class.com and is really neat to see what you can do with border-radius. This may have some to do with the 2d transformations as well.

I’ve used border-radius before. It seems a little difficult at first, but when you get the hang of what means what (as all things in coding) it is okay to handle for a newbie like me.

2. box shadow: “The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).”

The box shadow is something I am oober excited about. I don’t know if I will be using it in my portfolio site, but will be using in other sites that I’ll be working on in the future. A big enhancement in the web visually is allowing things to have depth on the screen. Presenting depth one can achieve a real look for users.

3. text shadow: “CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow…Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!”

I am not really a fan of text shadow even in my own print design. However, the effects you can achieve using text shadow could be the “flame” effect, which does seem pretty neat, but a little unnecessary. To see this go to css.info

4.RGBA colors: “CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this
property-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity value for a color. This one could
make life for webdevelopers a lot easier…
So far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-alpha’s.”

This seems like a pretty handle tool. I may use it in my design for hovers, if it is used that way at all.

5.Multiple backgrounds: “CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.
Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.”

I may have a couple instances where this will aid me. I wonder if It will eliminate the faux-column that I have become so accustomed to use. We will have to see. It’s a great tool that I probably will use on my site.

6.opacity: This, from what I gathered will be a lot like RGBA colors.

7.multiple-column layouts: “W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layout is actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.
Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. ”
I will definitely be using this on all of my pages. The floats that I use are getting old! They are pretty easy, but maybe this will allow for more ease.

8.transitions: these are just the best thing that happened to css! I am going to use this to subtly change my linked pictures to add titles and a transparent color over them. This will be quite fun to try. There are tons of ways to use this, and I will have to do more research in order to grasp and talk about them.

9/ 2d transformations: this is extreme! With 2d transformations you can do things that you never thought (or I thought) possible with CSS. but, you can move things like you would or that I’ve seen on flash pages. It’s rather neat. The link css-class.com will lead you to this.

Advertisements

%d bloggers like this: