Connecting The Dots With CSS3

Advertisement

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? Link

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 Link

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.

Screenshot1

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;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}

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.

Screenshot4

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

Examples Link

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.

Screenshot7

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

Screenshot9

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

screenshot11

DesignSwap12
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.

E2A17

Example #2: Background Clip Link

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">
<h3>kablamo!</h3>
</div>

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

Examples Link

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

Neography24
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.

EveryDayWorks27

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 Link

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.

332

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"/>
</div>

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

Examples Link

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.

Colly41

Example #4: CSS3 Animations Link

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"/>
</div>

442

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% {
margin-top:0px;
}
25% {
margin-top:150px;
}
50% {
margin-top:150px;
margin-left: 300px;
}
75% {
margin-top:0px;
margin-left: 300px;
}
100% {
margin-left:0px;
}
}

View the live example here43

Examples Link

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

Optimum748
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.

optimum7_animation50

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? Link

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 Link

You may be interested in the following related posts:

Footnotes Link

  1. 1 http://trentwalton.com/css3/connecting_the_dots
  2. 2 http://webkit.org/blog/138/css-animation/
  3. 3 http://trentwalton.com/css3/connecting_the_dots
  4. 4 http://trentwalton.com/css3/connecting_the_dots
  5. 5 http://trentwalton.com/css3/connecting_the_dots
  6. 6 http://teamexcellence.com
  7. 7 http://teamexcellence.com/
  8. 8 http://www.ackernaut.com
  9. 9 http://www.ackernaut.com/
  10. 10 http://simplebits.com
  11. 11 http://simplebits.com/
  12. 12 http://design-swap.com
  13. 13 http://design-swap.com/
  14. 14 http://jackosborne.co.uk
  15. 15 http://jackosborne.co.uk/
  16. 16 http://esquareda.com
  17. 17 http://esquareda.com/
  18. 18 http://trentwalton.com/css3/connecting_the_dots/#2
  19. 19 http://trentwalton.com/css3/connecting_the_dots/#2
  20. 20 http://trentwalton.com/css3/connecting_the_dots/#2
  21. 21 http://trentwalton.com/css3/connecting_the_dots/#2
  22. 22 http://trentwalton.com/css3/type
  23. 23 http://trentwalton.com/css3/type
  24. 24 http://neography.com/experiment/type1/
  25. 25 http://neography.com/experiment/type1/
  26. 26 http://www.everydayworks.com/?p=318
  27. 27 http://www.everydayworks.com/?p=318
  28. 28 http://www.panic.com/blog
  29. 29 http://www.panic.com/blog
  30. 30 http://sam.brown.tc/
  31. 31 http://sam.brown.tc/
  32. 32 http://trentwalton.com/css3/connecting_the_dots/#3
  33. 33 http://trentwalton.com/css3/connecting_the_dots/#3
  34. 34 http://butterlabel.com
  35. 35 http://butterlabel.com/
  36. 36 http://www.hope140.org/endmalaria
  37. 37 http://www.hope140.org/endmalaria
  38. 38 http://forabeautifulweb.com
  39. 39 http://forabeautifulweb.com/
  40. 40 http://colly.com/
  41. 41 http://colly.com/
  42. 42 http://trentwalton.com/css3/connecting_the_dots/#4
  43. 43 http://trentwalton.com/css3/connecting_the_dots/#4
  44. 44 http://www.hope140.org/endmalaria
  45. 45 http://www.hope140.org/endmalaria
  46. 46 http://hardboiledwebdesign.com
  47. 47 http://hardboiledwebdesign.com/
  48. 48 http://www.optimum7.com/css3-man/animation.html
  49. 49 http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html
  50. 50 http://www.optimum7.com/css3-man/animation.html
  51. 51 http://themanyfacesof.com/four-oh-four/rickman.html
  52. 52 http://themanyfacesof.com/four-oh-four/rickman.html
  53. 53 http://trentwalton.com/2010/03/22/css3-in-transition/
  54. 54 http://trentwalton.com/2010/03/22/css3-in-transition/
  55. 55 http://css3.bradshawenterprises.com/
  56. 56 http://carsonified.com/blog/design/sexy-interactions-with-css-transitions/
  57. 57 http://sixrevisions.com/css/examples-of-css3-in-the-wild/
  58. 58 http://samuli.hakoniemi.net/css3-transitions-are-we-there-yet/
  59. 59 http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/
  60. 60 http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
  61. 61 http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
  62. 62 http://www.smashingmagazine.com/2010/05/20/web-design-trends-2010-real-life-metaphors-and-css3-adaptation/

