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.
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.
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.
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).
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.
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.
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.
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.
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.
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).
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.
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.
CSS3 Parallax scrolling slider
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.
CSS3 image slider with stylized thumbnails
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.
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.
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.
- § -
I hope you enjoyed these CSS3 tutorials, if you want to keep up-to-date, you could follow me on twitter: @gonzodesign