As a web designer learning about css3 tutorials, examples and tricks are very useful to improve know on css3 style.

Today i collected beautiful style design of CSS3 tutorials, examples 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 and CSS3 slider/slideshow … 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. You can find out more 40 Useful HTML5 Lessons, Tutorial for Learning HTML5 .

CSS3 Tutorials 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 CSS3 and HTML5 animation on the web. Begin!

Element CSS Loading

Element-CSS-LoadingMore Info

Stylish CSS3 progress bars

Stylish-CSS3-progress-barsDemo More Info

Windows-8-like Animations with CSS3 and jQuery

Windows-8-like-Animations-with-CSS3-and-jQueryMore Info

Creating a Collection of CSS3 Animated Pre-loaders

Pre-loaders are a common sight in modern web design. As users we expect the web to be fast and fluid – we don’t like waiting for things. Pre-loaders offer visual feedback in the event of content being loaded, thereby managing expectations and reducing the chance of a user abandoning your website.

CSS3-Animated-Pre-loadersMore Info

Slideup Boxes

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

Slideup BoxesDemo Tutorial

Easy CSS3 & jQuery tooltips

Easy-CSS3-jQuery-tooltipsDemo More Info

Animated Check Boxes Using Css3

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

Animated Check Boxes Using Css3Download (7797) Demo Tutorial

How to Make a Digital Clock with jQuery and CSS3

Digital-Clock-with-jQuery-and-CSS3Demo More Info

CSS3 Animated Bubble Buttons

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.

CSS3 Animated Bubble ButtonsDemo Tutorial

Animated CSS3 starbursts

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.

Animated CSS3 starburstsDownload Tutorial

CSS3 3D Text

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.

CSS3 3D Text

Download (3777) Demo

Text-Shadow Converter Tools

text-shadow was included in CSS2, removed from CSS2.1 and returns in CSS3. It has been supported in Safari since version 1.1, and is supported in Chrome, Firefox 3.5 and Opera 10.

CSS Shadows take three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. Offsets may be negative or positive

Text-Shadow Converter ToolsTutorial

Animation using pure CSS3

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

Animation using pure CSS3 Demo Tutorial

Pure CSS speech bubbles

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.

Pure CSS speech bubblesDownload (4695) Demo

Turn Images Polaroids with CSS3

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

Turn Images Polaroids with CSS3Demo Download (5002) Tutorial

Pure CSS folded-corner effect

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.

Pure CSS folded-corner effectDemo Download (6328) Tutorial

CSS drop-shadows without images

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.

CSS drop-shadows without imagesDemo Download (6007) Tutorial

Pure CSS GUI icons (experimental)

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.

Pure CSS GUI iconsDemo Download (5730)

CSS pseudo-element Solar System using semantic HTML

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.


CSS pseudo-elementDemo Download (2552)

Pure CSS social media icons (no images)

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.

Pure CSS social media iconsDemo Download (3994)

CSS typography experiment

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.

CSS typography experimentDemo Download (2930)

CSS3 box-shadow rolled corners

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.

SS3 box-shadow rolled cornersDemo Download (5475)

Super Cool CSS3 Flip Effect with Webkit Animation

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.

Super Cool CSS3 Flip Effect with Webkit AnimationDemo Download (3683)

CSS menu using CSS Sprites

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.

Feature Table Design

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS.Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.

Feature Table DesignDemo Download

Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

Transparent Borders with background-clipDemo Download (2504)

Nice 3D Ribbons Only Using CSS3

There are some properties of the CSS3 languages that can help us to accomplish this mission.
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds.

Nice 3D Ribbons Only Using CSS3Demo Download (5575)

Awesome Overlays

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Awesome Overlays css3Demo

Rounded Corners Drop Shadows Opacity in CSS3

There are some very cool features that have come along with HTML5 and CSS3. Generally, alot are only able to be displayed in Firefox and Webkit-based browsers like Chrome and Safari. Here, I’ll show you an example of how to implement drop shadows, rounded corners and opacity in your designs using CSS3.

Rounded Corners Drop Shadows Opacity in CSS3Download (4374)

