Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Push Your Web Design Into The Future With CSS3

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 Link

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 Link

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

See also:

3. Box Shadow and Text Shadow Link

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 Link

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 Link

CSS font-face23

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 IE24 (thanks for heads up, Jon Tan))

As used by: TapTapTap25.

See also:

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari29 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.

Firefox30, 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 Chrome31 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 statistics32 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.SpoonGraphics337).

6. The downside Link

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 details34) 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 Link

  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 https://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.taptaptap.com
  24. 24 http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
  25. 25 http://www.taptaptap.com
  26. 26 http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
  27. 27 http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
  28. 28 http://www.alistapart.com/articles/cssatten
  29. 29 http://www.apple.com/safari/
  30. 30 http://getfirefox.com/
  31. 31 http://www.google.com/chrome
  32. 32 http://www.w3schools.com/browsers/browsers_stats.asp
  33. 33 http://www.blog.spoongraphics.co.uk
  34. 34 http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1

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

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

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

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

    -3
  5. 5

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

    very cool! ;)

    1
  7. 7

    Scott Haslehurst

    January 8, 2009 8:01 am

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

    2
  8. 8

    @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
  9. 9

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

    CSS3 rocks, good article!

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

    1
  11. 11

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

    Brenley Dueck

    January 8, 2009 8:36 am

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

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

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

    0
  15. 15

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

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

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

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

    0
  19. 19

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

    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

↑ Back to top