css3u2

5 Things I Love About CSS3

This picture was made by Photoshop; however, you can’t find this picture by using a search engine because search engines are not able to distinguish text from a picture. Due to the size of the picture, users with low internet speeds also have to wait a long time for it to load when browsing. So is there a new method to solve these problems?

The answer is yes. HTML5 and CSS3 could solve these problems; what’s more, they could do it better than you imagine. As a designer, it is necessary to understand what they are, and what they can do for you.

HTML and CSS are easy to understand. HTML is the predominant markup language for web pages. We could convey the message of web page layout, content, presentational effects, and so on, through HTML. CSS is a stylesheet language used to control the presentation of a web page. So here comes the question: why should we use CSS? Doesn’t HTML fulfil the same function as CSS? To answer these questions, let me show you an example:

You might have realized that if there is too much content on a topic, we have to repeat ourselves over and over to describe the topic clearly? So does the web language. In the case of clutter and mess, if we migrate the presentational parts of our web language from HTML to CSS, we are not only able to guarantee the clarity of the main part of the web language, but also reuse various styles with convenience.

HTML5 and CSS3 are the latest versions in their series. In my last article, I showed you five things that I love about HTML5. Now I am going to present you with five things that I get excited by about CSS3.

1. RGBA

Tied in with opacity (that only allows setting values for an element and its subelement), RGBA is one of the useful new features of the CSS3 specification. RGBA stands for Red Green Blue Alpha, and allows color and transparency settings for each element. It can be used to create a semi-transparent background for an HTML element. The RGBA declaration allows you to set the transparency value (via the Alpha channel) for a single declaration. So, it can reduce a lot of code by adding that extra property into an existing element. For example:

background-color: rgba(0,0,255,0.5)

The background color has been set to blue, and the Alpha value set to half. The text inside the div does not inherit the opacity value as it acts solely on the background-color declaration—the text does not reveal the yellow div behind it.

Therefore, we can say that RGBA could make life for web developers a lot easier. But so far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-Alphas.

2. Multicolumn Layout

Since every web page today is divided into columns or boxes, adjusting these boxes so that they display correctly in different browsers takes a toll on web designers. Now, CSS3 solves this problem with the Multicolumn Layout feature that helps us create columns quickly and easily. It is another CSS3 feature that many developers including myself are interested in.

Multicolumn Layout offers a new way to arrange text in a newspaper format. You can let text fit into columns in two ways: by defining a width for each column, or by defining the number of columns. The first would be done using column-width, the latter using column-count. To create a space between the columns, you would specify a width for column-gap. You could also define column-rule to effectively draw a border down the middle of the column-gap.

However, the Multicolumn Layout is currently only supported in Mozilla-based browsers and Safari 3, which have prefixed the properties with -moz- and -webkit-, respectively. For example:

-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;

3. Rounded Corners

CSS3 border-radius property is one of the most practical new features of CSS3. It allows web developers to easily utilize rounded corners in their design elements without the need for corner images, or multiple div tags. With CSS3 Border Radius, you can add rounded corners to an HTML5 element with a few lines of code. Also, you can define the size of the rounded corner, and determine which corners are rounded or which ones are not.

The following diagram gives a few examples of how corners might appear given differing radii:

The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

4. @font-face

The @font-face property was already part of the CSS2 specifications, but now, with the development of the CSS3, its browser support has started to improve. For this reason, @font-face is considered by many as a new CSS3 property.

@font-face facilitates embedding a custom font in a web page. If users haven’t installed the font to be displayed on the web page, @font-face will help by downloading the font for them automatically. It encourages developers to fully demonstrate their talent, regardless of user font installation problem.

By using the @font-face property, you can include the font from a remote location, and then can use it.

@font-face {
  src: url("myfont.ttf");
  font-family: "myfont_bold";
}

@font-face is really a helpful CSS feature in regional websites, where it provides support to various region-specific fonts, such as Japanese, Devanagari, and so on.

5. Border Image

Sometimes, regular CSS border properties are not enough, so if you want to use images for borders, the CSS3 border-image property will help you out—allowing developers and designers to take their sites to the next level.

With this feature, you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.border-image currently works in Safari and Firefox 3.1 (Alpha). The syntax to use is:

border-image: url(border.png) 27 27 27 27 round round;

Or:

border-image: url(border.png) 27 27 27 27 stretch stretch;

Conclusion

CSS3 brings us a lot of convenience. We can achieve effects that were previously only possible with plugins, using the element itself instead of mostly pictures. The web page download time will also be faster. Therefore, the old content of pictures could be searched by search engines.

Although the HTML5 and CSS3 standards haven’t been officially established, and the support by browsers varies, the day they are unified will eventually come.

Related Posts


4 thoughts on “5 Things I Love About CSS3

  1. Sid Lemos

    Great article and right to the point. I am not sure if this is in fact the best place to ask but do you folks have any thoughts on where to employ some professional writers? Thanks in advance 🙂

    Reply
  2. Cedric Bartlette

    I just want to mention I’m all new to blogging and site-building and honestly savored you’re website. Very likely I’m likely to bookmark your website . You really come with incredible posts. Thanks a lot for sharing your web site.

    Reply
  3. msn show

    Sorry for the huge review, but I’m really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if it’s the right choice for you.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*