Nonintrusive CSS Text Gradients

Though not completely cross browser compatible, there are ways to nonintrusively create pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes…

Getting Clever with CSS3 Shadows – Screencast

As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways. This quick video tutorial will show you how…

CSS3 Advanced Box Shadows

In this video, you’ll learn about additional box-shadow features, such as multiple shadows and inset shadows. You’ll also learn some advanced techniques, such as how to create a sunken well effect…

Pure CSS Reflections

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property. I’ll show you how to use it in today’s video quick tip…

The Multi-Column CSS3 Module

For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that – again – no support in Internet Explorer. But that’s okay! The world will not end if IE users see one longer paragraph. I’ll show […]

CSS Image Switcher

Build a CSS only image switcher with help from this screencast. There’s no JavaScript used, just plain CSS. The trick is some simple z-index switching on hover and a bit of absolute positioning…

Practical CSS Shapes

A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily…

Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! This video tutorial will show […]

Understanding CSS Specificity

The “C” in CSS stands for cascading. This means that that style rules that show up later in the stylesheet will override rules which appear earlier. But this isn’t always the case. There’s something else you have to take into consideration, as well: specificity…

How To Provide a Flexible Base for Text

Sizing text in pixels can cause many problems for web developers – especially in Internet Explorer. Author Dan Cederholm shows you the best practices for sizing fonts…

Next Page »