15+ More Cool Pure CSS3 Tutorials [No Javascript]

We all know that JavaScript allows us to do great things when it comes to user interfaces, but a lot of the same types of effects can be created with pure CSS3. In this post I will be featuring only Pure CSS3 tutorials that only used CSS and HTML

Although Javascript/jQuery is amazing and can bring websites to a whole new level, it has a few flaws that we can’t account for:

• Users can disable Javascript in their browser, by now, most of us account for this, and provide fallbacks.
• Your site will take more time to load all of your wonderful javascript.

This is where CSS3 comes in, we now can create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. CSS3 is slowly but surely creeping into mainstream web design, more designers are using it and they should too. More modern version of browsers support CSS3 nowadays, with or without their own prefixes, and already there are hundreds of tutorial made to teach designers how to use it.

In this article, we will be using the power of CSS3 effects and transitions, to build JavaScript-free cool stuff for your next web design, so let’s hit the road .. Jack!

 

Animated 3D Bar Chart with CSS3

The initial challenge was to create a classic semi-transparent 3D box with 6 sides. The final challenge was to create a complete 3D bar chart which we will create in this tutorial on how to create an animated 3d bar chart using CSS only.

Source

 

CSS3 ordered list styles

In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.

Source

 

How To Add Text Gradients With CSS

In this tutorial we are going to look at some of the new CSS3 features for dealing with text colours. If you have used CSS background gradients before then you will know how you can add gradients to the background of elements, but it’s not as easy to change the colour of text to have a gradient just by using CSS.

Note: this technique will only work with Webkit Browsers (Chrome and Safari).

Source

 

Designing an effective pricing table

Having an effective pricing table can help you a lot to increase the conversion rate for your product sales page. It’s very important to make things clear from the beginning because this way you’ll help your visitors to take the best decision for choosing the plan that suits them. The pricing table’s design also plays an important role here. So, in today’s article you’ll learn how to create a nice and effective pricing table using CSS3.

Source

 

Styling First and Last Child Elements

In this tutorial I’ll be explaining how to style only the first and last child list elements using a pseudo class you probably haven’t heard of. You can use these class in a number ways in your designs, this is just one of them.

Source

 

Cross-Browser CSS Reflections, Glows and Blurs

Reflections can add an interesting dimension to objects, lending a touch of realism and giving them context within their surroundings. Let’s take a look at achieving reflections with CSS and we’ll examine glowing and cross-browser blurring for good measure too.

Source

 

CSS-Only Responsive Layout with Smooth Transitions

In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a navigation which will allow us to navigate between the panels. We’ll use radio buttons for the navigation and animate the content to the right position with a transition, creating a “smooth scrolling” effect.

Source

 

CSS Breadcrumb

Recently I was looking for a way to create a series of breadcrumb buttons with arrows incorporated. I found many tutorials that explained me how to create small triangular arrows in one color using CSS-borders, but none that showed me how to create buttons with gradients that incorporated the arrow. I decided to code it myself.

Source

 

Design a Prettier Table with Pure CSS3

Lets design a HTML table element with Pure CSS3 tags without adding any classes to the table. Before I begin I pretend that all of you have the basic knowledge of HTML/HTML5 and CSS (you don’t need to know CSS3 because as I will apply any CSS3 tags, I will teach you about it).

Source

 

Creating Different CSS3 Box Shadows Effects

In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS.

Source

 

Make a stopwatch using CSS3 without images or javascript

This tutorial focuses on step based CSS3 keyframe animation, along with the usage of the animation-play-state property to start/stop/reset the stopwatch. The animation-play-state property may be removed because it can be replicated using other methods and is currently not supported in all browsers, but the idea behind the functionality of the stopwatch is worth learning.

Source

 

CSS3 Parallax scrolling slider

Haven’t you noticed that there have been appeared a lot of websites with the effect of parallax effect? This is optical effect (displacement or difference in the apparent position of an object viewed along two different lines of sight). Basically, this is when we can see several shifting layers during some action. And today, we will apply this effect for vertical slider. We won’t use javascript, but only pure css3 properties.

Source

 

How To Create a Stylish Button Entirely with CSS3

I posted a CSS basics tutorial on how to create a simple button graphic using image sprites. By popular demand in the comments we’ll now look at creating a similar button style graphic, but entirely with CSS. Let’s look at how CSS gradients, shadows, borders and transitions can all be combined to create a stylish button for your website.

Source

 

CSS3 image slider with stylized thumbnails

Learn to make a fade-in-out image slider with thumbnails which have active styles. The slider does not have any page jump when you click on the thumbnails. The markup is very simple and scalable to accomodate any number of slides without redundant and bad CSS. Javascript may be added to enhance the functionality.

Source

 

Accordion with CSS3

Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing.

There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. The problem with using :target is that we can’t really close the content areas again or have multiple sections open at the same time. By using hidden checkboxes, we can control the opening and closing.

Source

 

Login and Registration Form with HTML5 and CSS3

In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form.

Source

 

Animated Buttons with CSS3

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

Source

 

I hope you enjoyed these CSS3 tutorials, if you want to keep up-to-date, you could follow me on twitter: @gonzodesign