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…
Archive for March, 2010
-
CSS3 Transition-Delay
Posted: 4 months ago in Articles
Read More: CSS3 Transition-Delay
-
CSS Word-Wrap: Force Text to Wrap
Posted: 4 months ago in Tutorials
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…
Read More: CSS Word-Wrap: Force Text to Wrap
-
The Little Known font-size-adjust CSS3 Property
Posted: 4 months ago in Tutorials
Ever wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge or tiny? The sparkling new CSS3 font-size-adjust property could do just that, maybe…
-
Purely CSS – Faking Different Color Columns
Posted: 4 months ago in Tutorials
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…
Read More: Purely CSS – Faking Different Color Columns
-
CSS Opacity: A Comprehensive Reference
Posted: 4 months ago in Tutorials
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…
Read More: CSS Opacity: A Comprehensive Reference
-
Screencast: Understanding CSS3 Gradients
Posted: 4 months ago in Tutorials
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…
Read More: Screencast: Understanding CSS3 Gradients
-
CSS3 In Transition
Posted: 4 months ago in Articles
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…
Read More: CSS3 In Transition
-
CSS for the iPad
Posted: 4 months ago in Code
The iPad is coming and the developers already received the iPhone Simulator Extension. The new XCode beta also includes Safari Mobile. If you want to use a CSS modification for the iPad as I do, this is how you tell the iPad to use an additional CSS file…
Read More: CSS for the iPad
-
How to Create Inset Typography with CSS3
Posted: 4 months ago in Tutorials
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…
Read More: How to Create Inset Typography with CSS3
-
CSS Font Shorthand Property Cheat Sheet
Posted: 4 months ago in Tools
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…
Read More: CSS Font Shorthand Property Cheat Sheet