Five examples of CSS3, a practical WEB development tutorial

CSS has always been an important part of the web design process for designers and developers. With the emergence of CSS3 and the increasing number of browsers, designers have more options.

Pure CSS can also be used to achieve a variety of cool effects, or even animations. Although some effects cannot be run across browsers (or even browsers that support CSS3), some of them are only for demonstration and have no practical purpose. However, it seems that these effects only implemented by CSS are not picky.

Here are five common effects implemented using CSS3. You can try it right away.

1. CSS3 button

You can create elements of different sizes and colors (such as buttons) instead of preparing a background image each time. ZURB has a detailed article on how to create the CSS3 button. If you are interested, go and have a look. The shadow effect made by using RGBA is really great!

2. CSS3 column chart

Ben Lister has selected a lot of practical CSS3 skills, including this pretty good 3D bar chart. With-webkit-transform or-moz-transform and the specified offset, you can use CSS to make the same impressive effect as the image.

3. CSS3 drop-down menu

Nick La of WebDesignerWall shows how to create a beautiful CSS3 pop-up drop-down menu, which shows the menus created using gradient images and CSS.

4. CSS3 reference bubbles

These pure CSS Reference bubbles created by Nicolas Gallagher look great, And You Can slightly modify them as blockquote elements on your web page.

You can go to the Gallagher demo page to check the effect. Pay special attention to the twitter bubble, which is better than the official twitter embedding method.

5. CSS3 album

Apple has just launched some pages that display HTML5 web page effects (HTML5 and CSS3 are often linked together ). Although the transition and 3D effects of the Polaroid-style album created using CSS3 cannot be run in all browsers, it is really a cool example of CSS3 transition effects.

To learn more about the CSS3 and HTML5 demos, click here (the reason is unknown ).

Mashable | translator programmer

Link: http://www.sky84.cn/index.php/article_content_id,371.html