A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-class with the sibling combinator.

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.

Pagination CSS3

Less+ Framework is a cross-device CSS grid system using media queries.

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Super-smooth CSS3 transformations and transitions for jQuery

Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+

A script that lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed

The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

A little over a week ago, Wayne Helman posted an article proposing the use of @font-face for displaying icons. The article was well-received, but I was honestly expecting more excitement around this idea. From my view, this now seems like the way to set icons in a site. I feel strongly about the potential of this method, so I thought I would take the time to generate a font set for Iconic and to talk about why we should all be using this method for displaying icons.

In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.

Modern HTML Presentations

I only really got round to fixing this today so I figured I’d quickly remind those of you using text-shadow properties on your own or client sites to just double check you have some styling in place for highlighted/selected text.

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you!

Simply hover over the social media icons below the see the beautiful effect. The first example is created using pure CSS, and can only be fully viewed using -webkit based browsers (like Chrome and Safari) and Firefox 4. Animations are done using CSS.

An exquisite jQuery plugin for magical layouts
Reveal & hide items with filtering
Re–order items with sorting
Dynamic, intelligent layouts
Captivating animations
Sort items by just about anything
Powerful methods, simple syntax
Progressively enhanced for CSS3 transforms & transitions

Since the beginning of the 'webfont revolution' we've relied on somewhat hacky @font-face declarations to get webfonts loading cross-browser. Could there be a better way? One that's clear and compatible with future browsers?

Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.

This is a set of many buttons that we've created for you to download and use freely.

In this tutorial we will learn how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. Then we will add some Javascript to make the object freely rotatable in 3d space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

ntroducing Sencha Animator, a powerful desktop application to create awesome CSS3 animations for WebKit browsers and touchscreen mobile devices. Make your static content come to life quickly and easily, without the dependency of third-party plugins or writing a single line of CSS code. In no time at all, you’ll be creating rich experiences for today’s most popular devices.

This is a collection of buttons that show what is possible using CSS3 and other advanced techniques. These buttons look best in Chrome and Safari (especially on OSX). They look almost as good in Firefox, with all other browsers falling back to a less-styled button.

umbrUI is a demo of input checkbox elements made with CSS3. There was a request, so I tried. First I thought to create a div with 2 buttons inside, but acutally, when you think about it.. a switch has an on and off state, so why not use a checkbox input element. And as it turnes out, it worked out pretty good.

Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. Using this FREE CSS3Menu you can create great looking buttons using just CSS3 in a few clicks.

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store.

Name

Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We've been using these files for a long time and we've progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for an update, and we thought we'd put it out there for everyone to use. By no means do we see this as the end-all and beat-all, but we think it's a fairly good starting place that anyone can take and make their own.

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.

Transformie is a javascript plugin that comes in less than 5k that you embed into web pages and that brings you CSS Transforms by mapping the native IE Filter API to CSS transitions as proposed by Webkit.