You Can Use CSS3 Right Now

Advertisement

CSS3 makes a designer’s work easier because they’re able to spend less time hacking their CSS and HTML code to work in IE and more time crafting their design. It is the future of web design and can be used today.

This article will hopefully show you to care a little less about making everything pixel perfect in IE. It will inspire you to spend more time making your designs exquisite in the rest of the browsers while serving up a working and perfectly accessible website for IE.

From the examples below, you’ll see that CSS3 will make cross-browser support easier to accomplish and help you get websites out the door faster, assuming you’ve accepted that websites do not have to look exactly the same in each browser. The actual use of CSS3 comes down to one word (and I’m pretty sure it’s not even a real word): Modernizr1.

Box Shadows

View the demo2 | Final Code3

If you want a section to stand out above the rest of the page, you could put a drop shadow behind it. This will give it a 3D look and naturally attract your viewer’s eye.

Drop shadows using images can take some complicated and inflexible code4 to tame. The box-shadow CSS3 property enables you achieve the same effect in one line of code.

Speaking of code, here is the HTML for this example:

<div id="shift">
  <h4>Shift In Thinking</h4>
  <blockquote>
    <p>It's okay if a design looks slightly different in one browser than it does in another. Once the designer and decision makers accept this, and <strong>embrace</strong> it, it's then that the concept of progressive enrichment can be fully leveraged.</p>
  </blockquote>
  <p class="author"><a href="http://handcraftedcss.com"><strong>Handcrafted CSS</strong> by Dan Cederholm</a></p>
</div>

We want that div to have the box shadow. Let’s flex our CSS3 muscles:

div#shift {
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}
/* Information on the syntax at https://developer.mozilla.org/En/CSS/-moz-box-shadow */

Well that was easy. We’re done right?!

Not quite. In an ideal world, that would be all we need. No current browser supports that rule alone so we need to add a couple more:

div#shift {
  -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
  -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

Those extra rules target the only browsers that currently support box-shadow: Firefox 3.5 and Webkit browsers like Safari and Chrome.

So let me get this straight. You’re targeting only a small number of browsers. What about IE?

That’s where Modernizr5 steps in. Modernizr is a JavaScript file that, when loaded on your page, adds classes6 to the html tag in your code. It will add these classes based on what the viewer’s current browser supports and doesn’t support. For example, if the viewer’s browser can use box-shadow, it will add the class ‘boxshadow’ to your page. If it can’t, Modernizr will add the class ‘no-boxshadow’.

How do we make that work in our example?

Modernizr allows us to confidently declare a backup styling for older browsers that don’t support CSS3′s box-shadow. This plays perfectly into the hands of graceful degradation.

We’ll declare an alternate style for lesser browsers:

div#shift {
  border: 4px solid #bbb;
  border-left: 0;
  border-top: 0;
}

.boxshadow div#shift {
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
    border: 0; /* don't forget to get rid of the border too */
}

First, we tell the browser to put a light grey border on the right and bottom of the div. This will give the illusion of a drop shadow. We write this rule first because that is the worst case scenario. If the viewer’s browser doesn’t support box-shadow or doesn’t have JavaScript turned on, they’ll get the grey border. If it does support box-shadow, Modernizr will add the ‘boxshadow’ class to the html tag and the second set of styles will be used.

Look at the results:

Webkit

Webkit screenshot showing the box-shadow working

IE6

IE6 screenshot showing the box-shadow not working

Is the difference noticeable? Yes.

Do your visitors check your site out in different browsers to see how the designs compare? Not likely. The only one that does that is you.

Rounded Corners

View the demo7 | Final Code8

Rounded corners used to be tricky business. With the CSS3 border-radius9 property, your design’s need for smooth corners just got easier.

How much easier though?

Try one line of code easier (well almost…). Here’s the HTML:

