The Intricacy of Simplicity: CSS3
videos

The Intricacy of Simplicity: CSS3

on Apr 21st 2010 with 67 comments
Tutorial Details
  • Difficulty: Intermediate
  • Estimated Completion Time: 5-10 Minutes
  • Technology: CSS
Download Source Files
Demo View It Online
This entry is part 12 of 16 in the CSS3 Mastery Session
« PreviousNext »

Ever wondered how a particular effect was achieved in a web design, and, after zooming in several clicks, you found that the author added several subtle shadows, borders, gradients, etc? In the past, this was achieved simply by slicing out an image, and setting it as a background of some element. Luckily, with CSS3, we can be afforded much more flexibility. Now, while the code for such a simple effect might be a bit tedious, it’s well worth it, and that’s what we’ll review in today’s written and video quick tip!

Video Version


Subscribe to our YouTube page to watch all of the video tutorials!

Rather watch this screencast on Screenr.com?

Text Version

It’s amazing that something this simple requires that much code, but, it’s not too rough, and can easily be abstracted away to a snippet for future use.

Step 1. Create the Mark-up

To make our project as cut-and-paste as possible, we’re only working with an empty div. Create a new index.html file, and paste in the following:

<body>
     <div id="box">
	
	</div>
</body>

Step 2. Create the Canvas

Next, we’ll add some basic styling for the body element. This is just for the presentation, and can easily be removed. Within style tags in your header, add:

/* Nothing special here. Just the canvas. */
body {
	width: 500px;
	margin: 60px auto 0;
	background: #666;
}
Body Styling

Step 3. Styling the Box

Now, we’ll create our box, supplying a width and height.

#box {
	/* Just a box */
	width: 500px;
	height: 500px;
}
Box

Step 4. Rounded Corners

We should all know about CSS rounded corners by now. Let’s go ahead and implement that.

/* Rounded corners */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
Rounded corners

Note that we’re also supplying the final spec, of “border-radius,” in addition to Mozilla and Webkit’s versions.

Step 5. Border Colors

Mozilla offers a handy property, called “-moz-border-*-colors.” This allows us to set an infinite number of colors for a border. To achieve a subtle “double-border” effect, let’s implement this property.

/* Set a base border and color */
border: 2px solid white;

/* Multiple border colors in Gecko */
-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;

Note how the number of colors we supply are the same as the border width that we set at the beginning (2px). Also, don’t place commas after each hex value; I made that mistake at first!

Border Colors

Step 6. Compensating for Webkit

To the best of my knowledge, webkit doesn’t currently support border-colors, though it’s possible that I’m wrong. If I am, please leave a comment and let me know! Anyhow, to mimic this effect as best as we can in Safari and Chrome, we’ll use box-shadow.

/* Compensate for Webkit. Not as nice, but works. */
-webkit-box-shadow: 0 -1px 2px #292929;

Note that the provided values refer to the X offset, Y offset, blur, and shadow color, respectively. By passing -1px as the Y offset, we can push the shadow upwards.

In Safari

Step 7. CSS Background Gradients

The final step is to supply a subtle background gradient for our box. However, we must be sure to provide a fallback solid color for the browsers that don’t support CSS gradients.

/* Background subtle gradient, with fallback to solid color */
background: #e3e3e3;
background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));

Unfortunately, Mozilla and Webkit don’t quite agree on the syntax for gradients, which makes the process extra irritating. If it’s too confusing, you can use a new service called CSS3 Please to auto generate each browser’s syntax; it’s very cool!

Final Product

You’re Done!

It’s amazing; looking over our final image, it’s hard to tell what we actually did! But this is a good thing; subtlety is key in all aspects of design. Thanks for reading/viewing!

Final Code

/* Nothing special here. Just the canvas. */
body {
	width: 500px;
	margin: 60px auto 0;
	background: #666;
}