↑ 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 TheManyFacesOf.com.

Advertisement
  1. 1

    interesting. Thanks

    0
  2. 2

    Very nice CSS Three overview Trend, but you missed this CSS Tranistion – Image Gallery ( sliding content without JavaScript).

    0
  3. 3

    The thing I love most about some of these examples is their subtlety, and the fact that, without them nothing’s changed except the smallest detail. For example, the ease of adding a fade effect to ALL links on your site with one line of CSS (this will change when other browsers catch up), is amazing! And it means that all browsers will have the hover change, some browsers will have that “extra special” effect. Progressive enhancement at it’s best.

    1
  4. 4

    Excellent tutorial on some of the new CSS3 things coming along, expecially love the border transition.

    0
  5. 5

    Great article! We’re also using several CSS3 techniques for hovers on our new homepage

    0
  6. 6

    Gerwin Janssen

    May 27, 2010 3:34 am

    Last week I have made a ROFL COPTER animation in HTML5 and CSS3.
    Check it out! http://www.webtuts.nl/ Don’t forget to ReTweet!

    0
  7. 7

    I notice the use of the new Google Font API there.. nice. Did I just notice it now or has it been in use for a while?

    0
  8. 8

    This was a very interesting read. I’m coding a HTML5/CSS3 Website right now. Well I’m thinking about it. Your tipps come pretty handy.

    0
  9. 9

    Smashing Editorial

    May 27, 2010 4:15 am

    We’ve been using Google Fonts API for a while now. :-)

    0
  10. 10

    Excellent stuff.. CSS3 yet to gain popularity among web designers, coz of the compatibility issues.. I loved all the stuff written in this post specially the background clip and shadow property. These will be very handy in future.

    Thanks

    0
  11. 11

    Jesse @Everydayworks

    May 27, 2010 4:48 am

    Trent,

    Great post. Thanks for linking to me.

    It’s nice to see a collection of simple CSS 3 techniques that enhances a design and makes it less boring. These little tweaks applied to a site design can really make it interactive without the use of animation tools.

    0
  12. 12

    What browser are you testing in? I’m using firefox 3.6, and none of your effects are working.

    0
  13. 13

    Raphael Pudlowski

    May 27, 2010 5:05 am

    every web designer must be aware that many of these features don’t work ewerywhere, and look different on different web browsers.
    As for making an animation (like spiderman), it’s of the level flash animations was at their beginning, without the vector scalability :) And i don’t even mention that you have to code all by hand (no timeline, objects ect…) So no, don’t push css3 and html5 in a way where it shouldn’t be used…

    0
  14. 14

    I’m with Josh, I’m using Firefox 3.6.3 and I don’t see any transitions? What browser and OS are you using?

    0
  15. 15

    @Josh & @Brad, These properties are currently only fully supported by -webkit browsers like safari or chrome. Sorry for the confusion. I’ve covered this a bit in the first 3-4 paragraphs of the article. Thanks for reading!

    0
  16. 16

    @Josh & Brad: CSS Tranistion for example will be surported by the Firefox-Version 3.7

    0
  17. 17

    I believe these transitions, being webkit, will only work in Chrome and Safari. So those of you using Firefox, they won’t work quite yet.

    0
  18. 18

    Great post. I plan on using some transition effects for my social media icon links.

    0
  19. 19

    same thing here..

    0
  20. 20

    I’m having the same problem as Josh has. Viewing it in Chrome 4 works beautifully, but not in FFox 3.6 or IE 8. Great post, thank you.

    0
  21. 21

    I really dislike the -o, -moz, and -webkit prefixes and duplicates in most CSS3 examples. This is not the way of how CSS should be typed (off-standards) and remind me of the scrollbar features from IE (oh it only works in ‘my browser’).

    0
  22. 22

    Very cool post, Trent! Thanks for leading the way in the use of CSS3.

    1
  23. 23

    Very interesting.. bookmarked!

    0
  24. 24

    While I do think these effects are very, very cool, I cannot even begin to use them if they do not work in Firefox 3.6. I cannot assume that most users even have the updated version of Firefox!

    0
  25. 25

    It’s a great article – and there are some excellent resources – but unfortunately this is something that for the most part will see little use.

    While gradual enhancement is a great idea at first, it just means that there’s more code to maintain – especially as more browsers support their own versions. Imagine having to maintain the keyframe animation if there was a -moz equivalent, and then a standard CSS one! No thanks.

    Unfortunately, this article only serves to highlight (for me anyways) the horrible support for CSS3 that’s out and about now. I look forward to the day when browsers are more equal in their capabilities, and there’s less duplicate code to maintain.

    0
  26. 26

    Yeah I am surprised they don’t work in Firefox yet, I never really pay attention to CSS3 because I know Microsoft won’t be on board for another decade or so, but I always assumed it all worked on Firefox until I checked this article out.

    0
  27. 27

    Most of these effects don’t play nice with anything but webkit (Chrome, Safari).

    0
  28. 28

    Great post, so excited about CSS3, just need browser support and the web will change very quickly.

    Webkit – why anything else!

    0
  29. 29

    Perhaps the code examples will be enough to get these effects across different browsers someday, but not today. I would like to see what we have to do today (and I’ll be eager to trim the solution back down to this simple and clean syntax when the browsers catch up!).

    That is, I’d like to see a follow-up article detailing how to implement some of these effects (using JS, maybe even Flash) for browsers that don’t support these CSS3 properties, kind of a blend of this article and http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ but also covering Firefox 3.6. I know not every effect is possible in every browser, but recommendations for graceful degradation / progressive enhancement would be useful. You’ve shown us what can be done for the bleeding edge browsers, please help us fill in the picture with a cross-browser solution and I bet we’ll see more people implementing these techniques sooner!

    0
  30. 30

    This is an excellent article, Trent. Very inspirational.

    0
  31. 31

    Great article. I’m on the boat with most everyone that a lot of these techniques won’t be seen by many users/maintaining the code over time could be tedious. Yet I love to see people are willing to explore new methods. This is how we get innovation. If everyone was afraid to try something new, we would never make progress. I think the best thing about these techniques is a lot of them can be used right now, and if you clients browser doesn’t support one of the techniques, it really doesn’t take away in basic usability. It’s cool to see what can be done, yet it doesn’t really hurt anyone if in chrome your links fade in and out and in firefox 3.6 they don’t fade. Though I cant wait until CSS3 is more widely acceptable and all major browsers support it. I played around a little bit with the webkit-transition effect to change a background. It works fine on a solid color, and images, yet lately I’ve been using webkit-gradient to create a css based gradient for the background on some links. I wasnt able to get the transition effect to fade between two different instances, (a and a:hover) I have the webkit-gradient background set. Any thoughts?

    0
  32. 32

    So this only works for 2% of the web users. Isn’t that great.

    -1
  33. 33

    Now if Mozilla, IE, Opera, etc. would start supporting these, life would be great.

    0
  34. 34

    is something suppose to be happening? None of the sites are doing anything, epic fail!

    0
  35. 35

    Did I miss the point? How is this CSS3? Oh, wait – it is not. It’s Browser specific. Sure, nice effects, but please point the rub:

    1. It’s not CSS3. -moz and -webkit are browser-specific hacks. So, don’t sell it as CSS3
    2. Your CSS won’t validate.
    3. IE-users won’t see any of it, so cut at least 50% of the share. Probably more.

    So, please tell me. How is this better than the IE-filters ten years ago?

    0
  36. 36

    I agree that above mentioned css3 tricks are very cool and effective. But they are browser specific, in other word they are not supported to IE Browser and most of users use IE to visit the websites.

    So, what is the solution of this?

    Again, I very happy to read these article, but we have to find out the solution of browser compatibility. Otherwise css3 will not be popular.

    0
  37. 37

    Very useful. Thanks for sharing this!

    0
  38. 38

    Sasha dal Ponte

    May 27, 2010 11:21 pm

    I don’t see the need for so many “standards”… Why browser programmers can’t come up with ONE standard that will be used and supported for all.

    This way it’s just pain in the a@@ for us web designers…

    0
  39. 39

    Since browser support is but slowly catching, CSS3 is a perfect candidate for graceful degradation, i.e. a design that uses as many cool features as possible but just works in all clients.

    0
  40. 40

    at “Eric E. Anderson” menu changed not as written and shown in image
    check online

    0
  41. 41

    Word up to the critical minds above!
    As the css properties say (-webkit-…) they won’t work in IE or even gekko browsers. I cant see any of these css 3 features in my firefox (on mac). For shure it looks fine in in Safari … but dead ugly in others … so what? Don’t believe the hype!

    0
  42. 42

    Imho, we should focus only on functionalities working on ie7+.
    In a couple of years ie6 will be near to 0%

    0
  43. 43

    Utilize a browser that supports CSS3 (Chrome, Opera)

    0
  44. 44

    Great tips ;) But a bit too basic ;)

    0
  45. 45

    Actually, most FF3 user will update, as it’s extremely easy to do so. And FF nags you a bit until you do.
    IE users on the other hand…

    0
  46. 46

    Now if only Chrome could work on the “jaggies” and support image profiles…

    0
  47. 47

    Because the -moz and -webkit properties have a real chance of becoming full CSS modules, just look at border-radius. And you’re wrong about these not being part of CSS3, see http://www.w3.org/TR/css3-background/ for background-clip and box-shadow for example.

    0
  48. 48

    A lot of confused comments. Let me clarify ;-)

    @Seb: CSS properties prefixed by -webkit-, -moz-, -ms-, -khtml- or -o- are experimental. They are subject to change and are usually being worked on by the CSS Working group, hence there is a need to use prefixes. But they are probably going to be part of a CSS 3 module and are thus not proprietary.

    Remember: Nobody should rely on experimental features!

    As for browser support. There are way too many examples on the web using webkit only prefixes, where there are equivalent implementations in Firefox (and Opera) as well, especially for transitions and gradients.

    If you do a demo, please remove Webkit from arse and Google around a bit and find the equivalent feature in Firefox or Opera! And please don’t link to old demos, that were made before Firefox 3.6 and the latest Opera were released.

    The one thing that Webkit has and nobody else so far is keyframe based animation. The CSS WG is working on drastic changes to the syntax (just like they did for gradients). I am working on moving this feature from CSS to the DOM: http://itpastorn.blogspot.com/2010/04/why-declarative-animation-should-be-in.html

    0
  49. 49

    Sorry for being the dumbass that didn’t read the whole article…

    0
  50. 50

    So, I think aside from all the it doesn’t work in my browser (that’s because for the purposes of the demo it’s easiest to do it for one browser, if you want change the browser specific part to your browser of choice, you do code out the demos on your own machine right?) my only problem with some of the CSS3 features is that they leave the realm of style.

    Most of the uses we’ve seen for the transitions and animations using CSS3 are very much behaviour or proper animation and should be done using behavioral tools or in an animation tool (which would then make the animated object a piece of content, moving it into the HTML via Object, Canvas or Video tags). Rotated content and background clipping is perfectly fine as style. And I’m not opposed to animations within CSS. But animation is not style.

    0

↑ Back to top