Design, CG Graphics & Inspiration
30 Fresh CSS3 Tutorials

30 Fresh CSS3 Tutorials

Today our showcase consists of the freshest and very useful tutorials that we have collected here in order to save your precious time and make your workflow more fun and easy! So meet the collection of 30 Fresh CSS3 Tutorials and enjoy it!

Button Switches with Checkboxes and CSS3 Fanciness

In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes.
Button Switches with Checkboxes and CSS3 Fanciness in 30 Fresh CSS3 Tutorials
Demo

Circle Hover Effects with CSS Transitions

A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations.
Circle Hover Effects with CSS Transitions in 30 Fresh CSS3 Tutorials
Demo

3D Flipping Circle with CSS3 and jQuery

In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
3D Flipping Circle with CSS3 and jQuery in 30 Fresh CSS3 Tutorials
Demo

Swatch Book with CSS3 and jQuery

In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
Swatch Book with CSS3 and jQuery in 30 Fresh CSS3 Tutorials
Demo

CSS-Only Responsive Layout with Smooth Transitions

A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect.
CSS-Only Responsive Layout with Smooth Transitions in 30 Fresh CSS3 Tutorials
Demo

Image Accordion with CSS3Image Accordion with CSS3

In this tutorial we will create an image accordion that will expand an item on click. Using the sibling combinators and a nested structure we can control the opening of the items/slides with radio buttons.
Image Accordion with CSS3 in 30 Fresh CSS3 Tutorials
Demo

Annotation Overlay Effect with CSS3

A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-class with the sibling combinator.
Annotation Overlay Effect with CSS3 in 30 Fresh CSS3 Tutorials
Demo

Fullscreen Slit Slider with jQuery and CSS3

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions.
Fullscreen Slit Slider with jQuery and CSS3 in 30 Fresh CSS3 Tutorials
Demo

Creating an Animated 3D Bouncing Ball with CSS3

In this tutorial we’ll create an animated 3D bouncing ball using only CSS3 transitions, animations and shadow effects.
Creating an Animated 3D Bouncing Ball with CSS3 in 30 Fresh CSS3 Tutorials
Demo

Animated 3D Bar Chart with CSS3

A tutorial on how to create an animated 3d bar chart using CSS only.
Animated 3D Bar Chart with CSS3 in 30 Fresh CSS3 Tutorials
Demo

An Introduction to CSS3 Animation… with Gary Neville

In this article we’re going to look at the basics of creating keyframe based animation using CSS3, including all of the various properties we can use to control the animation’s behaviour. And to finish, we’ll look at a real life application of CSS animation.
An Introduction to CSS3 Animation… with Gary Neville in 30 Fresh CSS3 Tutorials
Demo

Using CSS3 Filters to Enhance your Transitions

CSS3 Filters are a pretty exciting prospect for us Web Designers as they make effects that we typically associate with Photoshop, possible to apply in the browser with ease.
Using CSS3 Filters to Enhance your Transitions in 30 Fresh CSS3 Tutorials
Demo

CSS3 patterned buttons

CSS3 patterned buttons in 30 Fresh CSS3 Tutorials
Demo

Notification bubble with CSS3 keyframe animation

Notification bubble with CSS3 keyframe animation in 30 Fresh CSS3 Tutorials
Demo

How to Create an Interactive Graph using CSS3 & jQuery

How to Create an Interactive Graph using CSS3 & jQuery in 30 Fresh CSS3 Tutorials
Demo

Pseudo elements with custom attributes to create a css3 menu that will bounce

Pseudo elements with custom attributes to create a css3 menu that will bounce in 30 Fresh CSS3 Tutorials
Demo

Create your portfolio gallery using html5 canvas

In this tutorial we will build a photo gallery and enhance it with html5 canvas and css3 transitions.
Create your portfolio gallery using html5 canvas in 30 Fresh CSS3 Tutorials
Demo

Create a fancy responsive image-on-hover effect

In this tutorial we will create a fancy image-on-hover effect.
Create a fancy responsive image-on-hover effect in 30 Fresh CSS3 Tutorials
Demo

Responsive Images for HTML5

Responsive Images for HTML5 in 30 Fresh CSS3 Tutorials

Create Your Own CSS3 Progress Bars

Create Your Own CSS3 Progress Bars in 30 Fresh CSS3 Tutorials

Using CSS3 transitions: A comprehensive guide

Using CSS3 transitions: A comprehensive guide in 30 Fresh CSS3 Tutorials

Beautiful CSS3 Table Pricing Style

In tutorial, I am going to show you how to use some new CSS3 properties to design beautiful table template. With DIV and list style we define specific column in order to create a unique style adding classes to the markup list style.
Beautiful CSS3 Table Pricing Style in 30 Fresh CSS3 Tutorials
Demo

The Creation of a CSS3 Clickable, Rotating Menu

The Creation of a CSS3 Clickable, Rotating Menu in 30 Fresh CSS3 Tutorials
Demo

CSS3 Hover Effects with Websymbols Tutorial

In tutorial we are going to show you new CSS hover effects using CSS transition properties with websymbols. It looks so much more interesting with creative design using circles transition style.
CSS3 Hover Effects with Websymbols Tutorial in 30 Fresh CSS3 Tutorials
Demo

How to Build a CSS3 Sliding Menu

In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect.
How to Build a CSS3 Sliding Menu in 30 Fresh CSS3 Tutorials
Demo

Responsive Menu with CSS3 Tutorial

In this tutorial, we’ll create a responsive menu with new feature of css3 (media queries) to alter the design and layout of a website navigation menu to fit different screen sizes.
Responsive Menu with CSS3 Tutorial in 30 Fresh CSS3 Tutorials
Demo

Animating Buttons with CSS3

Animating Buttons with CSS3 in 30 Fresh CSS3 Tutorials

Create a stunning menu in CSS3

Create a stunning menu in CSS3 in 30 Fresh CSS3 Tutorials
Demo

Using CSS3 Attribute Selectors

Using CSS3 Attribute Selectors in 30 Fresh CSS3 Tutorials
Demo

Chain CSS animations together with JavaScript

Chain CSS animations together with JavaScript in 30 Fresh CSS3 Tutorials
Demo

You might also be interested in..

Handy CSS3 Tuts For Web Developers
40+ New HTML5/CSS3 Articles and Tutorials

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.