<div id="cool-kids">
  <h4>CSS Is Cool Again!</h4>
  <blockquote>
    <p>CSS has never been more exciting than it is right now. I’m even prepared to say CSS is “cool” again, both for the more experienced front-end developers as for the new designers discovering CSS every day now.</p>
    <p>But&hellip;</p>
    <p>Remember when Javascript became popular? Remember when Flash became popular? Every time we’re been given new toys, some people aren’t ashamed to use it in a way you can barely call constructive. I’m thinking of Geocities websites, loaded with glowing blocks of text, moving images, bad color usage… In the wise words of Stan Lee: With great power there must also come great responsibility! A sprinkle of CSS animations is better than a bucket load. Apply with care.</p>
  </blockquote>
  <p class="author"><a href="http://24ways.org/2009/css-animations"><strong>CSS Animations</strong> by Tim Van Damme</a></p>
</div>

Now sprinkle on the CSS:

div#cool-kids {
  background-color: #D9DBE6;
  padding: 30px;
  border-radius: 20px;
}

Unfortunately, that doesn’t work quite yet. Only nightly builds of Webkit10 and Opera pre-alpha11 support border-radius out of the box. I’ve never seen a client actually use a Webkit nightly build and the only visitors that will use it probably are web designers. We’ll need to add a bit of extra CSS for the rest of us:

div#cool-kids {
  background-color: #D9DBE6;
  padding: 30px;
  -khtml-border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; /* Sam Brown's bulletproof rounded corners http://sam.brown.tc/entry/412/bulletproof-rounded-corners-with-border-radius */
}

Those three extra rules target specific browser rendering engines. Until the CSS3 modules12 are finalized, we’ll have to use those extensions of the border-radius rule. Don’t worry because they all use the same syntax. It’s inconvenient at worst to duplicate code, but still better than the image-based alternative.

What about IE?

To be frank, nothing in your layout is going to break if IE displays straight corners. The chances of a viewer poking their eye out on one of your sharp corners is very slim, so stop worrying about it. If you really want IE support, be my guest13. You’ll need to use images, complicated CSS and extra markup.

RGBA

View the demo14 | Final Code15

RGBA is another way to declare a color in your CSS. The A stands for Alpha transparency. You can make the color partially transparent by adjusting that value, much like how the “opacity” slider works in Photoshop. If you want more information on what an RGBA color is, read through Working With RGBA Colour16. (Take notice of how that blog’s design uses RGBA colors too)

How can I use RGBA in my designs?

Let’s start with some HTML code, shockingly similar to our other examples:

<div id="ignorance">
  <h4>Ignorance is Bliss</h4>
  <blockquote>
    <p>That’s because in the real world, people using the Web don’t find a Web site that they like, then open up another browser to check that it looks they same. They simply buy what they came to buy, read what what they came to read, do what they came to do, then get on with their lives in blissful ignorance of what they might be seeing in another browser.</p>
  </blockquote>
  <p class="author"><a href="http://24ways.org/2009/ignorance-is-bliss"><strong>Ignorance is Bliss</strong> by Andy Clarke</a></p>
</div>

We want to make the div‘s background color semi-transparent so it shows though a little of what is behind it.

div#ignorance {
  background-color: rgba(76,157,11,0.55);
}

Essentially, the only web browsers that don’t support17 RGBA color are Opera and Internet Explorer (go figure). We’ll need to add a backup for them:

div#ignorance {
  background: #9BC772; /* A color sample of the RGBA color from the demo with a background pattern*/
  background: rgba(76,157,11,0.55);
}

What we’re saying to the browser is this: use the hex code, and if you understand what RGBA is, use that instead. IE and Opera will safely ignore the RGBA color and display the hex color. We have to use the background shorthand property because IE won’t properly pick up the background color if we just use background-color.

What’s the point in using RGBA if not everyone is going to be able to see it?

As it stands right now, IE and Opera won’t see any of the alpha transparency goodness that makes designs like 24ways18 stand out. What if we made the background a semi-transparent PNG instead of a flat color?

div#ignorance {
  background-color: #9BC772;
}
.rgba div#ignorance {
  background-color: rgba(76,157,11,0.55);
}
.no-rgba div#ignorance {
  background: url(images/green-55.png);
}

