5 common effects with CSS3 implementations

With pure CSS can also achieve a variety of cool effects, even animation. Although some effects cannot be run across browsers (or even browsers that support CSS3), some just show no real purpose, but the effects of CSS alone seem to be nothing to be picky about.

For designers and developers, CSS has always been an important part of the web design process, with the advent of CSS3 and the support of more and more browsers, designers have more choices. With pure CSS can also achieve a variety of cool effects, even animation. Although some effects cannot be run across browsers (or even browsers that support CSS3), some just show no real purpose, but the effects of CSS alone seem to be nothing to be picky about.

Here are 5 common effects that use CSS3 implementations, and you can try it right away.

1. CSS3 button

You can create elements of different sizes and colors (such as buttons) without having to prepare a background picture every time. Zurb has taught you to create a CSS3 button of the detailed article, you are interested to see. Using RGBA to make the shadow effect is really good!

2.CSS3 Column Chart

Ben Lister has chosen a lot of practical CSS3 techniques, including a 3D column that looks pretty good. Using-webkit-transform or-moz-transform and the specified offsets, you can use CSS to make as impressive an effect as a picture.

3. CSS3 Pull-down Menu

Webdesignerwall's Nick La shows how to create a nice CSS3 pop-up pull-down menu that shows two versions of a menu created with a gradient picture and CSS.

4. CSS3 quoted Bubbles

These pure CSS reference bubbles created by Nicolas Gallagher look great, and you can slightly modify the BLOCKQUOTE elements on your page.

You can go to Gallagher's demo page to see the effects, especially the Twitter bubble, which is better than Twitter's official use of embedded methods.

5. CSS3 albums

Apple has just introduced a number of pages that show the effects of HTML5 pages (HTML5 and CSS3 are often linked). Although this Polaroid-style album created with CSS3 has some transitions and 3D effects that can't be run in all browsers, this is really a cool example of a CSS3 transition effect.

To see more CSS3 and HTML5 demos, click here.