Introduction to CSS3

An article by Maddy    No Comments

CSS (aka. Cascading Style Sheets) is a style sheet language which most use to style web pages written in HTML and other popular languages. CSS is primarily created to enable the separation of document content from document presentation, including all style elements like layout dimensions and look, colors and fonts.

Today, most websites on the internet uses this style sheet language to design their sites. And today, we are all work on older CSS level 2 revision 1 (CSS 2.1) engine of this great markup language. I would be happy to announce you that CSS level 3 (CSS 3) is under development at this moment.

It is more advanced, faster and supports way more features than ever before! Today’s most popular browsers supports CSS3 language. So, let’s find out what is new with CSS3!

New Border Functions

One of the many new features and functions of new CSS3, that I like the most is the new border functions! Besides the old-known functions like coloring, you can now simply code gradient color borders. This function looks very good and work only on Firefox for now.

Additionally you can set an image as a border. With this feature you can define an image to be used instead of the normal border of an element.

Other very useful function is a border-radius function which allows you to create round corners in code, not using the images for it like it was case in CSS 2.1 version.

And yes, you can now implement shadows on these boxes. Directly from the code, no need to use any additional image elements.

Background Functions

One of the most interesting functions in this new CSS version is an option that allows you to setup multiple backgrounds on one element! To do this, you can easily separate backgrounds by commas. This can be a very useful function for most websites – it’s much cleaner, faster and productive!

Other very useful new function to backgrounds is a function where you can specify the size in pixels, width and height, or in percentages of your background. For me, it works only on the latest Google Chrome version, it should looks like:

New Color Functions

Color functions are one of the strongest functions of CSS 3. Now, you can use the following color codes and combinations to show colors directly through new engine:

• RGBA Colors
• HSL Colors
• HSLA Colors

Another very powerful function is opacity ! It’s probably also the one developers have been waiting for the most to be implemented!

Text Effects

There are some very good text effects included in the new CSS version. CSS has finally included this function and now you can do so much more with text and effects:

One very useful feature of the new CSS version is the text-shadow feature. Now, you can easily add shadow to your text using some simple code.

Another very useful and functional text feature is the text-warp function. It allows long words to be able to be broken and wrap onto the next line. Very good and useful I have to say!

Other Useful Functions

There are some other very useful functions that can be done with CSS 3 version. I would list only couple of these functions below:

• CSS Animations – Yes, CSS3 now fully supports CSS animation effects. For example, you could create one loading spinner without any images! Cool, really cool!
• Multi-column support – Multi-column layout is actually a module on its own. It allows a web developer to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns.
• Web Fonts – Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format.
• CSS3 Speech Module – The CSS 3 Speech module removes some of the old properties and adds new ones. All of them are now assigned to the speech media type.

Of course, there are more other functions and improvements in the new CSS 3 engine. It would be very interesting how things are going in the future! Definitely, we are coming to another era on the internet, where we could do more things using fewer resources!

Looking forward to hear what do you think about CSS3 and HTML 5.0 technologies! Feel free to post your comment using a comment field below!