Here’s what’s happening above:

  • Every browser starts off with a flat background color. This is the worst case scenario and the design will still look alright with the hex color. This will work even with JavaScript turned off.
  • If Modernizr adds the ‘rgba19‘ class to our page, we’ll use the RGBA version of our color we want.
  • If our browser isn’t RGBA compatible, Modernizr will add the ‘no-rgba’ class. We can style the background using a beautifully simple alpha transparent PNG20 instead of a color so browsers like IE and Opera still get that little extra, or the design equivalent of jazz hands.

What Now?

Using a combination of Modernizr and CSS3 properties, we made the design look beautiful and still remain backwards compatible.

There’s no reason you can’t do the same with your client and personal projects. Design for the best browser available and make the design work for lesser browsers; not the other way around.

I don’t want to hear you say “I’ll use this when it works in IE” one more time. Thanks to Modernizr, that isn’t a valid excuse anymore. What other uses of Modernizr and CSS3 can you think of to make your life easier?

Footnotes

  1. 1 http://modernizr.com
  2. 2 http://kevinholesh.com/sandbox/css3-now/shadow
  3. 3 http://kevinholesh.com/sandbox/css3-now/shadow.txt
  4. 4 http://www.alistapart.com/articles/cssdropshadows
  5. 5 http://modernizr.com/
  6. 6 http://www.modernizr.com/docs/
  7. 7 http://kevinholesh.com/sandbox/css3-now/corners
  8. 8 http://kevinholesh.com/sandbox/css3-now/corners.txt
  9. 9 http://www.w3.org/TR/css3-background/#the-border-radius
  10. 10 http://webkit.org
  11. 11 http://labs.opera.com/news/2009/12/22/
  12. 12 http://www.css3.info/modules/
  13. 13 http://www.devwebpro.com/25-rounded-corners-techniques-with-css
  14. 14 http://kevinholesh.com/sandbox/css3-now/rgba
  15. 15 http://kevinholesh.com/sandbox/css3-now/rgba.txt
  16. 16 http://24ways.org/2009/working-with-rgba-colour
  17. 17 http://css-tricks.com/rgba-browser-support
  18. 18 http://24ways.org/
  19. 19 http://www.modernizr.com/docs/#rgba
  20. 20 http://kevinholesh.com/sandbox/css3-now/images/green-55.png

↑ Back to topShare on Twitter

