CSS3 Tip: Root Em

A new relative measurement in CSS3 is called a rem (for root em) developed by that bases font size on the size of the root (html) element. If you specify the size of the html element (presumably to 100%), all elements that are specified in rem measurements will be relative to that size, not their inherited size.

This gets rid of the compounding issue that makes ems potentially aggravating. The drawback is that IE8 and earlier and other older browsers do not support rems, so you need to provide a fallback font size in pixels. Browsers that support rems will use the last declaration in the stack.

Reference: http://www.sitepoint.com/css3-rem-units/

CSS3: Quick Tips

Transparency settings via CSS have been around for some time, and even Internet Explorer has made way for transparency using non-standard filters. But CSS3 expands on our options by adding RGBA colors to the well-known opacity property:

Using CSS3 Opacity poperty, we’ve set the element to be 60% opaque (or 40% transparent). The Opacity property accepts any decimal value between zero and one, with zero representing full transparency.

You can also set the color option with an alpha setting:

Continue reading

CSS3: Keyframe Animation

CSS3 Transitions are good but naturally limited; they are only applied when a property value changes.

The CSS3 Animations Module goes beyond what is possible with Transitions, allowing animations to be applied directly to elements with a syntax that is more flexible and permits more granular control. Animations and transitions have quite a lot of syntax in common, but the process for creating animations is very different: First, you define the properties and timings, and then you add the animation controls to the elements that will be animated.

The Animations Module is implemented in all current browsers, so check the Can I Use CSS3 website to check specific versions. Continue reading

CSS3: Transitions

CSS3 transitions smooth out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change, an effect previously only possible using JavaScript, but now possible with a few simple lines of CSS.

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover.

Continue reading