Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS…

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

The Principles Of Cross-Browser CSS Coding

In this article, I’ll be describing what I believe are some of the most important CSS principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible, with as little CSS code as possible…

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

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…

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

Wrapping Long URLs and Text Content with CSS

By default, the white-space property is set to normal. So you might have problems when trying to force long URLs and other continuous strings of text to wrap. To force long, continuous strings of text to wrap within the width of our <pre> content or other block-level element, such as <div> and <p>, we need a different value for the white-space property. Here are our options…

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

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)