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 you how to use this helpful module in today’s video quick tip…

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

Wicked CSS3 3d bar chart

While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see that almost no images were used to create this wicked effect…

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

Using CSS3 Text Shadow for Active Link States

Recently, Chris Spooner of Line25 wrote a tutorial describing how to create a letterpress effect with CSS3′s text-shadow property.

In another article, Chris Coyier of CSS-Tricks showed how he makes all the text links on his website feel more button-like using a simple bit of CSS positioning.

During a recent project I was working on, while messing around with the CSS3 text-shadow property, I serendipitously combined the two different effects from those two articles to create a letterpress effect on active link states…

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

CSS Three – Connecting The Dots

Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate…

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

Semantic CSS3 Lightboxes

Create a modal CSS3 lighbox effect. If you’ve ever come across a link or image which — upon clicking — increases in size and where the rest of the screen gets “shaded” to focus on the content, you’ll know what I’m talking about. This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and excluding Internet Explorer will require no scripting at all…

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

Efficiently Rendering CSS

I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?

This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.

Let’s cover some of the big ideas they present, and then discuss the practicalities of it all…

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

Using CSS3 Transitions, Transforms and Animation

First things first – these demos are showing of CSS transitions, transforms 2D and 3D and animations. Currently May 2010, transitions and 2D transforms are available in all current browsers at least in a dev build apart from Internet Explorer, 3D transforms and animations are only in Safari. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation. 3D transforms generally don’t degrade nicely, so be careful when using them…

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

The New Lens Flare – CSS3

By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo…

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