Advertising
  1. 1

    Amazing post! Thanks for sharing.
    .-= Antonio´s latest Blog Entry – Optimize your wordpress blog for search engines =-.

    0
  2. 2

    Wonderful Post.
    Though all the browsers doesn’t support CSS3, It is the right time to explore CSS3.
    It’ll become standard soon..
    Very useful.
    Thanks
    :)

    0
    • 3

      Yes, I definitely agree with that. The earlier we start using it, the more we’ll perfect it and by the time it becomes standard, we already have the advantage over those who will just start learning it.

      0
  3. 4

    Great post, and it really covers all bases on what needs done in your CSS for it to work right.
    .-= Alan´s latest Blog Entry – Services =-.

    0
  4. 5

    Sweet post, though CSS3 is not only about shadows, rounded corners and alpha colours, right? What about pseudo classes, selectors, transformers, etc.

    Also, it seems that we’ve been using these styles (except rgba I think) quite some time ago, and why do you need this Modernizr? I mean why bloat your page with javascript for browser detection if you could simply load an extra stylesheet for IE that would override certain classes? As far as I know all browsers are compatible with the CSS !important, so why not use it?

    ~ @kovshenin
    .-= Konstantin´s latest Blog Entry – Short Note About HTML Anchor Bookmarks =-.

    0
    • 6

      I agree with you. Unfortunately we just scratched the surface of what CSS3 can do and for many of the new properties and functions (you mentioned selectors and pseudo classes, etc.) there exist no easy workarounds for browsers without support.

      Even certain CSS2.1 pseudo-classes don’t work properly in IE6 (first child, hover), but I’m all for the usage of CSS3 where it is possible and appropriate fallbacks are available.
      I’m currently using some CSS3 on almost every new site I create, mostly things like border-radius, text- and box-shadow, transitions (even if its only supported by Safari and Chrome), @font-face (which actually works in every current browser) and even gradients. I’m usually not adding any special styles for browsers without support (e.g. IE users just won’t see the shadows, rounded corners, etc.), but if so I would definitely go with your method and specify a separate stylesheet for Internet Explorer rather than using javascript.

      Great article anyway, thanks for sharing.
      .-= ximi´s latest Blog Entry – Beautiful Photoshop-like Buttons with CSS3 =-.

      0
    • 7

      I agree with you. I only did simple things with Modernizr on purpose to relate to stuff we’re hopefully familiar with by now.

      Modernizr really goes beyond CSS3 and into HTML5, which is a huge reason I use it. It not only changes how I style sites, but also mark them up. If I were trying to support IE in a similar way as I did above, an IE-specific style sheet would definitely be the way to go.

      0
    • 8

      Modernizr author here..

      I’d say border-radius is a pretty easy one. Everyone supports it fine except IE, so if you wanted to handle that case in an IE-only stylesheet, that works..
      But RGBA? There’s no straightforward way to have an opera & internet explorer stylesheet.
      CSS Transforms? A stylesheet that only works in Firefox 3.6+, Safari 4, Chrome and Opera 10.50? Less easy.

      Basically you reach a point where it’s not scalable to keep manually targeting supporting browsers. You also need to keep track of what is supported in each browser yourself. Not easy.

      The other thing that Modernizr helps a lot with is handling the case where there ISNT support. A lot of css3 degrades fine. An older browser just ignores it, but if you want something special to happen (like kick off some javascript as a fallback) then Modernizr provides hooks for your handling of browsers lacking support.

      0
  5. 9

    Good post that covers good (present) cross browser compatibility.

    Although it is good to be exploring this new standard, it should be pointed out that it still isn’t finished / finalised, and would use on major projects with caution. Same goes for HTML5.

    You can follow the progress of all proposed and finalised standards for CSS3 here:
    http://www.w3.org/Style/CSS/current-work

    0
    • 10

      Thanks for sharing that link Branny.

      Yes, we know that it still isn’t finalized but it definitely is nearing completion. Also, that’s why the use of Modernizr. :)

      0
  6. 11

    When we say CSS3, first we think about IE. I think that designers should use as many CSS3, and should not be adjusted at any cost to IE. It’s time that Microsoft is finally move in step with the times…

    Nice post! Keep it like this! Cheers!

    0
    • 12

      Awesome Article, yeah am totally agree with you. We shouldnt care for IE at all.

      0
    • 13

      I think we should still “support” IE, but not to the same extent as we do modern browsers.

      I define support for IE as making sure the page looks alright. The branding will be there, the color scheme and layout are mostly the same, the content is still completely accessible, etc.

      I will support IE and still browser-test in it, but it will not be a pixel-perfect replica of how a Webkit browser renders the page.

      0
      • 14

        Of course we still must take care that the design looks in IE (almost) like in other browsers.

        What I wanted to say is that we do not have to watch every detail to be shown in IE as in other browsers, which includes use of IE hacks.

        0
      • 15

        Milos, while I agree with you that compromises should be made with IE, we must remember that it’s not Microsoft we’re punishing, only our users.

        0
      • 16

        how do u communicate that to your clients? how do you tell them that the design won’t look as good on IE8 as on a ‘webkit browser’?

        0
      • 17

        Well, you can explain to them that browsers aren’t all made the same and they work just a bit differently. You definitely don’t have to use technical jargon though, that will just confuse them even more.

        0
  7. 18

    Great post on what CSS 3 brings in terms of visual enhancements.

    I think IE support has become an “enjoyable challenge” for designers to overcome (although many would deny this) even if the actual practicality behind supporting IE is slowly fading away as more modern browsers emerge.

    A very comprehensive post nevertheless!
    .-= Josh´s latest Blog Entry – Content-Driven Design – Let’s Throw out Tradition =-.

    0
    • 19

      I know what you mean Josh. But that was before, it was a little enjoyable but also, sometimes, it can just be downright annoying when you are trying to fix a bug and you just can’t find a solution to it.

      0
  8. 20

    Very informative! It’s time to bother less on IE, thanks for introducing to Modernizr.
    .-= Arjun Phlox´s latest Blog Entry – » Teach Every Child About Food =-.

    0
  9. 22

    This is great, been wanting to make the jump to learn some CSS3 techniques and this tut does that wonderfully!!!
    .-= Acuity Designs´s latest Blog Entry – How do your organise yourself as a freelance designer? – Part 2 =-.

    0
  10. 25

    Very informative article, wise words. I love the power of CSS3!

    0
  11. 26

    The post is nice, but I still don’t see a valid point in turning to CSS3 yet. If you are ignoring the IE (all versions) users, you are leaving out almost 80% of the users, which is definitely not the best thing to do.

    In my 5 years of Freelancing, I have never had one client say, leave IE (6,7,8). Infact, they themselves are IE users. Hence, I would never agree to the point that we can start using CSS3 until and unless all browsers start supporting it.
    .-= Sonali Agrawal´s latest Blog Entry – Impress Client with Dazzling Mockup =-.

    0
    • 27

      If you are making a site that will be used by 80% IE users, it might be worth your time to make it look pixel perfect in all browsers.

      However, I’ve never designed a site to be used by more than 50% IE users, so that number is relative to each specific project. With at least 50% of my viewers in modern browsers, I always take my time to make sure they have the best experience possible using design effects they might not normally see in a site designed to the lowest common denominator (IE).

      0
  12. 30

    Very nice! I have been using CSS in my sites to progressively enhance for users with better browsers for a while now. You can achieve some really interesting things with it, coupled with HTML5 we have an incredibly powerful set of tools on our hands to build the next generation of websites.
    .-= Codesquid´s latest Blog Entry – Flags of the world using only XHTML and CSS part 2 =-.

    0
  13. 32

    I’ve tried to incorporate progressive enhancement using CSS3 in a lot of my new projects. I’m using both shadows and rounded corners on my blog. Now only if we could get the IE crowd to see what they’re missing.
    .-= Chris Thurman´s latest Blog Entry – Saturday Swirl 5: Tasty Snacks From the Design Community =-.

    0
    • 33

      Hey Chris! Yes, I saw that you started using some CSS3 on your blog and it looks great. Keep up the great work!

      BTW, it’s great to use it in design blogs because most of our users don’t use IE anyway so they all get to see our sites in its beauty. :D

      0
  14. 34

    This is what.. 10% of css3?

    0
    • 35

      I didn’t even touch what CSS3 and Modernizr can do. I just tried to relate how you’d use these tools for design effects that should be familiar to most people.

      Look at Modernizr’s table of contents to see what you can really do with it, including some great HTML5 stuff.

      0
  15. 36

    Cool info, nice to see a lot of people is passing on supporting explorer.
    .-= ozzysong´s latest Blog Entry – Mostrar tu Google Buzz con jQuery =-.

    0
    • 37

      I wouldn’t call this passing support on IE. I still support some IE versions with my designs, but not to the same extent as modern browsers. I’d rather spend 20% of the time making IE look 80% great rather than making IE display every little drop shadow, rounded corner, or border image.

      0
  16. 39

    Awesome article dude! I love Design Informer’s posts, really useful and this is no different. I’m trying to incorporate a lot of shadows on my site’s now that CSS3 is out, thanks for sharing a simple how-to!
    .-= Blogger Den´s latest Blog Entry – 25,000 Entrecard credits – Simple Contest =-.

    0
  17. 41

    Yes, CSS 3 is going to make things easier just like CSS1 and 2 did, when or if the code makes it into the finial specs. If you use it on a clients site, who is going to go back and clean up the mess when CSS3 make it into the finial specs and the browser manufactures drop the –moz- and -webkit- and your code no longer works? Remember drop shadow and drop caps? They were in the CSS2 original candidate recommendations. You don’t see them in the finial CSS2 specs now, do you? Why, because IE couldn’t get them right and they were dropped. Be very carful about using CSS3 in anything but your personal work.
    .-= garyb´s latest Blog Entry – Your Bid Was Too Low =-.

    0
    • 42

      It will be some work to clean up your code once the CSS3 spec is finalized and all browsers support it, but you will be ahead of the curve. If you don’t use CSS3 right now, when the spec is finished and implemented, you’ll have to play catch up for adding CSS3 to your designs.

      I’d rather remove a couple harmless browser specific properties (-webkit-, -moz-, and -o-) and have my design look good in a growing percentage of browsers right now.

      0
    • 43

      With things like border-radius, the last statement in your declaration should be the standard spec. THis way, when vendor specifics are dropped, your style will still render.

      As per the above example:

      -khtml-border-radius: 20px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;

      When -khtml, -moz and -webkit are dropped, the correct style is still there and works.

      0
  18. 45

    Excellent post about CSS3. IE6 has lived enough and it should retire!
    .-= Lam Nguyen – AEXT.NET Mag´s latest Blog Entry – More Google Buzz Tips, Resources, Extensions, and Icons to Keep You Buzzed. =-.

    0
  19. 47

    Perfect post about CSS3.
    I also think that we don’t have to waste our time trying to fix all the errors that will show up in IE.
    IE6 doesn’t even support himself!
    .-= Nikola Lazarevic´s latest Blog Entry – 30 Wallpapers Inspired by Sci-Fi Movies =-.

    0
  20. 48

    Great post. I think it would be great if IE played nice, but it doesn’t. I shoot for having a site look ok in IE and how I want it to look in the compliant browsers ie Firefox, Chrome, Opera… I always tell my clients this is how is and set them up with a better browser. I try to put something informing the users with links to other options on a clients site. looking forward to seeing more CSS3 being used in the future.

    0
  21. 51

    Very important post. Thank you. It is time to finally leave IE6 support (2010!). According to your remarks I have to start implement some new CSS3 properties.

    0
  22. 53

    I just designed my first HTML5 & CSS3 fully compatible website today. It works just nice on all browsers, except for some rounded corners that are still square on IE. From now on, I’ll try to design using this standards only, even though they’re not fully implemented. After all, I could always provide an alternative style sheet for older browsers, right?
    .-= Florin Anghel´s latest Blog Entry – Un weekend fără Internet =-.

    0
    • 54

      IMO, we’re still way too early. Personal pages — yes but professional work IMO is not prime-time yet. If you can devote time to monitoring your CSS3 websites and makes changes as necessary fine – but really? now? You have time for those headaches? You want to manage an extra IE stylesheet?

      0
      • 55

        I think it’s a great time to use CSS3 but I also agree that while because it still isn’t prime-time, we should really not try to overuse it. There are some great uses for it now though!

        0
  23. 56

    Great article! We are not fans of IE but still make sure the site looks decent in it, because like it or not a great number of people still use it. I just wish it was easier to tame. Firefox rocks! You’ve shown some great examples of code here! Thanks!
    .-= Sneh Roy´s latest Blog Entry – 20 Free Fonts Perfect For Fancy Logos =-.

    0
  24. 57

    nice trick, i like it..^^v
    .-= ishlah´s latest Blog Entry – WordCamp Indonesia 2010 =-.

    0
  25. 58

    Wow… CSS3 may really change the way we interact with websites. Even though Flash will remain the best, at least for a couple of years to come, I would love to see more possibilities of CSS3. Thanks for the great article, Kevin.

    And, what style have you adopted for images in this site, Jad. The glow on image hover looks awesome

    0
    • 59

      Flash will remain best for some things, but as far as embedding videos and audio are concerned, you would be crazy not to use the HTML5 element with a Flash player fallback. That way, your videos work on the iPhone and iPad and also hog up much less CPU with browsers that support HTML5.

      It’s an interesting topic and Mark Pilgrim does a great job of going into depth with it.

      0
      • 60

        Yep.. i totally agree with you, Kevin. When it comes to viewing videos, Flash sucks. It not only is power hungry and drains most of the memory but also crashes most of the times which is severely annoying. I hope HTML5 and CSS3 will enhance the way we see videos.

        0
  26. 61

    Nice examples, personally I don’t see any reason why one shouldn’t use CSS3. I used css3 borders and it really saved my time (and bandwidth).

    0
  27. 62

    An yes, I don’t see why we still talk about pixel perfect design and supporting IE in that terms.. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
    .-= Janko´s latest Blog Entry – Process of redesigning Janko At Warp Speed, explained =-.

    0
  28. 64

    CSS3, the dreams of designers and developers. It definitely leave more room for explore. Could it consider to be part of Web 3.0?
    .-= Aidan´s latest Blog Entry – Anatomy of Colors in Web Design: Yellow and the Sunshine Feel =-.

    0
  29. 65

    I agree that CSS3 is something we can begin using today, but I have to echo some of the other comments here that visual effects like border-radius and box-shadow, while very helpful and a substantial time saver for us all, are just the start of what CSS3 can offer. Sadly, those visual effects seem to get the most attention.

    New selectors that will allow us to create cleaner, leaner markup and still hook into what we need to use CSS to provide styling, as well as the ability to enhance the user experience through behaviors and animation effects currently residing in the world of Flash or Javascript are two other aspects of CSS3 that are very exciting and could potentially impact our work in a much more profound way than border-radius will.

    Don’t get me wrong, I love border-radius and now that I use CSS3 for that effect, there is no going back, but there is so much more to CSS3 that we should be excited about and using today!

    0
    • 66

      Hey Jeremy, I definitely agree with you about the uses of CSS3. There are definitely a lot more uses that we can start implementing today, but as Kevin mentioned, he barely just scratched the surface with this post and he just wanted to explain that we can already start using it today.

      We would definitely love to see a more in-depth post of it, and we might even do one in the future.

      0
  30. 67

    Great article. I think you should rename the article “You Should Use CSS3 Right Now”.

    0
  31. 69

    it’s nice, thanks for that !!!!

    0
  32. 70

    Nice One Kevin and Jad. Makes the basics of CSS3 aware to beginners of the trade.
    .-= Tuhin Kumar´s latest Blog Entry – Understanding Art Movements- Part 1 =-.

    0
  33. 71
  34. 72

    Thanks for the share :) I was just starting up with HTML5 and Modernizr looks awesome! Its an awesome share and article, thanks! have a wonderful day!
    .-= Designerfoo´s latest Blog Entry – File Syncing, Sharing and Backup on the Cloud for Designers & Developers =-.

    0
  35. 74

    Extremely useful. Thanks for sharing.

    0
  36. 75

    I think you’ve convinced me! :) I was one of the people saying I’ll use CSS 3 when more browsers support it, but actually you’re right. Why wait till hell freezes? :)

    I love your Submit Comment Button by the way. :)
    .-= Nicole´s latest Blog Entry – Rock is hot =-.

    0
  37. 77

    unfortunately most users still use IE & oftenly we are not the ones who can decide whether to use degration or not so unfortunately we cannot use CSS3 for quite a long time unless someone can kixx Microsofts buttons

    0
  38. 79

    Interesting article, but it takes too hard of a line I think and lacks some information that would make CSS3 a truly viable prospect. Internet explorer is indeed the worst web browser ever built, but its got some hidden tricks in its more recent versions (IE7+). Many (not all) of the pseudo-selectors such as :first-child, attribute value selectors, and even the coveted :hover on non “a” tag elements are available. Beyond this, Microsoft has had numerous filter methods in place sine IE5.5 for gradient backgrounds, a good enough shadow implementation, a hard edge drop shadow, opacity support, and even some minor CSS transformation.

    So, do a little looking around IE filters, and write those IE conditionals to include IE only stylesheet alternatives before looking at bloating a page with yet another JavaScript library or writing off CSS3 as a viable means of creating websites. The biggest enemy to moving forward isn’t necessarily all versions of IE, but primarily IE6 and I highly recommend that we all encourage those users to catch up to modern times rather than feed into support for a dead browser.

    0
    • 80

      Hey Dave, well said. Personally, I’ve never looked much into IE and it’s filters. Maybe you should write a tutorial on it? I’m sure more people would be interested in reading and learning more about it.

      0
  39. 81

    Some excellent ways to implement CSS3. I’m honestly sick of hearing about IE and its lack of support. Great article Kevin!
    .-= Bluefaqs´s latest Blog Entry – 200+ Seamless Grunge Patterns For Designers =-.

    0
  40. 82

    I think cutting off support for IE is a mistake. This is a nice article and I have taken some information from it that will be useful to me, so I thank you for that. I am from a rural area and see a lot higher percentage of people using ie than any other format out there so for me to survive locally I HAVE to design for ie6.

    Keep up the good work.

    K

    0
  41. 83

    A similar post inspired me to create a CSS-only RSS icon
    http://modxrules.com/articles/scalable-css-only-rss-icon

    Facebook will follow :)

    0
  42. 85

    Nice post, CSS3 and HTML5 are definitely the future, IE6 is dead, we should start to use them now !!!

    0
  43. 86

    Thanks for this article. I am already using box-shadow on many websites I code.

    0
  44. 87

    Thanks for the article – very informative, and challenging. I’ve also been in the ‘wait for a bit’ camp with CSS3 but you’ve shown that now is the time to get stuck in.

    I so wish big companies would pull away from forcing their employees to use IE6. What will it take?

    0
  45. 88

    I love the capabilities of CSS3 and I totally agree with you that the only person actually comparing a single site in several browsers to check for differences, is the web designer. Thanks for an excellent post
    .-= Omer Greenwald´s latest Blog Entry – 3 FireBug Tips Every Web Developer Should Know =-.

    0
  46. 89

    Really very useful and informative article on this topic, now a days i am trying to learn about css3 and this post is really useful for me, i got this article from a site was mentioned in a collection of css3 topics, i am lucky to got this. Thanks.

    0
  47. 90

    Thanks for pulling together some useful do it now CSS3 stuff.

    I’ll be trying out those techniques shortly.

    :)

    0
  48. 91

    Wow. Great post! For me, as a student/web designer it is a really helpful tutorial. Thanks for this one!

    0
  49. 92

    Hey, Kevin, nice article. I know some people hate the idea of IE Filters, as they’re not part of the spec, but, especially if you’re using Modernizr or IE Conditional Comments, you can actually achieve a pretty large list of CSS3 features with pure CSS. I’ve written about several examples here:
    http://aarontgrogg.com/practicalcss3

    Cheers,
    Atg

    0
  50. 93

    Implementing IE hacks can be really tedious, i really like the idea of designers beginning to use css3.

    0
  51. 94

    Do you ever wish you could throttle the developers of IE? Lol.

    Great post.

    0
  52. 95

    I like the new css3 but have one problem my css won’t validate now.

    0
  53. 96

    This post doesn’t even scratch the surface of what’s possible with CSS3 and Modernizr. I tried to get you thinking about what you could do with some creative thinking. Take a look at the table of contents of what Modernizr supports. I only touched on three of those.

    0
  54. 97

    Thanks for that link Kevin. I didn’t even know Modernizr supported all of that. Definitely useful!

    0
  55. 98

    Hi Kevin, I understand what you mean. I’m sure that there are definitely some people and companies that can’t take full advantage of CSS3 due to their audience and industry, but definitely start learning it now though. :)

    0

↑ Back to top