Style Menu with CSS3

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.

Style Menu with CSS3

Download (4094) Demo

Making an Impressive Product Showcase with CSS3

Making an Impressive Product Showcase with CSS3Tutorial Demo

CSS3 Button Maker

CSS3 Button MakerTutorial Demo

Annotation Overlay Effect with CSS3

Annotation Overlay Effect with CSS3Tutorial Demo

Fluid CSS3 Slideshow with Parallax Effect

Fluid CSS3 Slideshow with Parallax EffectTutorial Demo

Animated Content Tabs with CSS3

Animated Content Tabs with CSS3Tutorial Demo

Login and Registration Form with HTML5 and CSS3

 Login and Registration Form with HTML5 Tutorial Demo

Accordion with CSS3

Accordion with CSS3Tutorial Demo

Page Transitions with CSS3

Page Transitions with CSS3Tutorial Demo

Sliding Image Panels with CSS3

Sliding Image Panels with CSS3Tutorial Demo

Animated Web Banners With CSS3

Animated Web Banners With CSS3Tutorial Demo

Filter Functionality with CSS3

Filter Functionality with CSS3Tutorial Demo

Thumbnail Proximity Effect with jQuery and CSS3

Thumbnail Proximity Effect with jQuery and CSS3Tutorial Demo

Fullscreen Background Image Slideshow with CSS3

Fullscreen Background Image Slideshow with CSS3Tutorial Demo

CSS3 Lightbox

CSS3 LightboxTutorial Demo

Slopy Elements with CSS3

Slopy Elements with CSS3Tutorial Demo

Splash and Coming Soon Page Effects with CSS3

Splash and Coming Soon Page Effects with CSS3Tutorial Demo

Typography Effects with CSS3 and jQuery

Typography Effects with CSS3 and jQueryTutorial Demo

Animated Buttons with CSS3

Animated Buttons with CSS3Tutorial Demo

Original Hover Effects with CSS3

Tutorial Demo

Creative CSS3 Animation Menus

Tutorial Demo

Blur Menu with CSS3 Transitions

Tutorial Demo

Circle Navigation Effect with CSS3

Tutorial Demo

Editable CSS3 Image Gallery

Tutorial Demo

CSS3 Slideup Boxes

Tutorial Demo

Shiny Knob Control with jQuery and CSS3

Tutorial Demo

Having Fun With CSS3: Spinning Newspapers

Tutorial Demo

Photobooth with PHP, jQuery and CSS3

Tutorial Demo

Making Better Select Elements with jQuery and CSS3

Tutorial Demo

Responsive Design with CSS3 Media Queries

Tutorial Demo

CSS3 Loading Animation Loop 2 Set

Tutorial Demo

CSS3 Hover Effects

Tutorial Demo

CSS3 Loading Animation

Tutorial Demo

CSS3 Loading Animation Loop

Tutorial Demo

CSS3 with jQuery / Reverse Animation

Tutorial Demo

CSS3 Tooltip with Animation NO jQuery

Tutorial Demo

CSS3 Digital Clock with jQuery

Tutorial Demo

CSS3 Navigation with Transitions

Tutorial Demo

Creating a polaroid photo viewer with CSS3 and jQuery

Tutorial Demo

Colourful rating system with CSS3 and jQuery quickie

Tutorial Demo

3d animation using pure CSS3

Tutorial Demo

CSS3 animations and their jQuery equivalents

Tutorial Demo

CSS3 quickie: The Facebook loading animation

Tutorial Demo

Sweet tabbed navigation using CSS3

Tutorial Demo

Pure CSS3 bokeh effect with some jQuery help

Tutorial Demo

Responsive Banner Ads with HTML5 and CSS3

Tutorial Demo

Awesome Cufonized Fly-out Menu with jQuery and CSS3

Tutorial Demo

CSS3 Minimalistic Navigation Menu

Tutorial Demo

BounceBox Notification Plugin With jQuery & CSS3

Tutorial Demo

Stacked Elements with CSS3 Pseudo-Elements

Tutorial Demo

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

Tutorial Demo

