A Collection of Awesome CSS3 Tutorials For Beginners

HTML5 and CSS3 is coming. Big time. As an old-school web developer I was at first hesitant to properly learn and use CSS3 because most browsers didn’t support it. But these days there are no excuses, so if you’re looking to dive into the amazing world of new features in HTML5 and CSS3, these simple tutorials makes a good starting point.

If you’re brand new to CSS3, here are some great resources for CSS3 to get you started:

Still feeling inspired to learn more CSS3? Here is a list of a few tutorials targeted to do specific things with CSS3:

How to Create a Stylish Image Content Slider in Pure CSS3

In this tutorial we will create a CSS3 only image slider inspired on the Futurico User Interface by Vladimir Kudinov. The CSS3 features that we’ll be using in this tutorial are in tests in the most recent browsers so this slider will not work in all browsers (try preview in Chrome and Safari). I don’t recommend you to use it on your professional projects as this will not work properly, use this tutorial just to play around with the last CSS3 features that you will be able to use in the feature.

Read the article »

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.

Features no less than 7 different buttons with a combination of styles, animations and effects.

Read the article »

Item Blur Effect with CSS3

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

Read the article »

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Read the article »

CSS3 Loading Animation Loops

Hi folks, this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see how to create it

Read the article »

CSS3 Arrow-shaped Breadcrumbs

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user need to perform in order to navigate back.

So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

Read the article »

CSS3 & jQuery folder tabs

Ever since I started working for one of my CSS3 breadcrumbs example, I thought about writing this tutorial. In this article, I will use a similar technique in order to create some good looking CSS3 tabs.

While in my previous CSS3 tabs tutorial I tried to simulate some beveled corners for the tabs, this time I will show you how to create folder tabs using nothing more than pure CSS3.

Read the article »

Create an Advanced CSS3 Menu

A while ago, I wrote a tutorial on how to create an advanced CSS3 menu. This tutorial is still being linked and used by many people, so I thought I would revisit it and release an even better version. This update brings a lot of improvements including code, customization, user experience and is even more scalable than before.

Read the article »

Create the accordion effect using CSS3

Recently I have been playing around with CSS transitions and animations as implemented in webkit based browsers such as Safari and Chrome. They have been submitted to the W3C for consideration in the CSS3 spec so hopefully we should see more browsers support this soon, Firefox 3.5 supports CSS transforms which was developed by the webkit people to work alongside CSS animations & transitions.

To continue my effort to accomplish tasks in CSS that are usually reserved for JavaScript, such as my Futurebox and CSS based iPhone orientation detection. I have developed a CSS based version of the popular “accordion effect” that utilises the webkit CSS transitions. Like the Futurebox demo I’m utilising the CSS3 :target pseudo class to know which item to show based the URI fragment identifier (the # in the url).

Read the article »

3 Easy and Fast CSS Techniques for Faux Image Cropping

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. That’s why I call it Faux Image Cropping.

Read the article »

CSS3 ordered list styles

Styling ordered lists was always a tricky task and I’m not the only one who thinks that. To style numbers you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly.

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

Read the article »

CSS Patterns Gallery

A web page showing (at the time of writing) no less than 35 patterns – some pretty advanced – you can make with CSS3. Click on a pattern to see the CSS3 code needed to make the pattern. Examples includes weaves, tartan, upholstery, lined paper, yin yangs, bricks, carbon fibre and many more.

Read the article »