#box {
	/* Just a box */
	width: 500px;
	height: 500px;
	
	/* Rounded corners */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	border: 2px solid white;
	
	/* Multiple border colors in Gecko */
	-moz-border-top-colors: #292929 white;
	-moz-border-right-colors: #292929 white;
	-moz-border-bottom-colors: #292929 white;
	-moz-border-left-colors: #292929 white;

	/* Compensate for Webkit. Not as nice, but works. */
	-webkit-box-shadow: 0 -1px 2px #292929;

	/* Background subtle gradient, with fallback to solid color */
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
	background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));
}

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.philohermans.com Philo Hermans

    Like the CSS tutorials! :)
    It’s still disappointing that not all browsers support it yet :(

    • http://xpressabhi.com abhishek

      I am disappointed too that all browsers don’t spport same CSS even CSS support differs from version to version.
      My search site has one text input area. Its width changes abnormaly in even firefox version. It looks fine in firefox 3.6 but not in 3.0. I am surprised how??

      • Patrick

        this is why i NEVER use CSS3 für production purposes. Its cool to show what’s possible (especially multiple backgrounds!!!), but if you serve several users it’s neccessary to check out that the site looks the same in each browser (excluding IE6, kill him!)

        So, css3 is just useless with all the different implementations.

      • Patrik

        I disagree with you Patrick. I think it’s okay to use CSS3 for enhancements. Like border-radius, text-shadow, box-shadow etc. I don’t see the purpose of a site looking exactly the same in every browser out there. If you could enhance the experience for those actually using modern browsers capable of these things, why not treat them well for doing so? It’s 10 second job and you’ve got some nice rounded borders on all your buttons. Hardly something an IE user will miss, but something a Gecko or Webkit user would find appealing ;)

        By the way, width differences between browsers/browser versions is hardly the effects of using CSS 3.

        Thanks for the tip, actually didn’t know about border colors.

      • reno

        I disagree here with you Patrik. Try telling a client why his site that was designed by you looks different in another browser. Trust me on this you will soon be out of work.

      • Joshua

        @reno

        It’s called graceful degradation… You make it look as best as it can in all browsers… and if you do you’re job correctly, you will have educated the client to this long before they see the final product.

      • abhijit

        It really depends on the client. Not every client wants to get educated! Otherwise using CSS3 is pretty cool and who knows using it more and more may actually force browser developers to include more and more CSS3 support in their browsers. Its somewhat like a developing a computer game – users having high-end machines sees all the eye-candy of a modern computer game whereas users with low-end machines may not see all the effects but can still play end enjoy!

    • http://www.deluxeblogtips.com Deluxe Blog Tips

      I agree with you. CSS3 is really cool, but we still need some javascript to make it works across browsers. But if using javascript, we have already a new way to make the effect (without css3).

      But anyway, this is a nice tutorial. I like the creative way Jeffray Way uses CSS3 to make something more beautiful.

    • Daniel

      bottombottom? Typo?

  • eric

    Wow, very quick and concise. i cant wait for browser prefixes to go away!
    thanks again for using screenr as well as youtube for video. cause i cant get to youtube from work

  • http://ds.laroouse.com piyanistll

    very cool thanks like it

  • http://matt-bridges.com Matt Bridges

    Fantastic! I had never heard of that property before. I might just have a project coming up that could use it. :-D

    As always, great job, Jeffrey!

  • http://twitter.com/TatianaTheDog Dora Crow

    Thank you! I’m new to CSS, and your tutorial was very easy to follow. :)

  • http://www.woutertoering.nl WouterToering

    You used the old charset meta tag, while the rest is the more “modern and easy” HTML5 way :P.

    I knew all those “functions” already, but thanks for the video ;).

    • http://net.tutsplus.com Jeffrey Way

      Oh I did. Haha – Just need to update some of my older TextExpander snippets. :)

  • http://www.vagrantradio.com Jason

    Now the question is, does it work in IE6? Joking, joking. Nice tut Jeffrey.

  • http://www.sijdesign.dk Simon

    Will this work in internet explore?

    • http://www.woutertoering.nl WouterToering

      Border-Radius might work from IE9, but the rest, probably not. Internet Exploder sucks..

  • http://mac-apps.pl Seed

    Very nice tutorial.
    I really would like to recommend this site to practice CSS, it’s perfect for tuts like this: http://cssdesk.com/

    • Marcos Cerutti

      Dude, thanks a million!
      the site is wonderful

  • rob

    does this have to work in FF? because it not working on mine… FF3

  • http://www.daniel-petrie.com Daniel Petrie

    I know ie9 is going to support rounded corners, will it support gradients as well?

  • http://www.BryanWatson.ca Bryan Watson

    Great tip, I had no clue about that in Firefox.

    There is another way to achieve a similar effect in all modern browsers though.

    I recently found out about this their Soma Design:

    http://somadesign.ca/blog/design/2010/realistic-looking-css3-buttons/

    Essentially, you use :after and :before elements to create the multiple borders. Although it does have it’s limitations, and this solution is much more flexible.

  • Kenth

    Very nice. How did you know I needed this at this very moment?

    By the way, if I wanted to change the opacity in a box such as that via CCS3 how would I go about that? If it’s at all possible that is.

    Probably a rookie question but then that’s what I am.

    • http://net.tutsplus.com Jeffrey Way

      Try this.

      selector {
      opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
      filter: alpha(opacity=75); /* IE lt 8 */
      -ms-filter: “alpha(opacity=75)”; /* IE 8 */
      -khtml-opacity: .75; /* Safari 1.x */
      -moz-opacity: .75; /* FF lt 1.5, Netscape */
      }

      • Kenth

        Awesome! Thanks Jeffery, my boxes are now transparent.

        Kudos on the fast reply.

  • Daniel

    thanks Jeff!
    didn’t know about the -moz-border-color thing. my own solution to that has been to add a hard box-shadow with the fourth “spread” property, plus a border. like so:

    border:1px solid #fff
    box-shadow: 0 0 0 1px #111

    works in at least chrome and firefox!
    (I think you also can make multiple shadows → more than two different borders, in firefox)

    • mingos

      Seconded. The code can be shortened to:

      #box {
      width: 498px; height: 498px;

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

      border: 1px solid white;
      -moz-box-shadow: 0 0 0 1px #292929;
      -webkit-box-shadow: 0 0 0 1px #292929;
      box-shadow: 0 0 0 1px #292929;

      background: #e3e3e3;
      background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
      background: -webkit-gradient(linear, left top, left bottombottom, from(#a4a4a4), to(#e3e3e3));
      }

  • http://www.kieru.com Rob

    Jeffrey do you think the wording you used for this tutorial may erroneously imply that CSS3 is more widely supported than it really is? That first paragraph (to me) suggests just that. Obviously the code should speak for itself; you’re using enough browser-proprietary placeholders to put W3C into a coma.

    Personally I cannot wait until CSS3 gets finalized and universal support ‘begins’ so we see just how easy it really WILL be to create these effects.

  • Chris Gaines

    I’m mostly disappointed that none of these awesome effects are viewable by 95% of my clients.
    Internet Explorer 9 (preview) currently supports the border-radius, but not the CSS gradients.

    It doesn’t matter anyway. It will be 5-8 years before people that use IE upgrade to a newer version. That will be when their PC gets outdated and they decide to get a new one with the new OS. So frustrating. As designers, we have to work twice as much to get similar results cross-platform.We really need some standards here. (end rant)

    Great tutorial, Jeffrey. Great video walk-through, too. Thank you.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      95%? I think that percentage is far lower than you might think. :)

  • Oscar Rincón

    thanks jeff!…..

  • http://php.quicoto.com quicoto

    Very cool but Internet Explorer still sucking.

    You can not develp cros browsing with CSS3 (yet) :(

  • http://bittrack.it Raspo

    This will make the gradient work in ie6 /IE7/IE8 too ;p

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a4a4a4′, endColorstr=’#e3e3e3′);

  • http://www.hambrook.co.nz Rick

    Although I want to get rid of IE6 as much as the next person, I simply can’t ignore it while it still has market share. Won’t the box in this tut be thrown to the left in IE6?

    • James

      Hihi i thought so too.. But i`ve seen the light now! It`s a revelation stopping support for IE6. My god, the spare time i have now..

      I recommend all people to stop support for IE6. The more, the merrier, and the sooner it stops having marketshare.

      If we do support it, estimates are that the browser will still be alive in the year 2020.. So please stop ;)

  • http://www.a1media.ca Douglas Helmer

    IE6 is dead to me, so I’ll be using these CSS3 tips for sure.

  • http://solid54.com solid54

    Here’s the deal. For learning purposes its great. But until CSS3 is cross browser compatible…clients don’t care. They want the site to look pixel perfect on all browsers. Period. Including IE6.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      That’s just not true.

  • http://monieweb.com Monie

    Great simple tutorial…
    Worth reading it.

  • Rich

    Thanks for the written tutorial as well as the screencast. I tend to start doing other things if I watch a video tutorial so often miss important bits.

  • Clea Walford

    yes, thanks for the tutorial-very useful!

  • http://sonergonul.com/ Soner Gönül

    Here we go !

    Nice tuts.

    Thanks

  • http://www.rorybernstein.com Rory

    Yesterday I had to code a template, very simple, but the main content box had rounded corners. I used the CSS3 you describe above to make those rounded corners. But, it didn’t work in IE, and the client insisted that it should, so I had to scrap the whole thing, rewrite it with 4 little background images for the corners. So, what’s the point of getting excited about css3 when it doesn’t work in all browsers? I know that one day we can forget about ie6, but for new that awful browser is still with us, and for many clients, you just can’t use it. Yet.

    • http://solid54.com solid54

      my point exactly! Nice to learn…but a waste of time if you do this for money.

    • rich

      So, stop drawing rounded corners. They are just designers trend and maybe they become old fashion sooner than browsers support for CSS3

  • andi

    This shows up a bug in firefox – reduce the height of the browser so the scrollbar shows, scroll to the bottom, then increase the height again. the top-right corner goes all wacky.

    In IE8 a lot doesn’t work, and in Chrome the effect looks very different.

  • http://www.jordanwalker.net Jordan Walker

    Amazingly simple. Best of all.

  • Tim

    How can you call this CSS3 when its all moz and webkit extensions?

    Don’t get me wrong I use some of this to make things look nicer in FF but to call is CSS3 is frankly a joke.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      How so??

      • Tim

        The active code in the example are just -moz and -webkit versions. These functions may be like CSS3 but are not CSS3

        People need to be clear what is CSS3 and what are browser specific tweaks. You may think its obvious but a lot of people don’t twig that -moz is just FF.

        In my opinion a more honest approach would be to show what the CSS3 version looks like and then add what you can do now with our current browser support.

        In your version the only is CSS3 I see is border-radius: – I think the version Mingos posted up was better as he at least handled box-shadow: in a consistent way (two browser tweaks and the CSS3 version). I still think you need to be clear what is CSS3 and what is not. Like I don’t believe that background gradients are supported in CSS3.

        The example is fine, its just NOT CSS3.

      • Matt

        Tim’s right. The CSS3 spec is still being drafted and is not yet finalised.

  • http://twitter.com/bliitzi Deoxys

    Why isn’t that marked as quick tip?

  • jamc

    Hola que grandioso tutorial. yo encuentro un problema en el código. en la parte de aplicar el gradiente para webkit. aunque es obvio pero veo que nadie lo mencionó antes.

    Esta es la linea:
    background: -webkit-gradient(linear, left top, left bottombottom, from(#a4a4a4), to(#e3e3e3));

    y deberia ser:
    background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));

    eso es lo que pienso ya que estuve probando en Chrome y no me funciono de la primera forma.

  • http://www.ebji.org Daniel Israel

    Nice tutorial, I like the CSS3 stuff you’re bringing out. One side comment is that your voice sounded a little off on this tutorial. Kinda sounded hollow like you were using speakerphone. (Normally doesn’t sound like that).

    Keep up the good stuff!

  • http://www.webhostdesignpost.com/webdesign Cody

    Nice Article, CSS3 is so cool, it’s even going to be better when more of a majority of users upgrade to CSS3 web browsers.

  • Luke

    I like these effects, will definetly put them to use.

    To all the people complaining about lack of support, stop supporting older browsers. The only reason they are used is because they still work. I refuse to support browsers older than the current version on any site I can get away with it. The upgrades are free, you can even put a warning on your sites that they shold really upgrade to the latest version for security reasons.

    If you client doesn’t like that their site looks different in different browsers, ask them how many different ones they normally use. Most people use one and that means they won’t see the site any differently anyway. Tell the client that this will make them appear cutting edge to people who like to keep up to date. You can spin it in a good way for your clients, if you really want to.

    If people didn’t use the new techniques because they had client issues or browser incompatabilities we would still be designing in nested tables!

  • http://www.etabrizi.co.uk Emyr

    I really love all this CSS3 stuff, it would be a dream come to true to use it. In reality tho, its not that simple. Where I work (in the public sector) all our internal users are still on Windows 2000 + IE6.

    As much as i want to use the latest techniques and approach, I still have to support IE6. I know, it sucks.
    It probably won’t be years before they upgrade. Also with the prospect of job cuts in the UK, it will be even longer!

  • http://www.malegaonline.co.cc Malegaon Online

    Wow,
    CSS3 has got pretty awesome potentials , but its always IE 6 pulling me back , here in India , around 80% of my target audience still uses IE 6 and that just drives me mad …
    anyway nice quick-tut Jeff !

  • EA

    Great Work! but not possible work in ie version :( i hate that.

  • Simon

    What is the tool that you are using to edit your css in browser? I need that in my life

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Google “Web Developer toolbar” by Chris Pederick.

    • http://codendesign.blogspot.com nXqd

      This is web developer toolbar . But you can use legend bookmarks from https://www.squarefree.com/bookmarklets/ .
      :)

  • http://www.1000niaz.com 1000niaz نيازمنديها

    Great Work! but not possible work in ie version

  • http://buddyfeed.co.cc/ jerie_z

    Whoaa!! I did this using an image, I never thought that this can be possibly done with CSS. Thanks for sharing..

  • http://mounir.tv/vb/ sOLy MouniR

    The only Problem With Css Is Browsers Support , Otherwise , Very Power Full

  • abhishek.forall@gmail.com

    Really Helpful Stuff! Thanks a lot!