The techniques that were new a year ago have become standard now and here is a great collection of advanced user interface CSS3 instructive tutorials of 2013 . These CSS effects give developers a quick and easy solution when it comes to enhancing impressive ui styling, and will work on m,host modern browsers.
Text & typography
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. This is not a tutorial but you can play with the plugin, break it down and learn new techniques.
In this tutorial you are going to look at some of the new CSS3 features for dealing with text colors.
The idea in this tutorial is to rotate a part of a sentence. You’ll be “exchanging” certain words of that sentence using CSS animations.
With CSS3, a whole host of text shadow effects are available for us to play with. In this article, you’ll see some of the effects you can make with relatively little CSS code.
One of the hot CSS3 skills for 2012. Implement a subtle texture over text with just a few lines of code.
You probably have already seen animated menus with the LavaLamp effect (based on jQuery plugin). In this tutorial you’ll learn how to repeat the same behavior using only CSS3.
The word-wrap property has been removed from the CSS3 spec but other related properties have been added. Find out what they are and how to use them.
Menus, navigation and sliders
In this tutorial you will learn how to code a pure CSS3 navigation dropdown menu.
Using hidden inputs and labels, you will create a CSS-only accordion that will animate the content areas on opening and closing.
This tutorial will show you how to create a pure CSS3 content accordion. This will work on all browsers and devices that support the :target selector.
This tutorial will show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that will be shown or hidden using the :target pseudo-class.
In this tutorial you will create an image accordion that will expand an item on click. Using the sibling combinators and a nested structure you can control the opening of the items/slides with radio buttons.
In this tutorial you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.
Recreate Orman Clark’s Vertical Navigation Menu with CSS3 and jQuery while using the minimum amount of images possible.
In this article you’ll learn how to build some new CSS3 and jQuery tabs inspired by Google Play‘s design.
This tutorial will show you how to create an accordion menu using CSS3. There are many CSS3 accordion tutorials around on the web, this version is using the :target pseudo-class and works on browsers that support the CSS3 properties.
In this tutorial you will be creating a slider with “Nivo Slider jQuery Script” and CSS3.
A product page is any page on your website that showcases a product. It has to describe its features, have some screenshots, and be descriptive. Learn how to create one with CSS3 and a little touch of jQuery.
Hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to create some interesting effects with CSS. This tutorial will show you how you can create a simple ‘stacked’ look to some images.
In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design.
Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. Learn how to tweak the template with some CSS3 tricks.
This tutorial will teach you how to create this pricing table with the CSS scaling effects. Improve a look of PSD just by using CSS.
If you’re about to launch a new web product or you just need to improve the user experience for an existing web form, then this tutorial is for you.
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 you can create unique slide transitions.
In this tutorial you are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class:target.
In this tutorial you’ll be creating Premium Pixels’ Tagtastic Tag Cloud. As an experiment in alternative approaches, you’ll create the tags using gradients, shadows and (most importantly) CSS transforms, which will form the point of each tag. After completion you’ll have to even take a step further and cater for IE.
In this tutorial you’re going to code up Orman Clark’s Elegant Login Form using CSS3 and HTML5, plus some of Dan Eden’s CSS animations to embellish the experience.
This tutorial will show you how to create a fancy image gallery with CSS3 transitions. The techniques used are mainly CSS3 transitions combined with CSS :hover pseudo-class.
Create a sleek and functional video player using HTML5 and CSS3.
Tips, tricks & techniques
In this tutorial you’ll learn how to create an animated 3D bouncing ball using only CSS3 transitions, animations, and shadow effects.
Have you ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. That said, if you’re not achieving the rotation effect with CSS, you’re working too hard. Learn how to do it right!
Making media display consistently on your site can be a problem, especially with multiple content authors. Opera’s Chris Mills shows you how object-fit and object-position can solve it.
Using the general sibling combinator and the :checked pseudo-class, you can toggle states of other elements by checking a checkbox or a radio button. This tutorial will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
This tutorial will show you a quick and easy way to incorporate a shine effect transition to your images with CSS3, useful in making your user interface elements look like they’re a real polaroid photo.
Learn how to style the image element with CSS3 inset box-shadow and border-radius so it works for responsive design.
In this tutorial you will be driven through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results.
This tutorial will show you how to create a neat thumbnail proximity effect with jQuery.
In this tutorial you’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.
Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones.
Create an animated bird that animates each time you hover it. This is a very simple CSS3 trick and doesn’t require any advanced knowledge of HTML or CSS.
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.
In this beginner tutorial you will be making some cool CSS3 buttons.
t’s not a gimmick or design trick like box-shadow or animation. It’s a real, tangible device which we can use to make designing websites easier. Check out what it does and see examples.