Skip to main content

Create progressively enhanced 3D CSS rollovers

Christian Heilmann, principal evangelist for HTML5 and the open web at Mozilla, explains how to progressively enhance CSS rollover effects into the 3D space

Rollovers are a great thing. They make things more obvious that they are interactive and they allow us to show something different without giving up valuable screen estate. I remember one time when I won a pitch for my company by showing a rollover effect on a menu button. Granted, that was 1998 and nowadays we are less excited about them.

This is a shame though as we have a lot more things to play with in browsers these days. Here we'll take a look at using CSS, 3D CSS transformations, transitions and CSS animations to create some great rollover styles without telling people that they need to have certain browser. Instead, we'll fall back to a plain rollover for all CSS capable browsers. For brevity's sake we won't have all browser prefixes in the code examples here, but they are in the final product you can download:

All of the things we will talk about here are put together in a style sheet that you can just add to your sites called 3Drollovers.css available on GitHub. There you can also see it in action. For the best experience use Firefox Aurora, or a Webkit based browser (Chrome or Safari):

Setting the foundation: the markup


Let's start with the markup, the essence of whatever we do on the web. The classic rollover was done with an image and by changing its src attribute dynamically. This works, but limits us a bit. As browsers are much more capable these daysm, we can use an element with two different elements in it, one of which will be the first or front state of our rollover, and another, which will be the back state. These could be anything – as long as they have the same size. As an example, let's take a link with two images inside nested in a figure:

Comments

Post a Comment

Popular posts from this blog

HTML5 Attributes

Standard Attributes: The attributes listed below are supported by almost all the HTML 5 tags: Attribute Options Function accesskey User Defined Specifies a keyboard shortcut to access an element. align right, left, center Horizontally aligns tags background URL Places an background image behind an element bgcolor numeric, hexidecimal, RGB values Places a background color behind an element class User Defined Classifies an element for use with Cascading Style Sheets. contenteditable true, false Specifies if the user can edit the element's content or not. contextmenu Menu id Specifies the context menu for an element. data-XXXX User Defined Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-". draggable true,false, auto Specifies whether or not a user is allowed to drag an element. height Numeric Value Specifies the height of tables, images, or table cells. hidden hidden Specifies whether element should be visi...
Post a Comment
Read more

"Happy NAVRATRI UTASAV"

Durga, in Sanskrit means "She who is incomprehensible or difficult to reach." Goddess Durga is a form of Shakti worshiped for her gracious as well as terrifying aspect. Mother of the Universe, she represents the infinite power of the universe and is a symbol of a female dynamism. The manifestation of Goddess Durga is said to emerge from Her formless essence and the two are inseparable. She is also called by many other names, such as Parvati, Ambika, and Kali. In the form of Parvati, She is known as the divine spouse of Lord Shiva and is the mother of Her two sons, Ganesha and Karttikeya, and daughter Jyoti. Destroyer of demons, she is worshiped during an annual festival called Durga puja, Wishing you all Happy Durga Puja!!! Navratri Navratri, the festival of nights, lasts for 9 days with three days each devoted to worship of Ma Durga, the Goddess of Valor, Ma Lakshmi, the Goddess of Wealth and Ma Saraswati, the Goddess of Knowledge. During the nine days of Navrat...
Post a Comment
Read more

How to Conditionally Add Style Sheets for IE

Why use conditional stylesheets? You got problems, they need fixin' Keeps your code hack-free and valid Keeps your main stylesheet clean Perfectly acceptable technique, sanctioned by Microsoft And remember, these conditional tags don't have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages. Target ALL VERSIONS of IE <!--[if IE]>         <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> Target everything EXCEPT IE <!--[if !IE]><!-->         <link rel="stylesheet" type="text/css" href="not-ie.css" />  <!--<![endif]--> Target IE 7 ONLY <!--[if IE 7]>         <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> Target IE 6 ONLY <!--[if IE 6]>         <link rel=...
Post a Comment
Read more