By Cesar Olivas
CSS has been around for some time now, since 1996, and it completely changed the way people used to make websites, for good. First came CSS1, with some support for fonts, color text, backgrounds, spacing between words, alignment, margins, paddings and some other attributes; it looked really good for its time.
Then same CSS level 2 in 1998, which introduced some powerful features like positioning, z-index, media types. Then came the revision we use right now, CSS level 2 revision 1(CSS2.1) which fixed some errors in CSS2 and removed some unsupported features.
But the web is evolving, turning into a more interactive, user-centered design; the technologies were bound to evolve. Web 2.0 has been here for some time, and the need for CSS to evolve was becoming necessary.
Right now, CSS3 is under development, and packs some impressive cool new features that will make easier to make web2.0 content; meaning less work, less code, more content.
Below I’m going to introduce the top 5 coolest features in CSS3, which work for Firefox and Safari.
1. Border Radius – This is one of the coolest (if not the coolest) features in css3. Web 2.0 is all about rounded corners, but creating them requires some time and effort slicing images, making the CSS and the markup. With this function, it will just take about 10 seconds to create rounded corners.
-moz-border-radius-topleft/ -webkit-border-top-left-radius
-moz-border-radius-topright/ -webkit-border-top-right-radius
-moz-border-radius-bottomleft/ -webkit-border-bottom-left-radius
-moz-border-radius-bottomright/ -webkit-border-bottom-right-radius
This would be the result:
2. @font-face – This feature is also incredible, though it is not exactly new, since it was proposed for CSS2 and implemented for some time, with some limitations. Until now, if we want to use some nice cool font, we would have to create an image of the text using the font then use it, but all that is going to change. As of this moment, this function works great with Safari 3.1 +. This function consists of 2 parts, declare the font, and then use it.
The declaration would be
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
Then Call it using
h3 { font-family: Delicious, sans-serif; }
3. Box-Shadow–This feature works right now only in Safari 3+ and FF.
This will put a shadow to any box. This has a lot of potential, since it can
be used in combination with rounded corners and gradients.
box-shadow: 10px 10px 5px #888;
padding: 5px 5px5px 15px;
This would be the result:
4. Multi-Column – Columns has been an issue since forever, and with CSS2.1 we can deal
with them in an efficient way. Newspapers; for example; had to work a little more to make their
columns look great. Fortunately, a full module is being developed to help us with this.
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
This would be the result:
5. Text-Shadow- Sometimes you only want a simple shadow in some text, what do you do?
You have to go to Photoshop, create the text with the shadow, and then bring the image
to the web. That’s kind of tedious. CSS3 finally realized this, and text-shadow was born.
Now you can just say: text-shadow: 2px 2px2px #000;
This will create a text with a shadow 2px to the right and down with 2px blur and
color black.
This would be the result:
These are just my top5 features packed in CSS3, but there are plenty more, and more will
be developed till the release. I hope the browsers can keep up with the technology and
finally we can all live happily ever after, with CSS3 and minor problems between browsers.
I know I’m asking too much, but when that day comes, it WILL be the happiest
day of my life, and the life of many.