Push Your Web Design Into The Future With CSS3

Advertisement

By Chris Spooner

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.

Here are five techniques snatched from the future that you can put into practice in your website designs today.

1. Border Radius

CSS border-radius1

Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

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

Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different:

-moz-border-radius-topleft: 20px;
          -moz-border-radius-topright: 20px;
          -moz-border-radius-bottomleft: 10px;
          -moz-border-radius-bottomright: 10px;
          -webkit-border-top-right-radius: 20px;
          -webkit-border-top-left-radius: 20px;
          -webkit-border-bottom-left-radius: 10px;
          -webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome.

As used by: Twitter2.

See also:

2. Border Image

CSS border-image6

Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:

border: 5px solid #cccccc;
          -webkit-border-image: url(/images/border-image.png) 5 repeat;
          -moz-border-image: url(/images/border-image.png) 5 repeat;
          border-image: url(/images/border-image.png) 5 repeat;

The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area.

Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:

border-bottom-right-image
	border-bottom-image
	border-bottom-left-image
	border-left-image
    border-top-left-image
    border-top-image
    border-top-right-image
    border-right-image

Supported in Firefox 3.1, Safari and Chrome.

As used by: Blog.SpoonGraphics347.

See also:

3. Box Shadow and Text Shadow

CSS Shadow11

Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design, a good example being this year’s 24 Ways website12.

-webkit-box-shadow: 10px 10px 25px #ccc;
          -moz-box-shadow: 10px 10px 25px #ccc;
          box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

Also, the text-shadow attribute is available for use on textual content:

text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).

As used by: 24 Ways2013.

See also:

4. Easy Transparency with RGBA and Opacity

CSS Opacity18

The use of PNG files in Web design19 has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.

rgba(200, 54, 54, 0.5);
        /* example: */
        background: rgba(200, 54, 54, 0.5);
        /* or */
        color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect.

Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

color: #000;
          opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

As used by: 24 Ways2013 (RGBA).

See also:

5. Custom Web Fonts with @Font-Face

CSS font-face24

There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule allows fonts to be called from an online directory and used to display text in a whole new light. This does bring up issues of copyright, so there are only a handful of specific fonts that can be used for @font-face embedding.

The styling is put into practice like so:

@font-face {
        font-family:'Anivers';
        src: url('/images/Anivers.otf') format('opentype');
        }

The rest of the font family, containing secondary options, is then called as usual:

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: if you are brave enough, you can make font-face work in IE25 (thanks for heads up, Jon Tan))

As used by: TapTapTap26.

See also:

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari30 in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase.

Firefox31, on the other hand, now has a considerably large user base. What’s more, the soon-to-be-released Firefox 3.1 has added support for a range of CSS3 features. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules.

Google Chrome32 was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users.

Percentage-wise, the W3′s browser statistics33 indicate that, as of November 2008, 44.2% of W3School’s users across the Web were browsing with Firefox, 3.1% with Chrome and 2.7% with Safari. That means almost 50% of all Internet users should be able to view these features. Within the Web design community in particular, which is much more conscious of browser choice, the range of users with CSS3 support is much higher, at 73.6% (according to the stats at Blog.SpoonGraphics347).

6. The downside

Your website may now have a range of fancy new design features, but there are a few negatives to take into consideration:

  • Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place, such as a standard border in place of border-image and a normal font in place of @font-face. Please notice that Internet Explorer supports @font-face with EOT (more details35) since v4 (thanks for heads up, Jon Tan).
  • Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This can invalidate your style sheet.
  • Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup.
  • Potentially horrific usage: Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!

(al)

Footnotes

  1. 1 http://twitter.com/smashingmag
  2. 2 http://twitter.com
  3. 3 http://www.w3.org/TR/css3-background/#the-border-radius
  4. 4 http://www.css3.info/preview/rounded-border/
  5. 5 http://www.the-art-of-web.com/css/border-radius/
  6. 6 http://www.blog.spoongraphics.co.uk
  7. 7 http://www.blog.spoongraphics.co.uk
  8. 8 http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri
  9. 9 http://www.css3.info/preview/border-image/
  10. 10 http://ejohn.org/blog/border-image-in-firefox/
  11. 11 http://24ways.org
  12. 12 http://24ways.org
  13. 13 http://24ways.org
  14. 14 http://www.w3.org/TR/css3-background/#the-box-shadow
  15. 15 http://www.css3.info/preview/box-shadow/
  16. 16 http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows
  17. 17 http://www.css3.info/preview/text-shadow/
  18. 18 http://24ways.org
  19. 19 http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/
  20. 20 http://24ways.org
  21. 21 http://www.w3.org/TR/css3-color/#rgba-color
  22. 22 http://www.css3.info/preview/rgba/
  23. 23 http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children
  24. 24 http://www.taptaptap.com
  25. 25 http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
  26. 26 http://www.taptaptap.com
  27. 27 http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
  28. 28 http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
  29. 29 http://www.alistapart.com/articles/cssatten
  30. 30 http://www.apple.com/safari/
  31. 31 http://getfirefox.com/
  32. 32 http://www.google.com/chrome
  33. 33 http://www.w3schools.com/browsers/browsers_stats.asp
  34. 34 http://www.blog.spoongraphics.co.uk
  35. 35 http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

