CSS3 Transition-Delay

In another round of CSS3 experimentation, I wanted to see if it was possible to sequentially transition the opacity of 3 or more elements via CSS without having them all begin fading at once. While it seems painfully obvious now, I wasn’t aware that the transition-delay property existed. It’s currently compatible with webkit browsers like Safari or Google Chrome…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

CSS Word-Wrap: Force Text to Wrap

A rarely used but extremely useful CSS property, the word-wrap. You can force long unbroken text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari…

VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)

Purely CSS – Faking Different Color Columns

We want to create a layout with two columns, each a different color, yet have both colors extend the the edge of the browser. This is a technique intended for people that want a multi-colored column fixed width eg. 960px layout.

The secret behind this technique is an 3000 pixel width background image don’t worry about file size – it’s only 360 bytes. This image will be the background of the element that contains our two columns. Since it extends beyond even a 30″ resolution 2560 pixels wide, it will effectively fill in the gaps in color between the edges of our two columns and the edge of the browser window…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Opacity: A Comprehensive Reference

CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Screencast: Understanding CSS3 Gradients

Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS3 In Transition

With the addition of the CSS3 transition property comes a lot of uncharted territory. Never before has it been so easy to bring animation into a usable, standards-based browsing environment. Determining how often and to what degree one should use animation on a web build can be tricky. As we evaluate how to implement animations from project to project, we’ll need to carefully consider how it might affect user experience. Here are a few observations I’ve made from the field…

VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)

How to Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: "Jacob already wrote a Photoshop tutorial on how to do that." That is correct, but this time we are going to do it using only CSS…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS Font Shorthand Property Cheat Sheet

In the past I’ve displayed some serious animosity towards the CSS font shorthand property. I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works. I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)