CSS3

Chris Coyier shows us how to recreate the bubble point tooltips from the Mac OS X Doc using CSS3 and JQuery.

UX developer Paul Hayes showcases what you can do with the power of CSS3 3D transforms. He covers everything from 3D image galleries and subtle transitions to experimental 3D environment.

When I saw that simple but yet amazing effect, when you hover over title in “Unitasking” post by Trent Walton, I was immediately in love.

So, in this post we will see how to achieve that effect with a little help of lettering.js and css3 transition property.

CSS3 animation is pretty darn cool. It lets us give hardware accelerated life to our previously dull websites. However, there are some major pitfalls and practices you should be aware of – let’s dig in.

The browser support for CSS3 animation is hotting up – Mozilla Firefox has joined WebKit in full support, and Internet Explorer 10 as well as Opera 12 have promised future support. This means we can start using them without fear today. However, this thriving support doesn’t come without its problems.

Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I thought I’d take some time to look at it and improve it. It occurred to me that one solution I didn’t present was a much lighter solution; a solution that required only CSS!

The latest stable release for Chrome (version 15) brings experimental support for a new feature, CSS Regions. What this does is take content from a source, and flow that content into a target — or, more importantly, multiple targets. This allows layouts which are more flexible than are currently possible.

This is still a very experimental feature but it’s worth beginning to investigate, so in this article I’m going to very quickly walk through the syntax and discuss the current level of implementation.

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.

A responsive reference page for CSS Selectors Level 3 built using the isotope.js jQuery plugin.

There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.