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:
- Smashing Magazine explains the deal with CSS3 with examples and its advantages.
- Nettuts+’s 11 basic CSS3 techniques – for the very CSS3 beginner.
- The new CSS3 Selectors explained.
- If you’re not a coder by heart, the CSS3 Generator can be of use.
- Stay informed on CSS3 and HTML5 browser support.
Still feeling inspired to learn more CSS3? Here is a list of a few tutorials targeted to do specific things with 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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.