30+Example CSS3 Style (Really Useful CSS)

Today i collected some style design of CSS3 example that available for demo view and download such Text Effects and Layout, CSS3 Animated, CSS3  3D  Text, Pure CSS, CSS drop-shadows, CSS image replacement, css background, css rounded corners, border radius, box shadow,css3 inner shadow, css drop shadow, css3 drop shadow … etc.

CSS 3 are going to be very interesting. They will allow the designer/developer to select on much more specific levels of the document. One of the nice things about this module is that many browsers are already starting to support the advanced CSS 3 selectors, so you can start trying them out now.

CSS3 Samples has brought about a number of aesthetically impressive new features. Perhaps the most fun of these to play with is CSS animation, which allows you to perform many motion-based functions normally delegated to JavaScript. Join me on my epic quest to discover the coolest, most innovative, and more importantly, nerdiest use of CSS animation on the web. Begin!

1. Slideup Boxes  | Download | Demo

This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+

2. Animated Check Boxes Using Css3 | Download (1541) | Demo

Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. Just messing about again with CSS3.

3. Style Menu with CSS3 | Download (1095) | Demo

Here’s a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks people use. The outcome was a really simple animated sliding verticle menu.

4. CSS3 Animated Bubble Buttons | Download | Demo

Learn how to create a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary.

5. Animated CSS3 starbursts | Download | Demo

If you create your starbursts with CSS3 you can do so much more than with images. Below are a few more demos where I’ve experimented with different numbers of points, rounded borders, text-shadows, animations with transitions and transforms, and also translations. To see the animations you will need to use Safari or Google Chrome.

6. BonBon–Sweet CSS3 buttons | Download | Demo

Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.And voila.. here they are, the BonBon Buttons. Named after the French word for “Candy“. So, let’s take a tour trough the candy store.

7. CSS3  3D  Text | Download (735) | Demo

CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset.

8. Text-Shadow Converter Tools

9. Animation using pure CSS3 | Download (547) | Demo

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

10. Pop Out Details on Hover CSS3 | Tutorials | Demo

I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.

11. Pure CSS speech bubbles | Download (793) | Demo

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

12. Turn Images Polaroids with CSS3 |Demo | Download (996)

In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures. Check out the demo and code snippets below

13. Pure CSS folded-corner effect | Demo | Download (1247)

Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds.

14. CSS drop-shadows without images | Demo | Download (1205)

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

15. Pure CSS GUI icons (experimental) | Demo | Download (1016)

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.

16. CSS image replacement using pseudo | Demo | Download (603)

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7.

17. CSS pseudo-element Solar System using semantic HTML

Demo | Download (533)

This is a complete reworking of another author’s basic reproduction of the classic model of our solar system using CSS. By using pseudo-elements (again) I wanted to reproduce as much as possible without presentational HTML and JavaScript. In addition, by hooking into HTML microdata I’ve put together a rough scale model of the solar system that demonstrates some further uses of CSS generated content.

18. Pure CSS social media icons (no  images) | Demo | Download (742)

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.

19. CSS typography experiment | Demo | Download (679)

This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS 2.1, and modern browser implementations of a couple of CSS3 properties. Along the way a few new modern browser bugs and inconsistencies were exposed.

20. CSS3 box-shadow rolled corners | Demo | Download (1030)

Rolled corners are popular. Dimension is in. The CSS3 box-shadow property isn’t entirely flexible enough to really create the effect (masked shadows please!) but with a couple layers it can be approximated in some browsers within limits. Looking good in Firefox and Safari. Not so much in Chrome.

21. Super Cool CSS3 Flip Effect with Webkit Animation

- Demo | Download (667)

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

22. CSS menu using CSS Sprites | Demo | Download

Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know.