CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it's still fun to see what's around the corner! In this tutorial I'll show you five techniques.
1: The Basic Markup
Before we start with this tutorial, let's create the basic markup that we will be working with throughout the tutorial.
For our xHTML, we'll need the following div elements:
- #round, to apply rounded corner CSS3 code on.
- #indie, to apply an individually rounded corner on.
- #opacity, to show the new ways CSS3 handles with opacity.
- #shadow, to show you how to create drop shadows, without Photoshop.
- #resize, to show you a new sort of CSS, to resize elements.
For this, our xHTML will be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>An Introduction to CSS3; A Nettuts Tutorial</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body></body> </html>
In our HTML document, we've created some div elements, with the IDs stated above.
Let's quickly create a base CSS file.
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
/*rest of the code will come here, later*/
As you can see, we've given all div tags a width and height of 300px each. We also forced them to float to the left, leaving us with a page full of divs to play with.
2: Rounded Corners
It can be a hassle to create rounded corners. First, you must create the images. Next, you have to create more elements to have the rounded corners set as backgrounds. You know the drill.
This problem can be easily solved with CSS3, with the property called “border-radius”. We'll first create a black div element and give it a black border. The border is there because we need to "execute" the border-radius property.
We do this like so:
#round {
background-color: #000;
border: 1px solid #000;
}
Once you've created the div, refresh the page. You should now see a black, square div with a width and height of approximately 300px. Now, let's work on the rounded corners. This can be accomplished with only two lines of code.
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
As you can see, we've added two nearly identical lines, with the only difference being "-moz" and "-webkit". -moz refers to Mozilla Firefox, and Safari/Google Chrome use the -webkit prefix.
Refresh your HTML document and you'll see a rounded div - nice and smooth. Well, smooth... In Firefox and Safari, yes, but Chrome renders a slightly pixelated edge.
Back to our code, "border-radius" needs a value. This value determines the sharpness of the corner; the bigger the value, the rounder the corner - just as in Photoshop. To the best of my knowledge, there's no maximum value for this element.
3: Individually Rounded Corners
Creating traditional rounded corners can drain your day. Luckily, CSS3 solves it!
This property is quite similar to our previous one. It also uses "border-radius", however we'll slightly modify our code.
We do it like this:
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
We've added "topright" and "bottomright" to our code; this refers to the top and bottom right corner of the div element. With these new properties, you can easily implement a "tab-like" feature.
The additions to be used are "topright", "bottomright", "bottomleft" and "topleft".
4: Changing Opacity, The CSS3 Way
Currently, you need to write several lines of CSS to adjust the opacity of elements (hacks). Once again, CSS 3 simplifies the process.
This line is easy to remember as well, it's just "opacity: value;". Easy right?
Our code will be:
#opacity {
background-color: #000;
opacity: 0.3;
}
5: Drop Shadow!
In Photoshop, it's a trivial task to create drop shadows. However when implementing them into your web applications, you'd probably save the shadow as an image, and then use it as a background. No More! (At least for the modern browsers.) Unfortunately, only Safari and Chrome support the feature at this time.
The code requires just one line, but it's quite long and has 4 different values!
-webkit-box-shadow: 3px 5px 10px #ccc;
For the first value, I've used 3px. This one determines the horizontal distance between the drop shadow and the div element. Moving along, the second value, 5px, determines the vertical distance between the shadow and the box.
Yet there is another px value, 10px. This is the radius of the shadow - which in plain English means the blur of the shadow, or how "wide" the gradient is.
Finally, the last value determines the color of the shadow. This means the shadow is not only limited to grayscale; we can also use red (#f00) as a value, which renders a bright, red shadow.
For our final code, it comes down to the following:
#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}
As you can see I've given the div a white background, a black border and a light grey shadow.
6: Resize It!
With the most recent version of CSS, it's possible to resize elements. (It currently only works in Safari.)
With this code, it's possible to make a tiny triangle appear in the bottom right corner of an element. You may then drag it to resize. The code to follow is yet again very easy, and just requires one line and is supported by some older elements you might already know. These are "max-width", "max-height", "min-width" and "min-height".
The code is as follows:
#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}
In the code I've used 2 additional lines to our normal CSS, "resize: both;" and "overflow: auto;". The line with overflow is needed to make the resize work, it can be any sort of "overflow" value, as long as it's there.
The other line I've used is "resize: both;". This line specifies that the element can be resized in both horizontal and vertical directions.
Conclusion
What should you take from this article? In the next few years, your job will become easier, webpages will load faster, and you'll be left with more time for your family! Though you can't rely on these effects to work in all browsers just yet - there's absolutely nothing wrong with applying a rounded corner to a div in one browser, and not the other. Consider it an upgrade!
For more information on CSS3, you can visit http://www.css3.info.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Kevin January 1st
thanks for this very helpful, but when does CSS3 come out?
( )Justin Shreve January 1st
Good Tutorial!
It’ll be nice when all the browsers support CSS3
.
( )Nate January 1st
Typo there! “Unfortunately, only Safari and Chrome support the feature t this time.” in the drop shadow part. the “t” should be “it”. Good tut anyway!
( )Nate January 1st
Sorry for double comment… actually, the “t” shouldn’t be there at all!
( )Jeffrey Way January 1st
@Nate – wow you’re quick. Just fixed it a moment ago.
( )Shane January 1st
Nice to see some of the newer features. One thing that I’m excited about is multiple backgrounds. Find out more about multiple backgrounds here.
( )Jeffrey Way January 1st
@Shane – Me too. I wish Daan would have covered that.
( )Ben January 1st
These have been around for a while and are straight forward to use which is great. Shame we’ve got to wait for everyone to catch up!
( )Blake January 1st
Yeah, these “techniques” can only be seen in either the latest updated Firefox browser or Internet Explorer 8.
( )Adam January 1st
@Nate, actually just to please your pathetic-ness, it should be “…feature at this time”, removing the t doesnt make sense. In future just thank for the tutorials / articles instead of clinching on to spelling mistakes. I hate people who do that.
( )Dan Harper January 1st
Two other good ones are text-shadow (works in Safari) like so:
text-shadow: 1px 1px #010101;
In the way of ‘Distance Down’, ‘Distance Right’, ‘Colour’.
Also ::-moz-selection { } allows you to change the colour when you highlight text on a page, eg:
::-moz-selection, ::selection {
background: #c6c7c7;
color: #010101;
}
Which works in Firefox & Safari.
( )Ernie January 1st
It sucks that people don’t update their browsers – I’m tired of making sites compatible with IE6!
( )Jeffrey Way January 1st
@Blake – They work in Safari/Chrome as well.
( )C.44 January 1st
These techniques are nice and all, but as long as on of the worlds most used browsers isn’t even compliant with the current methods… Besides, having a website showing rounded corners with dropshadows and other gimmicks and none of that in none-compliant browsers is just bad practice.
( )Cameron January 1st
I’m a little confused – isn’t all the -moz and -webkit actually just browser specific ‘tricks’, much like IE-specific filter, etc.
Why are these so much better and IE’s so much worse? I’d presume true css3 would be devoid of browser-specific precursors?
The list is pretty sweet, I’m just wondering why some of those are classified as css3 – it’s one thing discussing which browser supports what css3 tricks (as all the modern browsers only support some of them) – it’s another using browser- or base-code- (webkit) -specific effects – I don’t see how they can be called css3?
Am I missing something? I’m seriously wondering, as I’ve seen it discussed as this before, and just wondering why.
Thanks,
( )Cam
Gareth January 1st
Great! I can’t wait to start using these- especially the rounded corners… No longer do we need separate images and (tedious) complicated CSS!
( )Jack Franklin January 1st
Nice read, thanks. I wonder when we can expect those features to work in all the major browsers – does IE7 support these?
PS – Jeffrey earlier I emailed a submission through, just to let you know
Enjoyed the tutorial, so thanks author
( )Pedro January 1st
Nice!
( )macias January 1st
nice useful corners.. by code…
( )Daquan Wright January 1st
Wow…I’ve taught myself xhtml and css already. I realize just how versatile and how fast CSS development continues. It’s already a highly scalable and versatile language as it is and future features will only simplify tasks. The resize, opacity, and rounded corner features excite me the most.
( )Ben Carroll January 1st
This article is kind of pointless. Well at least until we can actually use CSS3! Sure its cool and all but we can’t use it in practice unless your audience uses firefox and safari exclusively.
( )M$ should just ditch IE rendering engine and adopt the gecko engine. That would stop limiting the web.
Lee January 1st
Why is there a Linebreak in the DOCTYPE?
( )And your BR, and IMG tags need to be self closing
Web Agentur Schweiz January 1st
Another typo, in the XHTML, there probably shouldn’t be a BR after the DOCTYPE.
Nice article nonetheless
Also, to those ppl asking about the -moz & -webkit “hacks”: They’re not hacks, as these items might not be fully standardized in CSS3 (afaik, CSS 3 is in parts still quite a “moving target”, eg. subject to changes). Besides, you can daisy-chain the “hacks”, then add a final “correct”, non-hack, eg:
#shadow {
-webkit-box-shadow: 3px 5px 10px #ccc;
box-shadow: 3px 5px 10px #ccc;
}
That way, webkit-based browsers (Safari & Chrome) will take the first definition, and until they fully support the non-hack, they’ll just ignore the second box-shadow definition.
( )Peter January 1st
I believe that, at least with Firefox 3 on OS X, there IS a limit for border-radius. It depends on how big the element is. I think the limit is around 1/3 of the width of the element.
( )James January 1st
@Cameron, It’s common for browsers to implement parts of specifications before they are officially recommended by the W3C and it is custom to prefix such availabilities so as not to disrupt with the eventual implementation of the entire specification. This is especially true with CSS3 as it has become a bit of a ‘moving target’ and so it makes more sense for major vendors to implement new features at their discretion.
It is odd, I agree, and does often look like proprietary browser code… Firefox supported opacity from version 0.9 but prefixed it with -moz- since it was in no real specification at that time, but now it is in a specification, CSS3, and so firefox and many other browsers have implemented it with no prefixes. In fact, firefox no longer supports -moz-opacity. (as of 3.1) I think this hasn’t occured with other properties because they’re more involved – browser vendors are still experimenting -
( )Zen Elements January 1st
Fantastic article for first time CSS3 users!
I’ve dabbled with a few of these effects myself and when support across more browsers is given for it, I’ll be happily implimenting it more readily in websites
Thanks Daan Weijers for the write up!
( )Daan Weijers January 1st
Thanks for the kind words guys.
I’m sorry of the HTML. I started doing this tutorial, using that code. But in the end I started over, but I still use the same html. The image tag shouldn’t even be there. I think I can send Jeffrey an updated version of the tutorial because I can’t edit myself.
( )Jauhari January 1st
CSS Rule
( )sean January 1st
I like the resize effect.
( )Ryan January 1st
First, great job.
( )Second, I agree with folks about IE. I admit I have been a big fan of MS products for a long time, but the time came about a year ago to move to better products. IE. Firefox, Safari and now even Chrome. MS wake up, everyone is passing you by.
Zach Dunn January 1st
It’ll be nice to be able to modify edges and opacity without having to save a separate design comp.
( )M.A.Yoosuf January 1st
hi guys i found this code in WordPress 2.7, i have commented the area witch was i know, will you guys help me what the use of “-webkit-border-radius”
#test {
-moz-border-radius: 10px; // for mizilla
-khtml-border-radius: 10px; //for safari
-webkit-border-radius: 10px;
border-radius: 10px; //CSS3 property
text-decoration: none;
height:200px;
width:300px;
background:#ededed;
}
M.A.Yoosuf
( )http://yoosuf.awardspace.com/
Sarbartha January 1st
Well documented tutorial.
( )But, till date most people are using IE6. That’s weary thing. We designer can’t show our talent on it. We should make voice of upgrading to latest version of IE or Firefox.
VertigoSFX January 1st
Once time moves on this will be great having all these effects. But for now it is just cool to look at
( )eraevion January 2nd
Great article, thanks!
( )Juul Coolen January 2nd
Even though we can’t use these features to their full potential as of yet, it’s good to be already somewhat familiar with them.
CSS3 should make the life of a web designer easier, which is of course a positive thing. Besides the ones discussed above, I’m really excited for the @font-face rule of CSS3, making it possible to include custom fonts.
If only all main browsers would support these features, the web would be a better place
( )Ahad January 2nd
Good tutorial.
@Shane: Thanks for bringing that to our/my attention! Good looking out dude.
Acquainting yourself with CSS 3 can be a lot of fun, and at times it can be frustrating because of the lack of support in IE.
After you all pick up the basics make sure that you use Firefox’s Firebug or Web Developer extensions. Chrome has a CSS inspector built in so you can use that as well.
It’s not about stealing someones design (that aint cool!) but checking out how pros code their css is always a good way to learn advanced techniques.
@IE Haters: I don’t like IE at all, but what to do here? IE has been getting hacked over and over (very recently too) It might be coming close to the end of IE.
GL you all…
( )arshad January 2nd
iam amazed by the improvements in both css and html 5 .
( )sercan virlan January 2nd
good tutorial
( )Michael Rice January 2nd
Too bad we can’t expect CSS3 to be supported in all browsers for a while!
( )Bahalul Kabir January 2nd
Nice
( )Falcon January 2nd
Pretty nice feature! No need to have PS tools!
( )Shane January 2nd
I don’t think we’ll ever have a situation where every latest browser version will support all CSS features, or support them all without little quirks.
However, the fact that not all commonly-used browsers support a particular feature is not a reason to not use it. IE6, as we all know, doesn’t support the features discussed in the tutorial, but that doesn’t mean that as designers, we shouldn’t adopt an approach that supports progressive enhancement. That is to say, try to avoid features that MUST be supported in all browsers for it to be a viable design, but support those browser features and features that allow us to do the nicer stuff. That way, the people with lesser browsers can still use the site, but those with the more standards-aware browsers get the nicer design.
As an example, view the 24 ways website in IE6, and Firefox 3. You’ll see quite a difference, with the Firefox version looking much nicer, but the site is still perfectly usable in IE6.
Happy new Year everybody!
( )Justin January 2nd
It’s like a shiny new toy you can’t play with. Thanks for the article. It will be a year or more before we can stop having to design for IE6. These fun little tricks will just have to be done the regular way for now.
Looking forward to the day when I don’t have to hack my CSS for IE.
( )Shane January 2nd
Sorry for repeat comment. My previous one should say that ‘we _should_ adopt an approach that supports progressive enhancement.’
( )Topher January 2nd
Poorly named post. Most of what’s here is browser specific, not in any way CSS3.
( )Paris Vega January 3rd
Cool… now if someone would just snipe Internet Explorer for me. Anyone. I’ll pay cash. Seriously. Some one take it down. I know… IE8, right. It’s too late. Its torturous dictatorial rule over the web has damaged the productivity our industry long enough. It must be brought to justice. Who’s with me?! Viva la Revolución!!
( )Youssef January 3rd
Very coool… i love this article
( )thanks
Francisco Aguilera G. January 3rd
Thanks it’s so cool
( )octagon January 3rd
What’s the issue here as far as compatibility is concerned, for now build your clean sites with no extra markup for round corners. Make sure the ui looks awesome for old browsers and then apply any “CSS3″ effects you want to boost the appearance for modern browsers.
If you really are a designer you should be able to see these bits of CSS3 support as a bonus and not just ignore them because MS neglected the Internet for a god damn decade.
( )Steve January 3rd
This tutorial is kinda silly, as it only pertains to Firefox, Safari, and to some degree, Chrome, so right now, only 20-30% of users.
Most of these effects don’t work in IE or Opera. I prefer not to use browser-specific CSS, as it is not conforming to web standards. Thought these affects are nice to add some extra “wow” factor to things, I wouldn’t rely on them to be major parts of your website.
However, nice to see what’s coming around the bend. Until IE supports this stuff, I won’t be using any of these methods, as that’s still 60+% of my audience in most cases.
( )Shane January 4th
OK. Guys. This is not a silly or worthless tutorial.
Take a look at this article on Progressive Enhancement.
( )James January 4th
Steve, these effects are NOT browser specific properties, they are all early adoptions of W3C’s CSS3 draft specification! You might consider opacity a “browser specific” property but I bet you use that!
( )Anthony James Bruno January 4th
It really is a shame to see so many comments that are simply turning down the use of CSS3 due to it not being supported in all browsers. Progressive Enhancement is your friend, and its time we started thinking about the future.
( )Ryan January 4th
To those saying this post is pointless or that you can’t use this code “yet”.
Check your analytics.
For some of us, 70% of our visitors are on mozilla, another 10%-20% on webkit and so we’re completely happy to implement this.
The goons using IE just get the same ol’ boxes, but for me that’s only 10% of my visitors.
Speaking of IE: IE8 appears to have left out rounded corners AGAIN. So if you’re waiting for IE to support these specs, you’d better get comfortable.
Personally, I’m using it. If a client wants IE to have corners than that’s extra–IE style support always costs double for my clients.
( )Wazdesign January 4th
Ok . tell . is IE 8 supports multiple background and the CSS3 properties.?
( )Wasim January 5th
I want to Use it Anyway …
( )Jehzeel Laurente January 5th
very useful tut. I’ll ratimark this
( )Abhijit January 5th
Thanks for the article. Firefox 3.1 has added the box-shadow property through -moz-box-shadow. Its still in beta though.
( )Bryan P January 5th
Sounds like we cant just rest on our previous knowledge of CSS. How does this code degrade in current and previous browsers? And how long will it take for it to become compliant?
( )Brent January 5th
IE6 just can’t die fast enough…
( )MrDan January 6th
It’s nice to know it can be used for test and training, but using it for production would be completely pointless.
I’m tired of writing several different instances of code for the exact same result in several browsers, and using -webkit -moz and suchlikes are just a way to end up adding later the same property for yet another browser (not YaB) until it takes you twice more time when you wanna maintain/update your code.
I’m not against the evolution of css, it’s just that jumping at it too early seems to me like a long term pain in the neck.
( )Shane January 6th
@Bryan. Being involved with software/web development doesn’t afford us the luxury of resting; surely that’s one of the pleasures – that there are always new things to learn and use.
How does it degrade? Well, put simply, it doesn’t work – specifying rounded corners or shadows, or opacity in this way won’t have an affect.
How long will it take to become compliant? Not an easy one to answer – my guess is it could be a while. The main thing is that we can use these properties in our designs right now.
Have a look at this site:
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
( )Timothy January 6th
What’s the point of learning CSS3 at this point? There is always one browser (currently IE, formerly Netscape) that holds back progress of web development as a whole. For all we know, IE8 still won’t even support CSS2 completely.
Why would you spend your time rounding edges and assigning multiple borders when you would be leaving IE6, IE7 and probably IE8 users in the dust (who are the majority of users).
Don’t get me wrong. I am all for progress. CSS3 has some great value. And I hope it is fully released soon, since the earlier it is released the sooner it will be incorporated as a standard. But that’s just the problem. There is no authority forcing it as a standard. Microsoft and some other vendors lack any serious commitment to these standards.
We should push for progress and standards, but we should continue to enhance our understanding and expertise of earlier technology until adaptation of new technology is granted.
( )Paul January 6th
Someone just needs to start a grass roots campaign to blacklist IE. This won’t work on enterprise or professional business sites, but Everyone running their own blog or personal sites should include javascript to direct IE users to all of the major modern (and free) browser download pages and refuse to show them content. If people stop browsing in IE at home they will request other browsers in the workplace because they will grow increasingly unfamiliar with the poor product and start to judge it based on it’s merits (or lack thereof) instead of using it because it’s familiar. It’s time that we stop consuming Microsoft’s poor products and cut them loose. They have done nothing valuable for the marketplace in nearly 10 years. If I sold Falafel and my sandwiches tasted like dirt, I would go out of business. Why is this not so for Microsoft? We are to blame.
( )Nick January 6th
nice effect… the dropshadow via css…
I know you can do it in photoshop… but is there a way to add a dropshadow to a div that is populated dynamically so that the height of the div differs according to the content?
I guess u need to use ‘repeat’?
( )Shane January 7th
@Timothy – I couldn’t disagree more.
If we all adopted the lowest common denominator approach, we’d never move forward. If nobody was using CSS3, there would be less reason for browsers to adopt it, so the fact that it is being used is, in my opinion, a driving force.
As for IE6, yes, we all wish it would it would die. That’s a given.
Some well known sites, such as apple and facebook are already dropping full support for IE6. If nobody pushes things forward in this way, we’ll never move forwards.
( )Wayne January 7th
Cool tut — thanks, Daan.
( )z.Yleo77 January 11th
cool I like it .
( )Ian Hutchinson January 11th
It’s nice to see some elements that we would usually have to rely on with Javascript to achieve to be built into CSS.
Not to be a pessimist, but I’m not keeping my hopes up though for a while though, I doubt the market share of browsers will be large enough for CSS3 to actually implement it in a site.
( )darkkoder January 11th
Good read. May be you could mention in the opacity section that the same effect can be produced in IE with this line of code:
filter:alpha(opacity=30);
( )Prabin Karmacharya January 13th
Great Article! Keep it up man
( )charitha January 14th
nice. but couldn’t work in IE……
( )Classic Casual Games January 15th
Great Article, looking forward to all browsers accepting it…
( )Shane January 15th
@darkkoder – yep, but that ain’t valid CSS.
( )Jason January 28th
These are going to be great once they are widely accepted in all the browsers. I know I spend a considerable amount of time saving images to pull of these effects now.
( )Nicole February 16th
CSS3 is great and I wish all browsers could support it. Also, I wish every time I do something in CSS3, it wouldn’t come up as an error when validating >.<
( )la ode adam February 20th
CSS3 is out now ????
( )Brian March 11th
Thanks for this! – Bri
( )Jeraldo March 14th
Can I use this now? I mean does the most used browsers out there Firefox, IE and Safari support this? I always wanted to do round corners in an easier way.
( )Steven Knight March 20th
I’ve started to use a simple PHP code in the header of all my sites which directs all IE6 users to the Internet Explorer 8 homepage — seeing as it’s now officially released — so, that’s one thing off my mind, still annoying that I’m blocking out 1/5 of Internet users.
( )Maxime March 23rd
I love these tutorials a lot!!!
( )I didn’t know Safari could be run on a regular pc, but what a strong feeling to be able to use it with CSS3!!!
Gene April 10th
Nice tut! Been using this on my project, although it can’t be viewed OK in IE.
Anyhow, thanks!
( )Mehdi April 16th
Yeah , That’s Good . But As Long As IE6 alive We Can’t Use This !!!
( )Zyend June 16th
amen brother
( )Xekushuna July 3rd
Somehow, this never works with IE
( )Arvind August 8th
Thnx for tutorial.. I want to ask a question how can I get rounded corner by using CSS3 in Opera 9.5+.
( )Kenn Sven Boostrom August 14th
I”m still not sure how it works – but it works really well. Especially the shadow. Great reference.
( )jayvee September 12th
I had a great read here. I have used these techniques not for IE though.. thanks to you tut.
( )sooran September 15th
very Nice!
Tancks … very
( )Emiii October 11th
Tranks for sharing
( )