The Intricacy of Simplicity: CSS3
Tutorial Details
- Difficulty: Intermediate
- Estimated Completion Time: 5-10 Minutes
- Technology: CSS
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
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;
}
Step 3. Styling the Box
Now, we’ll create our box, supplying a width and height.
#box {
/* Just a box */
width: 500px;
height: 500px;
}
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;
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!
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.
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!
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 Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Like the CSS tutorials! :)
It’s still disappointing that not all browsers support it yet :(
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??
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.
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.
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.
@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.
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!
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.
bottombottom? Typo?
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
very cool thanks like it
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!
Thank you! I’m new to CSS, and your tutorial was very easy to follow. :)
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 ;).
Oh I did. Haha – Just need to update some of my older TextExpander snippets. :)
Now the question is, does it work in IE6? Joking, joking. Nice tut Jeffrey.
Will this work in internet explore?
Border-Radius might work from IE9, but the rest, probably not. Internet Exploder sucks..
Very nice tutorial.
I really would like to recommend this site to practice CSS, it’s perfect for tuts like this: http://cssdesk.com/
Dude, thanks a million!
the site is wonderful
does this have to work in FF? because it not working on mine… FF3
I know ie9 is going to support rounded corners, will it support gradients as well?
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.
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.
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 */
}
Awesome! Thanks Jeffery, my boxes are now transparent.
Kudos on the fast reply.
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)
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));
}
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.
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.
95%? I think that percentage is far lower than you might think. :)
thanks jeff!…..
Very cool but Internet Explorer still sucking.
You can not develp cros browsing with CSS3 (yet) :(
This will make the gradient work in ie6 /IE7/IE8 too ;p
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a4a4a4′, endColorstr=’#e3e3e3′);
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?
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 ;)
IE6 is dead to me, so I’ll be using these CSS3 tips for sure.
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.
That’s just not true.
Great simple tutorial…
Worth reading it.
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.
yes, thanks for the tutorial-very useful!
Here we go !
Nice tuts.
Thanks
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.
my point exactly! Nice to learn…but a waste of time if you do this for money.
So, stop drawing rounded corners. They are just designers trend and maybe they become old fashion sooner than browsers support for CSS3
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.
Amazingly simple. Best of all.
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.
How so??
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.
Tim’s right. The CSS3 spec is still being drafted and is not yet finalised.
Why isn’t that marked as quick tip?
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.
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!
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.
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!
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!
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 !
Great Work! but not possible work in ie version :( i hate that.
What is the tool that you are using to edit your css in browser? I need that in my life
Google “Web Developer toolbar” by Chris Pederick.
This is web developer toolbar . But you can use legend bookmarks from https://www.squarefree.com/bookmarklets/ .
:)
Great Work! but not possible work in ie version
Whoaa!! I did this using an image, I never thought that this can be possibly done with CSS. Thanks for sharing..
The only Problem With Css Is Browsers Support , Otherwise , Very Power Full
Really Helpful Stuff! Thanks a lot!