How to Create Link Tooltips Using CSS3 and JQuery

Tutorial Demo

Create a Swish CSS3 Folded Ribbon

Tutorial Demo

Navigation Bar with Pure HTML/CSS3

Tutorial Demo

Quick Tip: Create Pure CSS3 Ticket-Like Tags

Tutorial Demo

CSS3 Transitions And Transforms From Scratch

Tutorial Demo

Quickly Build a Swish Teaser Page With CSS3

Tutorial Demo

Perfectly Rotate and Mask Thumbnails With CSS3

Tutorial Demo

CSS3 Hovering Tooltips

Tutorial Demo

How to Create a CSS3 Wheel Menu

Tutorial Demo

Bring Your Forms Up to Date With CSS3 and HTML5 Validation

Tutorial Demo

Extreme Makeover: jPaginator CSS3 Edition

Tutorial Demo

Chunky 3D Web Buttons: The CSS3 Version

Tutorial Demo

Google Play’s minimal tabs with CSS3 & jQuery

Tutorial Demo

CSS3 loading animation experiment

Tutorial Demo

Fancy FAQ page using CSS3 only

Tutorial Demo

CSS3 ordered list styles

Tutorial Demo

Awesome CSS3 animated header

Tutorial Demo

Image map with CSS3 & jQuery tooltips

Tutorial Demo

Practical CSS3 tables with rounded corners

Tutorial Demo

Design a beautiful CSS3 search form

Tutorial Demo

Cool notification messages with CSS3 & jQuery

Tutorial Demo

Pure CSS3 accordion

Tutorial Demo

CSS3 tooltips

Tutorial Demo

How to create a cool and usable CSS3 search box

Tutorial Demo

Multi-column text using CSS3

Tutorial Demo

Old School Clock with CSS3 and jQuery

Tutorial Demo

Pretty Simple Content Slider with jQuery and CSS3

Tutorial Demo

Contextual Slideout Tips With jQuery & CSS3

Tutorial Demo

How to Create a CSS3 Ajax Loading Icon Without Images

Tutorial Demo

CTA button without images using CSS3 and Entypo

Tutorial Demo

How To Create a Stylish Drop Cap Effect with CSS3

Tutorial Demo

Radioactive Buttons

Tutorial

Animated CSS3 Gradients

Tutorial Demo

How to create slick effects with CSS3 box-shadow

Tutorial Demo

Pure CSS3 Multi Level Drop Down Navigation Menu

Tutorial Demo

CSS3 Search Box Inspired

Tutorial Demo

CSS3 Animation Tutorial – Sliding Navigation without JavaScript

Tutorial Demo

CSS3 Toggler – Vertikales Menu

Tutorial Demo

CSS3 Google Buttons

Tutorial

How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

Tutorial Demo

Transforming Elements in 3D Using CSS3

Tutorial Demo

CSS3 maker

CSS3 maker

Graham Bill has been a professional web developer and designer with more experience on coding HTML5, CSS3, php, javascript, jquery, ajax, jsp, XML, MySQL, SEO and especially on development joomla templates and wordpress themes.

Feedback 36 Leave a comment
  1. Thank you so much buddy. You save me awsome lot of time searching for these in the web individiaually.
    Nice collection. thank you so much :)

  2. Hello Graham

    Thank you for sharing these interesting CSS3 posts.

    The only problem that occurs with using CSS3 is that a number of browsers do not support it, especially IE which could cause problems. After reading this post, I will look at using CSS3 a lot more within my development. Number 4 is very interesting, as I haven’t seen animated buttons before. This is something that I am interesting in looking into and will see how this can be incorporated in the future. Another useful point which I came across was http://www.css3maker.com/. This is a very useful website, giving you the ability to generate the correct code for the required effect much easier.

  3. Great Collection.
    I wish I could get hold of the codes of the “Overlays” so that I could practice them.
    Thanks for sharing.

  4. Great roundup of some awesome CSS hacks youve gathered here .
    Thank you for your efforts :)
    *#27 : Nice 3D Ribbons Only Using CSS3 is a broken link *

Leave a Reply

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

Please check to confirm

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>