↑ Back to topShare on Twitter

Chris Spooner is a freelance graphic and website designer from the UK. He lives and breathes the topic of design and enjoys keeping up to date with the design industry. Chris also publishes design articles, tutorials and free giveaways on his popular design blog; Blog.SpoonGraphics.

Advertising
  1. 1

    It is good, but there are more downsides and we must use some special scripts to solve the problems. I look forward to support from all browsers ;-)

    -4
  2. 2

    When will CSS3 be fully incorporated by all browsers? Opera 9.6 here can’t handle CSS3 it seems…

    -3
  3. 3

    .Can’t wait until the final CSS3 spec is fully supported in browsers, will make some of these common features that clients request much easier.

    0
  4. 4

    very cool! ;)

    1
  5. 5

    Scott Haslehurst

    January 8, 2009 8:01 am

    this is a great article – bring on the css3 love!

    2
  6. 6

    @font-face doesn’t take lots of fixes in IE7. In fact its been working in IE for far far longer than safari or Firefox (still not working until 3.1 is released) or Chrome. The only fix you need to do is convert your font to .eot (embedded open type) instead of .otf. You can do it with Weft. Microsoft is trying to submit .eot as a web standard to the W3C. For more info on embedding fonts with @font-face and the copyright issues that font designers are experience with this read Jon Tan’s Article

    0
  7. 7

    great article guys. I think it is important for designers to start embracing these options, but all the while still offering a seamless UX regardless of browser compatibility, using already acceptable alternatives.

    Nice work!

    1
  8. 8

    CSS3 rocks, good article!

    I actually didn`t know about the RGBA transparency before i eccidently moved the transparency slider in CSSEdit :p

    1
  9. 9

    Great look into the shape of things to come – would have been nice to see something on CSS3 columns but perhaps save that for another day/article..

    Cole

    1
  10. 10

    A very timely post. We’ve almost completed the HTML/CSS phase of a redesign of the Melbourne University Commerce Students Society web site (development site currently viewable on our Infusion Design server), and we’ve decided to use a number of these mentioned CSS3 features – primarily border-radius but also RGBA colour values, opacity, and even text-shadow.

    For this particular site at least, I don’t feel that the lack of rounded corners for users of older browsers is much of a concern. Likewise, those who don’t enjoy support of RGBA colour values are at no great loss. The design still retains the core of its character, and no functionality is sacrificed whatsoever. Viewing in Safari, FF 3.1, etc. simply rewards users with some pleasant extra touches!

    0
  11. 11

    Very cool effects. To bad they are not standard in some browsers such as IE6. Can’t wait for the -moz-border-radius to be standard. So much easier than creating rounded corner images.

    -Brenelz

    0
  12. 12

    What’s funny about Twitter is that they use tables for layout and then go and add some fancy CSS3. Anyway, Spoon, this is a GREAT peek into the future of CSS. Thanks for the post.

    0
  13. 13

    Maybe we can use that without a million of hacks in 10 years.

    0
  14. 14

    Nothing I didn’t know, other mags reported this like months ago already. By the time users have to upgrade to IE 7 or 8 if that is the case for these css3 codes to work we will already be on css 5 or higher and same problem. As important to me as forgotten web 2.0 sites when people are in a rush to make iphone sites and apps for more mobile technologies.

    Simple always wins why over complicate.

    0
  15. 15

    All for not if you have to put safeguards in place for those poor souls using non compliant browsers. I will just keep on coding the way I did before I read the article. I got all excited for nothing. Cheers! Thanks for the post I will use it when the world catches up.

    0
  16. 16

    The thing for me is that round corners and drop shadows are already past their collective sell-by-date, not really something to get excited about if you ask me. Gate.Horse.Bolted

    0
  17. 17

    Thanx for a look into the future. Will be fun playing around with these features.

    0
  18. 18

    Thanks for the article, just added some round borders to my website.

    Too bad some people can’t see them, but it’s not essential so it’s all good

    0
  19. 19

    If you want to use CSS3 but need to support older browsers, use jQuery. The rendering will be done in JS rather than by the browser rendering engine, but it works.

    0
  20. 20

    If you want to use CSS3 but need to support older browsers, use jQuery (example). The rendering will be done in JS rather than by the browser rendering engine, but it works.

    0
  21. 21

    Good article, but a couple things need to be pointed out. First, w3schools.com has nothing to do with the W3C – the site owners just got really lucky with the domain name. Second, the site’s browser report only reflects its own server logs and not the Web in general.

    Third, and this is to answer some of the questions in the previous comments, CSS3 is still under development and thus a moving target. Microsoft learned its lesson the hard way when it tried to be an early adopter of CSS – specifications under development are just that, and are subject to change at any time (not that I’m trying to be a M$ apologist, mind you, because I’m not).

    Right now, the major browser vendors will be implementing CSS 3 in an “experimental” basis – if it works and we start using them, then chances are they’ll be incorporated into the final specification that reaches Recommendation status. Otherwise it’ll likely be abandoned or changed.

    0
  22. 22

    I like the fact that this article gives examples from websites that are well known to the community. Keep up the good work!

    0
  23. 23

    IE sucks!

    0
  24. 24

    To be honest, I can’t wait. A nice summary here.

    However, bear in mind that W3′s browser stats are from their own log files. Their visitors will be mainly web developers/designers/etc and as such are the kind of people more likely to use alternative browsers. If you look at wikipedia’s browser stats, for example, it appears IE has roughly (an agonising) 70% global penetration!
    This, unfortunatley, is an inherent problem with statistics: you have to be careful how seriously you take them…

    0
  25. 25

    This was already stated, but yeah, the w3schools numbers are inflated. From NetApplications (http://marketshare.hitslink.com), here’s the current numbers:

    IE 7: 46.77%
    IE 6: 20.46%
    Firefox: 21.34%
    Safari: 7.93%
    Opera: 0.71%
    Chrome: 1.04%

    0
  26. 26

    Keith - SuPeR K!

    January 8, 2009 9:51 am

    Your multiple border images example seems to be all screwed up. It appears the Javascript that formats the examples has screwed up some of the items, specifically those with “right” in their name, and the last one has a space in it.

    0
  27. 27

    This is a great article. Thanks for all the foresight. I look forward to using these new css selectors on my new web design project.

    0
  28. 28

    I think it’s a shame that designer/programmers go through so much trouble because of lack of adoption. We have to resort to hacks, fixes, and other bloated methods just to provide a complete user experience. There’s just so much working against us.

    0
  29. 29

    If we could only make IE6 disappear…

    1
  30. 30

    Very nice list put together. Cant wait to see more sites on CSS3

    1
  31. 31

    Hi,
    very nice Article (like always :) ). It confirmed my will to keep the -moz-coloumns in my – just yesterday “finished”, very first – blog (www.die-digitale-art.de), even if this brings me in trouble with the IE (when using Images in the articles). But damn, in this case (a private Site) I don´t have to care about the stupids.

    0
  32. 32

    realmente aparece aqui grandes apps, mas gostava de ver estes “genios” fazerem tudo sozinhos como eu faço… ou seja trabalhar com todo o master collection.

    0
  33. 33

    Go to CSS3.info and try the selectors test to see what your browser can do…

    0
  34. 34

    BBclone.de – IE 40%
    w3schools – IE 46%
    ranking.pl – IE 47%
    NETApplications – 70% ?? WTF?? NET like .NET and uses .aspx (from M$oft) so… Who do You believe payed for this analitycs?

    0
  35. 35

    Funny, 24 hours ago, I deleted all images from my website http://www.jabz.de/ to start using CSS 3 for round corners. :) Also, to kick IE users in the butt. You have to push the users.

    Next step is implementing style sheets for the different browsers and let IE users know, they have to change their product.

    0
  36. 36

    Too many large corporations still run IE 6 and only IE 6 because they are too large to make a company upgrade.

    GO IE FOR KILLING THE FUTURE OF THE WEB FOR THE NEXT 20 YEARS!

    0
  37. 37

    yes deam IE must be replaced with firefox / safari

    0
  38. 38

    Nice article about css3.
    About browsers, well I just can’t accept Chrome for a serious browser that’s all.
    And I will place here one question I heard often in past months:
    “Is Google become new Microsoft?”

    0
  39. 39

    I’ve just been working on a design that uses text-shadow and @font-face (although I’m only really using it as a fallback for those who have js disabled and therefore can’t see the sIFRed alternatives) and have been using border-radius a bit too recently (again as a fallback for those with js disabled).

    With most of these CSS3 properties already supported (or soon to be) by Firefox, Opera & Webkit, it’ll probably be a case soon of being able to move all the js that provides the visual enhancement into conditional comments just for IE.

    0
  40. 40

    Great article, and though I too read several several months ago, it was still a good read.

    For all the naysayers out there, all I can say is, pick it up or get left behind. Yes, I.E. has very little support for CSS3, yes, its still in development/proposal mode, yes, it may change before the final release, but why not get on the wagon anyway? It won’t hurt you to be an early adopter. Learn to adapt.

    If you’re worried about having to have fixes in place for browsers that don’t support CSS3, remember you’re probably already doing that for browsers with buggy support for CSS2.

    Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This can invalidate your style sheet.
    Really makes me wonder about the validity of validators, since browser specific tags are allowed for in the CSS2 specification.

    0
  41. 41

    Exciting! Nice to see css evolve before my eyes.
    And wonder what’s next?

    0
  42. 42

    Damn those IE users, holding us all back!

    0
  43. 43

    Wow, great summary. I can’t wait for CSS3, especially the fonts.
    This is one of those posts that I would be better off not reading though. Now I have to wait patiently while knowing what is just around the corner.

    0
  44. 44

    The features of CSS3 are simply amazing, compared to those of CSS2.1. Using just a few lines of simple CSS code to get neat, rounded corners or putting a nice custom font in a design, instead of tons of images and hacks sounds like a wet dream of every front-end developer out there. ;)

    @Michael- It’s not only an IE-related issue i’m afraid. All other browsers also have very limited support for CSS3.

    Still, i think that actually using, at least, some of the features CSS3 offers is crucial for speeding up the process of increasing the support for it. Providing hacks and fixes for browsers like IE6 by web developers/designers is a huge misunderstanding. Instead of spending hours on tackling the numerous browser-issues just start to inform your users/readers that it’s the problem with their browser, not with the website. Maybe people at MS, Mozilla, etc. will start to think like “damn, i think we should start to care about the web standards”, if they got some “hey! Your damn browser can’t display anything properly! Fix it!” messages from the users.

    0
  45. 45

    I think the “rightright” might be a bit… unright?

    0
  46. 46

    Vitaly Friedman & Sven Lennartz

    January 8, 2009 3:40 pm

    @all: the problem with “rightright” is caused not by the article, but by the Syntax Highlighter. For some reason, it replaces “-right-” in the code with “-rightright-”. If you copy and paste the code using highlighter’s embedded function, the code is correct. We do not know why. Any ideas?

    0
  47. 47

    CSS3 eh?

    Where excatly in the CSS3 standard is the -moz-border-radius property? How about -webkit-border-image?

    Vendor specific hacks are no good. Even the vendor isn’t Microsoft. This is a slippery slope that has led to lots of problems in the past. In the late 90′s it was intentional javascript variation that caused problems, I guess now it’s intentional CSS variastion that will lead to headaches.

    0
  48. 48

    I’ve been writing myself recently about CSS3 in an introduction series and the issue it always comes down to is the browsers compatability.
    It is a frustration and I agree with above posts about it being an ongoing un-needed challenge. A shame really that it takes so long to catch wind of a next generation Style Sheet language… As I’ve read in other posts though, across other social networking sites, voice it, continue to voice it and lets change it!

    Not to bad an article at all though and thanks for sharing!

    Alex

    0
  49. 49

    Amazing! The rounded-corner, opacity and font src implementation are gonna be great time-savers and will expand considerably the aesthetics of websites.
    Thanks for keeping us reader posted with such good news!

    0
  50. 50

    Social networking software

    January 8, 2009 4:14 pm

    hopefully these new features will work well in the most used browsers out there.

    1
  51. 51

    I’d like to have a rounded-border-feature inside my browser for extreme cases of using useless dozens of squares on a webside, like change.gov. Obama’s website looks like a concentration camp from above. The letters in the footer look like prisoners mustering from a flight height of 1000 meters. Stop thinking squares, Obama-webmaster!

    -1
  52. 52

    “Comic Sans (ahem…) etc.”

    LOL

    0
  53. 53

    It’s frustrating that this is such a non-starter. I design for clients in Hong Kong and China, and according to the stats for my biggest client, 48% of their customers use IE6. And what’s more, according to my own research, these customers have no intention of switching or upgrading browsers. What they have “works,” and that’s good enough. (Moreover, it’s not really in a business’s best interests to tell their customers that they’re doing something wrong.) We’re stuck with IE6 and IE7 for at least another 5 years, unfortunately.

    0
  54. 54

    Great article!

    0
  55. 55

    From your article…

    “Percentage-wise, the W3’s browser statistics indicate that, as of November 2008, 44.2% of users across the Web were browsing with Firefox, 3.1% with Chrome and 2.7% with Safari.”

    From W3School’s website stats…

    “W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers. ”

    I’ve seen these stats quoted over and over and over as some kind representing some kind of a national trend.

    W3Schools stats have nothing to do with the greater internet. Please update your article with correct information.

    0
  56. 56

    the css 3 looks promising. But again IE family will be a a headache as always.
    nice post !!.

    0
  57. 57

    The future’s looking bright! Nice Article!

    0
  58. 58

    Incidentally the UInobtrusive CSS Framework is compatible with CSS3.

    0
  59. 59

    Nice ~ Article …..
    CSS3 rocks……………. [:)]

    0
  60. 60

    gaurav I have come to a conclusion when it comes to creating non-commercial websites; As long as my code is standard and supported by moz/chrome/opera/safari/lynx (ok the last one is just some weird fetish of mine) that’s fine enough for me.

    If IE has a problem with it.. I don’t usually even care anymore. IE7 might have some marginal alignment issues which I could just barely bother fixing with separate line in code but IE6 will usually just f*ck up the pages overall.

    This has saved me some time in ACTUAL coding instead of fix on fix on fix to make it look like a real website on eyes of a “non-standard” web browser.

    0
  61. 61

    Good article. But whether CSS3 has gone that far, with support for all browsers ?

    1
  62. 62

    You should just use the nice additional extras for the decent browsers. If those using Firefox, Safari, Chrome see some rounded corners, and IE just sees the square ones, then it’s no loss for the IE users, it just makes the experience a bit more enjoyable for the others.

    People get far too hung up on a site looking identical in every browser. Users and clients need to be educated that this is an unrealistic expectation as hacks and work-arounds will make the site less future-proof, and harder to maintain. If we always wait for all the standards to be implemented identically in every browser, we may be waiting til hell freezes over.

    0
  63. 63

    I’ve been looking for an article like this that tells me what I can expect in CSS3. It’s quite hard to find a well written article on it!

    0
  64. 64

    Great article, thanks a lot.

    In addition, I would be pleased to see a chart that compares which browsers already support the different CSS3 features.

    0
  65. 65

    Excellent article,

    Although they are not quite ready yet, the potential is there to see. CSS3 is going to make for a great step forward in web design, and is something that I am very much looking forward too.

    Keep up the great work SM.

    Tim

    http://www.tim-holmes-design.co.uk

    0
  66. 66

    The truth to all this is that until IE6 disappears, we’re not really going to be able to use these as critical parts of the design.

    0
  67. 67

    Rounded corners and border images should be an implemented standard since so many years …

    Variables in CSS is another feature i’d like to see (color scheme …).

    0
  68. 68

    Wow, I always liked css pages, css3 totally ROCKS!

    http://www.web-privacy.pro.tc

    0
  69. 69

    I resent your association of bad design with marketing departments! I’m a marketer and know a nice site design when I see one! :-)

    In other news… hooray for CSS3! I’ve already been using rounded corners for a while on my lifestream, too bad about ‘the others’ who refuse to upgrade to a real browser.

    Thanks,
    Jon

    0
  70. 70

    we have to wait for the future in order to implement css3.0… why don’t all browsers developer meat together and make a generic browser?… hehehe just kidding.>

    0
  71. 71

    i think developers do ‘meat’ together but thats a whole new kettle of fish

    0
  72. 72

    Thats really awesome stuff.

    I request all web designers to stop supporting IE6. Enough is enough..

    0
  73. 73

    Thanx for the article! This is our radiant future)) Hope advantages will exceed drawbacks.

    0
  74. 74

    I love the fact that html and css isnt being allowed to grow stagnant and that more and more browsers are taking up the new specifications. It just annoys me to no end that personally, i still have to design with IE6 in mind.

    One of the larger websites I work for still have about 78% Internet explorer usage, of which more than half still use IE6 (Or lower!)

    I can’t understand why big companies force people to use IE6 on thier old machines. I want to be able to design freely and use the latest tech, rather than feeling constantly stressed out by IE6

    0
  75. 75

    This is exciting! I specially can’t wait to try the border-radius effect. CSS3 is about to make life so much easier…

    0
  76. 76

    Good article. I recently made some browser support tables on which of each of the above mentioned features (and others) are supported…to give one an idea when we can really start using this stuff.

    0
  77. 77

    As long as no browser support CSS3, so long it doesn’t make sense to waste energy for implement CSS3 into own sites.

    0
  78. 78

    Great ! I look forward to not being able to use it. :

    0
  79. 79

    That totally made my morning. I can’t wait until its standard!

    0
  80. 80

    CSS 3 is looking awesome. Probably going to wait to implement it until it validates though.

    0
  81. 81

    These features are nice, but I’d much rather see them implement variables in CSS.

    As for CSS browser compatibility, I’ve stopped coding for IE6 on all my sites. With IE7 already out for about 2 years or so and IE8 coming out soon, I don’t see a point in wasting any more time on IE6. I think that the only way to get people away from that accursed browser is to stop coding for it. That’s just my 2-cents on that.

    0
  82. 82

    A correction to Stephen’s comment from earlier:

    The only fix you need to do is convert your font to .eot (embedded open type) instead of .otf.

    The Microsoft tool you link to (WEFT) will only work with TrueType font files.

    0
  83. 83

    this is excellent, thanks!

    0
  84. 84

    You should sort out link text in comments so that it doesn’t break the text. :)

    What I wrote was…

    A correction to Stephen from earlier:
    http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/#comment-304283

    The only fix you need to do is convert your font to .eot (embedded open type) instead of .otf.

    The Microsoft tool you link to (WEFT) will only work with TrueType font files (it won’t open OpenType font files). It will do .ttf to .eot, but not .otf to .eot :
    http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work#comment-14

    0
  85. 85

    That’s was so nice and really great post usefull to knowing new things , But wanna asking about somethings people , how to put image in the top of the page at up in some themes have no headers or image banner in the top of the theme page , How can i put the image in the top of the themes page please , will be great if any one helps
    my email : Ezz313[at]gmail[dot]com
    thanks

    0
  86. 86

    why can’t internet explorer keep up with safari (webkit) and firefox already. or better yet why can’t the 85% of people that use IE switch to a better browser already.

    very good article Chris. excited about the rounded corners feature

    0
  87. 87

    Good stuff… hopefully CSS3 will simplify the design process a bit… Less time spent creating graphics for rounded corners and drop shadows, and more time being productive and actually coding.

    0
  88. 88

    Unfortunately pointless because of limited IE support.

    0
  89. 89

    Nikki - http://www.logodesignguru.com

    January 9, 2009 11:51 am

    some good tips here. thanks

    0
  90. 90

    i can’t wait to implement some of these, in particular: border radius. 2 years, though! ugh.

    0
  91. 91

    Timothy - http://www.pushingbuttons.net

    January 9, 2009 12:22 pm

    Too bad CSS3 will not be a standard in the near future. Not for a very, very long time.

    0
  92. 92

    Ian, you noted that the -moz- and -webkit- prefixes aren’t anywhere in the CSS3 specification, and you’re right.

    What you missed was the cascade of the CSS. Notice the -moz- and -webkit- css rules were above the non-prefixed rules. This means that browser will look at the CSS and apply the rules top to bottom, if it’s Safari, it’ll skip over the -moz- rules because it doesn’t understand them (and vice-versa). When it gets to the non-prefixed rules, if the browser understands that rule it will override the previous rules.

    This is called “forward enhancement.” You’re writing code that’s ignored by the browsers that don’t understand it, but overriding it with the proposed standard for when that browser (eventually) accepts it.

    This way, users of Safari and Firefox get an even “spiffier” version of the website than MSIE6 users get, but MSIE6 users still get a perfectly usable site, it just doesn’t have the bells and whistles like rounded corners and alpha-transparency values in RGBA codes. It still WORKS for them, and they’ll never know that they’re not seeing the site in all its beauty and glory.

    Forward Enhancement and Graceful Degradation… two concepts to embrace and love…

    http://www.JoeLevi.com

    0
  93. 93

    I propose to every web developer to put:

    “If you browse with IE you are unsecured and miss the current www standards”

    on the websites, and encourage with links to Opera and FF

    0
  94. 94

    You probably won’t belive a just opened the website with:

    This site has been developed for, and is best viewed using Mozilla Firefox.
    Stop using Internet Exploder now and save yourself a lot of trouble!

    … nice … somebody made this in 2005 … I guess one thing never changes … so chage this thing to FF or Opera(my favourite)

    0
  95. 95

    I wish IE would eat a bag of dicks and go away.

    0
  96. 96

    Like every other developer/designer I hate having to waste my time “haking” for IE, but the experience has taught me that if you are EXTREMELY careful with CSS2.1, the conditional stylesheet won’t have more than a few lines… off course if you pretend to begin using CSS3 right now (I’m not saying I wouldn’t like to) the number of hacks will increase exponentially… and for me, sending IE users to hell isn’t a valid alternative.

    0
  97. 97

    Wow, in half a minute I added a few drop shadows and rounded corners to my blog…great article.

    Most readers of my blog are using Safari or Firefox, so this is great. Can’t wait until Firefox 3.1 Beta goes to a general release.

    0
  98. 98

    Your post is very interesting.It will definately help web designers. I would like to thank you for sharing this information.

    0
  99. 99

    Ahmad Firizal Ali

    January 10, 2009 12:23 am

    WHAT THE ?? Its Quite Cool, its really different with css 2 i think !!!!!!!!! wow

    THANKS

    0
  100. 100

    the biggest problem remains the damn Microsoft, with its outdated Internet Explorer

    http://www.peqno.com

    0
  101. 101

    Thankyou all for all the comments, making it a welcoming first post here at Smashing Mag.
    Obviously too many to respond to individually, but as a whole I’m glad the article helped out, it certainly gave me the opportunity to pick up some new tips during my research.

    Browser stat wise, thanks for pointing out the difference between W3C and W3Schools. That’s something I hadn’t considered before. Although as some commenters said the stats might not be entirely accurate (as could be said for any collection of data, really), overall it does look like internet users are increasingly opting for alternatives to IE – which is good news! Making for a wider audience who could see these additional features.

    0
  102. 102

    Mohammad Alshaikh

    January 10, 2009 7:48 am

    even IE8 beta doesn’t understand CSS3..

    0
  103. 103

    There has to be a way that a standards organization enforces a minimum set on anyone publishing a browser so that some of these tricks like the rounded corner, typography rendition from an online source become extremely common which will lend to a great user experience.

    0
  104. 104

    Abdulsalam Alasaadi

    January 10, 2009 11:12 pm

    Thanks for the article.
    CSS3 will definitely save us a lot of efforts & time. I look forward to start using it after it gets supported by all major browsers.

    0
  105. 105

    very very nice
    especially Custom Web Fonts with @Font-Face :)

    0
  106. 106

    even IE8 beta doesn’t understand CSS3…
    Steave,

    0
  107. 107

    Good Article. Thanks! Will start practicing.

    0
  108. 108

    Hope this will be standard practice soon, saves a lot of work

    0
  109. 109

    Excellent picks. I’ve been waiting for some of these CSS features it seems like forever! I just wish IE would step up this time and become more compatible…I see its still going to be a battle.

    0
  110. 110

    well it’s about time..

    0
  111. 111

    Microsoft released their CSS Vendor Extensions, but i didn’t try not yet, here is the link for interesting people, http://tinyurl.com/6hklyw

    0
  112. 112

    this is great i love css!

    0
  113. 113

    Graphic Design Company India

    January 12, 2009 12:56 am

    Great work dear. You have disclosed the right point for a perfectionist web designers must need to follow the above described points, I have learnt a lot from it.

    0
  114. 114

    I’m very excted about this!!! border-radius is very very useful!

    0
  115. 115

    HSLA/RGBA and text-shadow are supported by the alpha of Opera 10 (see CSS3.info

    0
  116. 116

    meant web fonts instead of textshadow

    0
  117. 117

    Definitely CSS Rocks… Hope IE will not lag behind..

    0
  118. 118

    Great features: it is obvious that the more web pages start using these new styles, the faster the introduction of the new standard in internet browsers will be.

    So, move on and change your blog right now …

    0
  119. 119

    @#41 : well, i made a little test page here : http://www.zzzombie.com/css-novelas/
    if you want to see the page how it’s supposed to be rendered, you need a nightly build of webkit – cuz it has the most advanced css 3 implementation.

    This example features :
    - css animations : hover the page title to see the css animation example.
    - css reflexions
    - css transformations
    - good video tag implementation (.mpg video)
    - css masks (applied to the video)
    - css shadows
    - text-stroke
    - ttf font
    - rounded corners
    - rbga
    - poor design and ridiculous subject… hey, it’s just a test page ;-)

    0
  120. 120

    P.S. : for #119 : the background uses another css 3 feature : css gradients

    0
  121. 121

    God! please bring me to 2030 when css3 is standard…

    0
  122. 122

    Great writeup.

    I’d also add that its not just what percentage of browsers can render CSS3 but, also, what their performance is like. At the moment some CSS3 properties slug browser performance enough for me to hold out on using them.

    0
  123. 123

    really great features.. looking forward to see this in action.

    0
  124. 124

    that s cooool…i like the custom font feature…so nice

    0
  125. 125

    That’s good stuff. Hopefully IE will make it work so we dont need to waste so much extra time doing hacks

    My Site

    0
  126. 126

    Nice job.
    box-shadow is not supported in Firefox (3.1), even with the -moz-box-shadow prefix. But it does work in webkit browswers (Chrome & Safari)
    I invite those interested in CSS3 to visit http://www.css3.info/preview. It’s a good link to keep in your favorites. ;-)

    0
  127. 127

    Great Article. I think I am going to just drop IE6. It is a hassle to design for and just wish MS would auto update the browser to at least IE7 like Firefox does in all its major releases. Having people naive to the fact that these old browsers are becoming useless needs to be address and I think it is up to the companies, such as Microsoft to inform people that IE6 needs updated and should just send out an Auto Update to all who use it. I know MS has been fighting the standards of the web but it is time to give in to the standards being set by the community of designers and developers.
    I am looking forward to the day I do not have to make separate style sheets and hacks to force a simple box model to look correctly in IE. Even IE8 has issues. It gives you a choice to view things in standards mode or some other mode they came up with. If the typical user happens to download IE8 and they are not in compliant mode the websites will look messed up. Why not just make the browser compliant to begin with and not give another choice like they have. It is pointless and frustrating. The @font-face is going to be very cool. I just wish we could somehow load the fonts into the browsers no matter what browser someone has so we don’t have to use imports or images anymore. Very tiresome too.
    Border radius is a great feature.
    I am going to really enjoy using CSS3 once it is supported by all browsers.
    All need to catch up and auto update when the developer group creates a new version.

    0
  128. 128

    Css3 is not working in IE. It is working fine in fire fox. Could uou please let me know why it is happening?

    0
  129. 129

    Thats a great summary of the interesting features of css3 – Although it will be a while before it’s supported enough to actually use. I will definitely use some features conditionally.
    Thanks Smash,

    online portfolio – now in css!

    0
  130. 130

    CSS3 looks exciting. But i guess the browser problem will get worse. This is mainly due to different ways of rendering among top brands like IE, FF, safari.
    I have already tried opacity effect. Yet to try the other options.
    Opacity effect, you can find among events page on my site
    University events

    0
  131. 131

    Wow! Looks like a real time-saver. Can’t wait for universal support

    0
  132. 132

    The -moz-box-shadow property does not currently works. It is implemented in the beta version of Firefox 3.1 and the alpha 3.2. You can find more here. There is a useful and extensive draft about CSS Backgrounds and Borders at W3C.

    I believe that @font-face is a very important property and should be given more attention by the browser developers. Unfortunately it is still buggy and inconsistent in both Firefox and Safari in regard of the font names use and weights. Already, many commercial fonts permit the use over the internet but read carefully the permissions but more foundries and font authors should follow the example of Exljbris Fonts and extend their permission of the fonts with the @font-face property.

    0
  133. 133

    Lol Nice one

    0
  134. 134

    CSS3 looks very exciting, can’t say I really expected it to be perfect across all platforms. It seems the problems associated with multiple browsers will only get worse in the future.

    It’s a great idea that we would all use the same platform, but unrealistic – it’s a free market and progress needs competition. Would be nice though…

    0
  135. 135

    This is nothing new, I’ve been implementing this since a few months ago.

    Craig Miller
    professional web design agency

    0
  136. 136

    Great post, I’m gonna go and make the developers lives hell.

    0
  137. 137

    Yes absolutely right that IE users can’t get benefits from this features. Need to come out with some concrete solutions.

    0
  138. 138

    好多都看不懂呢

    0
  139. 139

    For IE6 support I double what I would normally charge for a website to be built. My target audience isn’t China and even if it was I would simply stick a link on the page saying this page is best viewed with FF 3 or Safari 4.

    0
  140. 140

    I cannot wait until these are implemented across all browsers along with HTML 5. Just when you think you’ve reached the limit there’s some genuine geniuses out there that come up with what would seem like an infinite amount of new tricks. Great article by the way!

    0
  141. 141

    AWESOME TIPS…………………

    0
  142. 142

    thank’s for the info and i will try to do this.

    i wish i will succes

    0
  143. 143

    i wish i will succes

    0
  144. 144

    Hey great CSS3 i have test it have a nice features Nice website style

    0
  145. 145

    Daryn St. Pierre

    August 28, 2009 5:47 am

    I think this is a great article for the web developer / designer that wants to indulge. I can’t wait for the final spec of CSS3 to be released but I’m also expecting a whole new set of problems and things to overcome. That’s fine though. It comes with the territory and I’m quite the problem solver.

    Right now I think CSS3 is really just indulgence for developers and not near ready for production. Browser support needs to be across the board before I’d use most of these for a live website. In the meantime though, I’m going to build a fun layout with these techniques and just go crazy for nothing more than ‘hey look what I did’ value.

    0
  146. 146

    software catalog download document scanning software exitic indoor plants catalog microsoft download center

    September 12, 2009 1:45 am

    I think this is a great article for the web developer / designer that wants to indulge. I can’t wait for the final spec of CSS3 to be released but I’m also expecting a whole new set of problems and things to overcome. That’s fine though. It comes with the territory and I’m quite the problem solver.

    Right now I think CSS3 is really just indulgence for developers and not near ready for production. Browser support needs to be across the board before I’d use most of these for a live website. In the meantime though, I’m going to build a fun layout with these techniques and just go crazy for nothing more than ‘hey look what I did’ value.

    free hacking software

    0
  147. 147
  148. 148

    From my above comment, you can see that i’m not good at html or css. The attribute’s got nuts with me.

    0
  149. 149

    Hi, any place I see people referring to @font-face I’m trying to help spread the word about the great work of Paul Irish in providing a rock-solid implementation in as brief of code as possible. Was hoping maybe you’d update the above section with a link to Paul’s article

    Cheers,
    Atg

    0
  150. 150

    Catherine Azzarello

    November 9, 2009 11:03 pm

    I’ve had success with @font-face…yes, even in IE w/eot files (though some eot files didn’t work, just used another similar font). Also using Typekit which works in IE.

    I take a perverse pleasure in NOT validating CSS when it notes ‘errors’ for round corners, alpha transparency, and dropped shadows–all cool imageLESS enhancements for FF, Safari, & Chrome. Add in solid color alternatives for IE and live with square corners–it’s all good.

    Haven’t tried border images or multiple backgrounds…yet. ;-)

    0
  151. 151

    Thanks for the great info we hope to use this on our new website http://www.studentbrands.co.za

    Thanks again

    0
  152. 152

    nice articles

    0
  153. 153

    have you checked css3 for crossbrowser support for all fix browsers? :D don’t blame the browser dude if you getting annoyed with the styles …outchh

    cheers,

    0
  154. 154

    Best Web Designing Contest

    February 2, 2010 7:56 am

    I like border layout a lot and going to use it in my site and then I would post it in a contest running by grafikguru.com

    0
  155. 155

    some features like roundes corner are not run on IE8
    whts the solution???
    by the way thanks for useful inforamtion sharing …

    0
  156. 156

    Great article! Do Trident focused properties exist, too(i.e. something like -moz)?

    0
  157. 157

    Thanks for the peak at some of the new CSS3 features. Looks like there are some exciting design things coming down the pike. Can’t wait to play with them.

    0
  158. 158

    Your site is very good site, I check over faramob.ir

    0
  159. 159

    So far Chrome support most of CSS3!

    0
  160. 160

    CSS3 is very good…but, all propertise are need to support in IE browsers also… :-)

    0
  161. 161

    > “Internet Explorer: 46% of Internet users won’t see these features,”
    So then, the majority of internet users WILL see them. I’ll write for the majority, thanks.

    0
  162. 162

    Everything for CSS and XHTMl . http://popwebdesign.net/css_xhtml_tutorials.html Check it out !

    0
  163. 163

    Thanks for the great CSS tips. Will try a few out and see how they work, Cheers

    0
  164. 164

    This is awesome – thanks.

    Why worry about providing hacks for IE? If most web developers just forgot about adjusting for IE, then it would become Microsoft’s problem. Either that, or web surfers would have to get a compliant browser.

    As a weird thought – it’s a bit like financial institutions. If everyone stopped paying their debt to money lenders, they would all go broke and not have a dime to recover their losses :D

    It’s a bit like that with Microsoft.

    0
  165. 165

    This is a great article. Thanks for all the foresight. I look forward to using these new css selectors on my new web design project.

    0
  166. 166

    I’d like to see some new pseudo classes. Some I’d suggest are :first-word, :last-word and nth-word. These would work the same way they do for any other element and a word would be defined as a collection of letters with white-space either before or after it, or both. I don’t know how I would use it, but I’m sure it would be useful to others and possibly clean up the use of span tags everywhere.

    0
  167. 167

    Don’t forget Chrome and Safari, ’cause they’re probably the best for CSS3 implementation.

    0
  168. 168

    Hi! I’ve been following your site for a while now and finally got the bravery to go ahead and give you a shout out from Austin Texas! Just wanted to mention keep up the great work!

    0
  169. 169

    Benaiah Mischenko

    May 26, 2012 2:29 am

    Opera is actually well-known for supporting advanced features (CSS style sheets, for example) long before any other browser. However, it also has its own browser prefix, -o- which many (lazy) web developers omit, thus making Opera not display their CSS attributes.

    0
  170. 170

    each time i used to read smaller posts which also clear their motive, and that is also happening with this article which I am reading at this time.

    0

↑ Back to top