Rounded corners on images, CSS-only

Admit it, even though rounded corners are widely seen as overused, you love playing with border-radius. A common complaint is that you can’t use that CSS3 property on images. Define any value, and the images will still display as nature intended: straight corners. For a project I’m working on, it would’ve been really nice having […]

Whenever you use :hover, also use :focus

Probably one of the most common accessibility oversights is neglecting to apply CSS to the :focus state of links whenever you style the :hover state. How much of a problem this oversight leads to for non-mouse users depends on what CSS is applied to the :hover state…

CSS3 Transforms & @font-face Experiment

This is the first of what I hope are number of experiments I plan on working on over the next few months, all in an effort to get acquainted with some of the new CSS3 features out in the wild that seem to be gaining some traction…

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 […]

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 […]

The Little Known font-size-adjust CSS3 Property

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

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 […]

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 […]

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 […]

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 […]

« Previous PageNext Page »