Connecting The Dots With CSS3


As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

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!

CSS Three: Connecting The Dots

Where Do I Start?

One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. What would be possible if I was to connect @font-face to text-shadow and the bg-clip:text property? How could I string a webkit-transition and opacity together in a creative way? Here are a few results from experiments I’ve done recently. While some may be more practical than others, the goal here is to spark creativity and encourage you to connect a few dots of your own.

Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.

Example #1: CSS3 Transitions

A safe place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick things off, let’s take a link color CSS property and connect it to a .4 second transition.


Start with your link CSS, including the hover state:

a { color: #e83119; }
a:hover { color:#0a99ae; }

Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations2. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.

a {
-webkit-transition-property: color;

You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:

a { -webkit-transition: color .4s ease-out; }

View the live example here53

The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.


To start, we’ll set a series of navigation links with a 3 pixel bottom border, and a 50 pixel border on hover:

border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }

To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:

border-nav a { -webkit-transition: border .3s ease-out; }

View the live example here53


This is just one example of how to use these transitions to enhance links and navigation items. Here are a few other sites with similar creative techniques:

Team Excellence6
The webkit transition on all navigation items, including the main navigation set at .2s provides a nice effect without making visitors wait too long for the hover state.


Ackernaut has subtle transitions on all link hovers, and extends the property to fade the site header in/out.


The SimpleBits main navigation transitions over .2 seconds with linear timing.


On DesignSwap, all text links have a .2 second transitions on hover and the swapper profiles fade out to real details about the latest designs.

Design Swap13

Jack Osborne14
Jack Osborne transitions all of the blue links as well as the post title link on his home page.

Jack Osborne15

Eric E. Anderson16
Eric E. Andersion has taken CSS3 implementation even further by implementing a transition on his main navigation for background color and color alongside border-radius and box-shadow.


Example #2: Background Clip

When connected to properties like text-shadow and @font-face, the background-clip property makes all things possible with type. To keep things simple, we’ll start with taking a crosshatch image and masking it over some text. The code here is pretty simple. Start by wrapping some HTML in a div class called bg-clip:

<div class="bg-clip">

example 2a18

Now to the CSS. First, set the image you will be masking the text with as the background-image. Then, set the -webkit-text-fill-color to transparent and define the -webkit-background-clip property for the text.

.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

View the live example here2119

This opens the door for you to start adding texture or other graphic touches to your type without resorting to using actual image files. For even more CSS3 text experimentation, we can add the transform property to rotate the text (or any element for that matter) to any number of degrees. All it takes is a single line of CSS code:

-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate (-5deg);

example 2b20

Note: While background-clip isn’t available in Firefox or Opera, the transform property is, so we’ll set this for each browser.

View the live example here2119


This is a fairly simple implementation, but there are quite a few really interesting and innovative examples of this technique:

Trent Walton22
An experiment of my own, combining bg-clip and @font-face to recreate a recent design.

Trent Walton23

An excellent example of what is possible when you throw rotate, bg-clip and @font-face properties together.

neography rotate25

Everyday Works26
One of the earliest innovative implementations of CSS text rotation I’ve seen.


Panic Blog28
The Panic blog randomly rotates divs / posts. Be sure to refresh to see subtle changes in the degree of rotation.

panic blog29

Sam Brown30
Sam’s got a really nice text-rotate hover effect on the “stalk” sidebar links.

Sam Brown31

Example #3: CSS Transforms, Box Shadow and RGBa

What used to take multiple divs, pngs and extra markup can now be accomplished with a few lines of CSS code. In this example we’ll be combining the transform property from example 2 with box-shadow and RGBa color. To start things off, we’ll create 4 image files, each showing a different version of the Smashing Magazine home page over time with a class for the shadow and a specific class to achieve a variety of rotations.


Here’s the HTML:

<div class="boxes">
<img class="smash1 shadowed" src="../img/smash1.jpg" alt="2007"/>
<img class="smash2 shadowed" src="../img/smash2.jpg" alt="2008"/>
<img class="smash3 shadowed" src="../img/smash3.jpg" alt="2009"/>
<img class="smash4 shadowed" src="../img/smash4.jpg" alt="2010"/>

Let’s set up the CSS for the RGBA Shadow:

.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);

Before moving forward, let’s be sure we understand each property here. The box-shadow property works just like any drop shadow. The first two numbers define the shadow’s offset for the X and Y coordinates. Here we’ve set the shadow to 0 for the X, and 3 for the Y. The final number is the shadow blur size, in this case it’s 4px.

RGBa is defined in a similar manner. RGBa stands for red, green, blue, alpha. Here we’ve taken the RGB value for black as 0,0,0 and set it with a 50% alpha level at .5 in the CSS.

Now, let’s finish off the effect by adding a little CSS Transform magic to rotate each screenshot:

.smash1 { margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);

View the live example here33


Here are a few additional sites with these properties implemented right now:

Butter Label34
This site is jam packed with well-used CSS3. Notice the transform and box-shadow properties on the subscribe form.

Butter Label35

Hope 1404436
Another site with plenty of CSS3 enhancements, Hope 140’s End Malaria campaign site features a collage of photographs that all have the same shadow & transform properties outlined in our example.

Hope 14037

For A Beautiful Web38
For A Beautiful Web utilizes RGBa and box-shadow for the overlay video clips boxes linked from their 3 master-class DVDs. While you’re there, be sure to note the transforms paired with the DVD packaging links.

For A Beautiful Web39

Simon Collison40
Simon Collison has implemented RGBa and box-shadow on each of the thumbnail links for his new website.


Example #4: CSS3 Animations

If you really want to push the envelope and truly experiment with the latest CSS3 properties, you’ve got to try creating a CSS3 keyframe animation. As a simple introduction, let’s animate a circle .png image to track the outer edges of a rectangle. To begin, let’s wrap circle.png in a div class:

<div class="circle_motion">
<img src="/img/circle.png" alt="circle"/>


The first step in the CSS will be to set the properties for .circle_motion, including giving it an animation name:

.circle_motion {
-webkit-animation-name: track;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;

Now, all that remains is to declare properties for each percentage-based keyframe. To keep things simple here, I’ve just broken down the 8 second animation into 4 quarters:

@-webkit-keyframes track {
0% {
25% {
50% {
margin-left: 300px;
75% {
margin-left: 300px;
100% {

View the live example here43


A few examples of CSS3 animations online now:

Hope 1404436
Hope 140 subtly animates their yellow “Retweet to Donate $10” button’s box shadow.

Hope 14045

Hardboiled Web Design46
Andy Clarke puts iteration count, timing function, duration and delay properties to good use when animating a detective shadow across the background of Hardboiled Web Design.

Hard Boiled Web Design47

Anthony Calzadilla has recreated the Spider Man opening credits using CSS3 with JQuery and HTML5. You can also learn more about the process in his article “Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!”49.


The Many Faces Of…51
The Many Faces Of… animates the background position of a div to create an effect where characters creep up from the bottom of the page.

The Many Faces Of...52

Trent Walton53
I recently wrote a post about CSS3 usage, and animated a blue to green to yellow background image for the masthead.

CSS Three In Transition54

OK, Dots Connected! Now What?

Yes, all of this CSS3 stuff is insanely exciting. If you’re like me, you’ll want to start finding places to use it in the real world immediately. With each new experimental usage come even more concerns about implementation. Here are a few of my ever-evolving opinions about implementing these properties online for your consideration.

  • CSS3 enhancements will never take the place of solid user-experience design.
  • Motion and animation demands attention. Think about a friend waving to get your attention from across a crowded room or a flashing traffic light. Heavy-handed or even moderate uses of animation can significantly degrade user experience. If you are planning on implementing these techniques on a site with any sort of A to B conversion goals, be sure to consider the psychology of motion.
  • Don’t make people wait on animations. Especially when it comes to hover links, be sure there is an immediate state-change cue.
  • Many of these effects can be used in a bonus or easter-egg type of application. Find places to go the extra mile.

This is a group effort. Don’t be afraid of failure, enlist the help of other developers, join the online discussions, and above all, have fun!

Further Reading

You may be interested in the following related posts:


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62

↑ Back to top Tweet itShare on Facebook

Trent Walton is founder and 1/3 of Paravel Inc., a custom web design and development shop based out of the Texas Hill Country. When he’s not working on client projects, he’s probably writing & designing articles for his blog, or contributing ideas for the next edition of

  1. 1

    Victoria Fiorini

    May 28, 2010 6:02 am

    Adam, your way of thinking is all wrong. Why do you need someone else to tell you a solution to cross browser issues? You answered your own question, use JS. What is this “someday” business? Yeah these css3 techniques only work in web kit browser, but why can’t you design so your web site still functions and looks nice in a non-webkit browser? If you want to help technology advance you need to push people to start using the latest technologies. Reward those that use a webkit browser with a little something extra. Those that are using an out dated slacking browser technology most likely won’t care about what their missing anyways. It is an outdated thought that a website needs to look exactly the same in every browser. Today is the day, EVERYONE STOP SAYING SOMEDAY! Wouldn’t you rather start now, then all the sudden one day have to start using CSS3 and be way behind the learning curve?

  2. 52

    Leave no browser behind. I kindly request that as developers and designers we refuse to implement any CSS3 or HTML5 until each and every browser (and device) catches up and can support the standards. Only then can we responsibly push forward creatively with new technology. Until then, lets do what’s best for website users, and design for the most basic, but widely supported experience! Now who’s with me??!!

  3. 103

    @Lars, John, & Victoria: You guys rock. Keep educating. :)

    @Trent, Great stuff. CSS Transitions are also in Firefox 3.7 and in Opera 10.50.

    All, should help you implement these css3 things in the best way possible. It’s kept up to date with browser support so you know you’ll be addressing all browsers that support a given property (like transition). It doesn’t have all things, missing some options and radial gradients, but I’m workin on it. :p

  4. 154

    Ridiculous. Someone has to push innovation or it dies on the vine. With graceful degradation we can have our cake and eat it, too. I have no problem implementing CSS3 as long as it doesn’t hinder the user’s ability to view the content. If you are coding right, this will never happen.

  5. 205

    This isn’t about implementation as much as it is about experimentation and innovation. I hope readers will be encouraged to try something new with no guarantee that the result will succeed or be something they can implement right now. Progress is messy. Progress is risky. None of the examples I’ve given above are perfect… we all need to join together to help “connect the dots.”

  6. 256

    Wow, if the readers here are the future of web design, things are shaping up to be quite sad. I feel like more than 90% of you who have commented only look at the pretty examples and don’t bother to read the informative area of content. There is useful information here people.

    Stop reading these articles to look at how it is done and implement, to find out it “only” works with web-kit browsers (with those stupid -webkit prefixes). Then everyone complains about why aren’t there any examples of how to make this work with JS or Flash. These are not blanket principles here. Use your own discretion for when to implement such features. Trent was pretty specific in mentioning the caveats of using the demonstrated css3 examples. These are enhancements.

    It is up to you to focus on user experience and remember that enhancements of any kind css3 or JS are there for enhancement not core functionality. Trent said “go the extra mile”, everyone bitches about IE why not reward users of modern browsers with a little bit of extra? Change your mind set, your aren’t limiting IE users, they still get a functioning web site, which should still look nice, modern browser users just get a little pretty on top of it all.

    This is css3, these are vendor prefixes not hacks. Those who say otherwise are uninformed. These properties are still in development.

    Jonathan Snook said:
    “The point of a vendor prefix is to avoid a situation where an implementation changes before becoming a standard, thereby breaking all sites that come before it. This is a good thing. A vendor can continue to revise the syntax under a prefixed property without breaking things when they finally do become standard and implementations drop the vendor prefix.” – read VENDORS USING COMPETING PREFIXES @

    IE filters were not a method of implementing future syntax still in development, they are solidified proprietary features built to only work with IE. Any browser could choose to adopt -webkit-opacity: but not the IE filter for opacity, this is a huge difference. IE filters are not CSS.

    Stop complaining and start doing. Connect the dots as Trent has asked you to do.

    PS: = most disappointing article on smashingmag ever.

  7. 307

    @dkardys — I sincerely hope you follow your own advice, and are not using CSS at all. Since IE6 doesn’t fully support CSS (and I mean *any* version of CSS) the position you advocate requires you not to use any version of CSS at all.

    Didn’t think so.

    In many ways, web development is like teaching. For example, every teacher has to plot a course between holding back every student in the class to the pace of the slowest student and leaving some students behind. The good teachers manage to give the faster students something to work on while spending some extra time with the slower ones.

    That’s web dev. You don’t punish the folks who choose to use good browsers by making their experience look and feel like IE6. You toss them bits their browsers can use to make their experience better, while making sure the rest of the class gets the best their tired old browsers can handle.

  8. 358

    Ummm… Well yeah if you’re looking at it from only using CSS3 trickery for everything then yeah you’ve automatically limited yourself to a small % of screens out there. But I believe the true gist of the thing is that CSS3 can be used to add a little extra “special sauce” for those users who’s browsers can handle it and then you design to gracefully degrade and still provide a great UX for everyone else.

  9. 409

    @dkardys – thankfully humanity as a whole doesn’t have the limited vision described in your reply lest we’d still be living in caves scraping out whatever meager existence we could.

    As web developers we must constantly push the envelope while still maintaining an excellent UX for all users. Well all users within reason, I personally do not support any version of IE less than 7 anymore in my projects or in the projects I design/build for my employer.

    Innovate or die – that’s how Dad did it, that’s how America does it, and it’s worked out pretty well so far.

  10. 460

    Victoria, I’d prefer to say my way of thinking is practical. I agree with most of your principles, but the people who pay my salary (and I suspect the salaries of many other designers and developers) subscribe to the “outdated thought” that a website should look and behave consistently across browsers.

    I know that developing for the lowest common denominator is too restrictive, but I also know that developing to take advantage of capabilities that aren’t widely supported would mean attempting to further educate employers on browser differences when they really don’t want to learn—they want it to Just Work™ (and they’ll be quick to measure CSS3 development as an expense against its impact for a rather small, albeit growing, audience segment).

    The article paints a great picture of what can be achieved with a little experimentation and how we can give a little extra to the users with browsers that can support it. However, if we want the web community to embrace these techniques, I think we need articles that describe implementation in terms of problem solving (to be clear, I mean “in addition to,” not “instead of,” articles about experimentation).

    I suppose we could also ask for more articles on how to effectively “push people to start using the latest technologies”—perhaps that’s what you’d advocate? I know I would need a technique besides implementing CSS3 with little graceful degradation: as I wrote, I can’t easily sell my employers on that. And, I suspect there are many users who don’t have a browser choice, no matter how we push.

    And, I very much want the web community _at large_ to embrace CSS3. I’m ready to move beyond the sentiment that “HTML5/CSS3 is currently for personal/experimental sites”—and, when you write, “today is the day,” I know you agree.

    Let’s say I have a design problem to solve. Let’s say the solution involves animation. Having read this article, I know I can implement it elegantly with CSS3 (for the few browsers that support it), and I’m excited to do so, but I still need a solution for everyone else. Don’t tell me I shouldn’t; it’s not a choice, I do need that solution. And, I want to implement that non-CSS3 solution in a way that can easily be peeled off or updated as more users update their browsers.

    Yes, I did answer my own question in a rather vague way (“using JS”). And yes, I could fill in the specifics myself, designing so my “web site still functions and looks nice in a non-webkit browser.” Most of us could, to varying degrees of success.

    [rant] Further: yes, we could keep these techniques to ourselves so everyone has to develop their own solution. Why? Because, apparently, if one of us suggested someone write an article about it and open it up for discussion and evolution within the web community, we would be told our way of thinking is all wrong! :P [/rant]

    That’s more to my point: Smashing Magazine, in addition to showcasing the latest experiments and inspiring us, is, I think, one of the places where I can learn from what others have done. I hesitate to write “best practices,” but will write that the web community benefits from more specific advice than “use JS,” and can then test, debate, and evolve the solution to a “better practice” than what I could come up with on my own.

    Smashing Magazine, the article is great and inspirational. Please empower those of us in the web community who have clients and bosses, who have users with outdated slacking browser technology, make today the day we use CSS3. I repeat: please help us by following this article up with strategies that get us closer to an acceptable cross-browser implementation.

  11. 511

    Plain and simple, this article wasn’t about cross browser implementation, you’re missing the point. Your argument makes it sound like you want smashing magazine to tell you how to provide services to your clients equally so your boss won’t be upset.

    Be creative, if your project absolutely needs an animation, obviously css3 isn’t the solution. I don’t think Trent presented it that way.

    This article was meant to inspire creativity and thinking, not please show me how to do these things without css3. Please try to see the bigger picture here.

  12. 562

    Truth! We need more people doing experiments like these around some of the racier css3 properties.

  13. 613

    I believe @dkardys is being sarcastic. Did no one else notice sarcastic undertones?

  14. 664

    Why nobody not use outline:none; to remove dots on linked objects when it’s clicked?

  15. 715

    Yeah unfortunately that is the most optimistic view you can take on it, I know code specific web dudes feel that as long as it functions it is okay. But for more graphic design oriented web guys its like a slap in the face that your hard work will only appear correctly for a small percentage of people. If it doesn’t appear right, it isn’t functioning.

  16. 766

    Mohammad Raihan Mazumder

    May 29, 2010 2:18 am

    Dat’s nice info for do design in WEB!

  17. 817

    @alan – I totally understand your point, but my point was that if you design with CSS3 as a requirement then yes your design is going to look like yesterday’s dog food on a non-capable browser. Good design is good design and should be able to stand on the standards that are available to 70%+ of the browsers out there, again I see the CSS3 stuff as icing. I personally wouldn’t use the animation features in CSS3 as I agree with several others that animation is not styling. Instead I’d reserve that task for jQuery or another similar JS library.

  18. 868

    I’ve done this with the knowledge shared in this article:

  19. 919

    i agree with james, atleast firefox should be compatible for all this…..

  20. 970

    I think the techniques shown in this article are a little bit edgy, in that they mostly work only on webkit browsers, i’d rather suggest this article, focused on more basic css3 properties, already working in most bowsers:

  21. 1021

    I’ll implement some of them, and invent others by myself.

  22. 1072

    Interesting. I enjoy designing with CSS and I actually just bought a book on CSS 3. I can’t wait until most of the browsers support. I am going to try and use the new css3 on my site good post thank you.

  23. 1123

    Great post with nicely explained examples.Very much interested in having a hands on experience.Much eager to watch out the race between CSS3 and UI frameworks.

  24. 1174

    Hi! Thanks for the very thorough and interesting post. I found it concise and easy to digest; in a world where it’s easy to be confused by all the new features and combinations thereof. Thanks again, DC

  25. 1225

    even Firefox 4 doesn’t work with CSS3


↑ Back to top