Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.
RGBA
The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque).
RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.
Text Shadow
Text shadow is structured in the following order: x-offset, y-offset, blur, and color;
Set a negative value for x-offset to shift the shadow to the left. Set a negative value for y-offset to shift the shadow to the top. Don’t forget you can use RGBA values for the shadow color.
You can also specify a list of text-shadow (separated by a comma). The following example uses two text-shadow declarations to make a letter press effect (1px top and 1px bottom).
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
Border Radius
The shorthand for border radius is similar to the padding and margin property (eg. border-radius: 20px). In order for the browsers to render the border radius, add "-webkit-" in font of the property name for webkit browsers and "-moz-" for Firefox.
You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.
Box Shadow
The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.
Again, you can apply more than one box shadow. The following example is a list of three box shadow declarations.
-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);
Christina
Great to know that you can apply more than one shadow, that’s excellent :D Thanks Nick!
jzigbe
Nicely explained!
Andrew Fairlie
Good article, as always Nick! Keep it up!
Michael Clayton
Nice simple explanations, thanks Nick. Echoing Christina, it’s great to know you can apply more than one shadow :)
Joffrey
Wow, I didn’t know the tip for different box shadows, it’s perfect for buttons!
Joakim
I guess sarcasm doesn’t really register with the readers, huh…
Sarah Sarniak
I already knew about most of these. Some great new additions. Thanks!
Cristina Sturm
Nice! I didn’t know you could apply more then one shadow at a time. Thanks for this! :D
Shiva
The multiple shadows was indeed interesting, a good use might be as a background for smaller images in blogs etc. Thank you!
Claude Sammut
thanks for placing all the basics in one simple post :)
Niubi
Wow, some great content there. I’m really looking forward to implementing all the new features that CSS3 is going to bring to the table. I can’t wait to see how DubLi can be changed!
JC
So much cool stuff in CSS3….I can’t wait until it is fully adopted (whenever that will be) and we can use it without any worries about browser support.
cwylie0
I’m really looking forward to using some of these techniques… and then having to convince clients to update their browsers.
Jordan Walker
CSS3 is definitely coming into play with more designers and developers implementing it into their projects. I wish the majority leader browser would modify Triton with the latest standards.
matthew Aebersold
This is a great roundup of the basics, thank you for this post! Maybe something to add would be notes of specific browser incompatibilities?
Thanks again! Awesome.
Chris Janus
CSS3 is amazing! can’t wait until the browsers catch up so i can actually use it regularly though…
TuniLame
Really thanks for these tips…
I didn’t think using CSS3 was so easy and helpful!
Debbie McClintock
Very clear and concise. Beautiful presentation. Thanks so much!
CoryMathews
Couple small complaints about this overall good article.
On the Border radius the four corners demo does not have the normal border-radius. This only lets it work in Gecko and Webkit. Opera which properly renders the border-radius gets ignored as will future versions of gecko and chrome.
And you did the same thing on the box-shadow part except you just completely ignored the box-shadow css3 element.
Adding -moz and -webkit is not css3. The box-shadow and border-radius are css3. Please fix you examples so that the effects are learned and used correctly instead of how they are shown.
Om Ipit
nice post, with this basic, i can improve my css3 skill.
i use the basic for my article, u can see another example in my blog here.
Misael
Very helpful post, cleared up some things for me. Thanks!
Andy Stratton
Great, quick post. I wasn’t aware of the multiple box-shadow capability!
Marc
Thanks really gerate summary… this will save me a lot of time!!
Mark Duffy
Yes, i thought the moz and webkit prefixes where CSS2.1? And Jordan, i think you mean trident. ;-) ie sux.
Andrew
That stopped me from scratchin my head… Thanks!!
Will Smith
Well now that its summed up its time to play about a wee bit more :) Thanks.
Hian Battiston
Amazing tips! Thanks so much!
Hiren Mehta
Border Radius & Four Corners are not working under IE 7 & 8. Please check css and send me working css in IE. according to me same css should work on all browsers.
Joey
Hiren, webkit- or moz- border radius is not supported in IE 7 or 8. I’m not sure about the border-radius element, but I also doubt that works, especially in IE 7.
And to say that the same css should work in all browsers is definitely wrong.
Daniel Long
This is a really good follow up post from the last CSS3 post.
The R, G, B, A technique is really useful for overlaying divs on a textured background. Another great technique is applying text shadows. It’s a shame they aren’t supported by ie yet.
Hiren Mehta
Hi joey, we make site should be compatible in all browsers and not for only mozilla. option is very nice but should be working under all.. anyways this site has useful information but need to check working under all :)
cchana
good overview… these basics are already quite popular as far as i can see, but a lot of the time, it’s still down to developers to use hacks/images to get things like rounded corners in place. hope the spec is signed off quickly so we can just get to grips with these powerful additions!
Mary
The only issue I see is that we have to give up hex codes in favor to RGB values with the RGBA thing… Apart from that, GREAT!
Joey
Hiren, I completely agree. When you make a site, it should look good in every browser. I didn’t mean to imply anything different. All I was saying is that IE doesn’t support the majority of CSS3. This has nothing to do with how the CSS is written. The problem lies with IE and not the above mentioned CSS.
Antony de Navarro
Great introduction, thanks.
In your border-radius example shouldn’t ‘border-radius’ come below moz- and webkit- versions so that as all browsers start to support the default ‘border-radius’ css this is the one that overrides?
Famba
I needed it! Thank you!
Alex
I needed it! Thank you!
Steffen Geyer
I’m a bit confused… I learned to use fontbased sizes like em in my CSS. Isn’t this also best practice for border-radius etc.?
If so – why are your examples with px?
zohaib
this is very useful info. lets start work on css3. this article will help me a lot.
DANIEL Long
Hi all,
Free check your website worth:
websitereckon.com
WebsiteReckon contains a collection of useful features such as checking Google Page Rank (PR), Compete and Alexa Traffic Rank, Backlinks Checker, Server IP and Location on Google Map, DMOZ and Yahoo Directory Listings and more. You can use it for various purposes include doing research before buying or selling website; want to find out how popular the website is; use it as SEO analytic tool to improve your site performance; or just about curiosity.
websitereckon.com
Kartlos Tchavelachvili
Thanks for (x-offset, y-offset, blur, color) explanation.
TordDesign
Useful post. Thanks! :-)
Chuck Norris
I have made Internet Explorer crash just by looking at it. NOW I AM BECOME DEATH DESTROYER OF WORLDS
Amanda Kay
I’ve bookmarked this excellent round-up for a quick and easy reference when trying to explain how CSS3 elements can enhance the overall design in supporting browsers. Personally, I love making subtle improvements to my designs with these specifications, especially when the load on the server is minimized by the lack of images in order to create these effects.
Thanks for the simple explanations =]
Lukas Sumarli
Nice introduction! Now, that css 3 has emerged, designer + coder will use less image editing software for this kind of effects. However, I’m pretty sure IE users will still left behind for this. Come on, Microsoft! Get your game ahead! It’s time to move in alignment with open source, web compliant browser!
Adam
Great article. I really didn’t know you could apply more than text shadow or box shadow to an element. Nice one!
Cobby
The latest versions of Firefox (and possibly earlier version) support a spread value for box shadow, works just the same as in Fireworks, Photoshop, etc.
Heres a great box-shadow article you can read, found it on MDC. Shows you seam really neat effect you can achieve.
Fred
Very good tutorial, and simple as well. It’s crucial the webmasters learn now the basics of CSS3 :)
Matt Bee
Always include the standard CSS3 declaration after borwser prefixed versions, the prefixes will be removed once made a stable spec, so you need forward compatibility.
Also, FYI, the box-shadow method has actually been removed form the CSS3 background and borders module, it may be reintroduced after further discussion, but there’s always a chance it might not be.
From the W3C:
Adam Akers
Great post, I’ve tried out some CSS3 on my new site here
Attack From Planet B
I used Box Shadow on my images
jinni
What is your website worth?
Calculate your website real value and earning:
websitereckon.com
thanks
rohit
yes you are right
WebsiteReckon.com outstanding web analytic tools on the internet today. You can use it for FREE. More than website value calculation, are target specific Traffic, pageviews. Fantastic!
TATEMAN
Hey Nick.
Yes, nice post thanks. I posted on these topics several times. But, this one is good enough to stand on its own.
I guess I just have a question for everyone? Is anyone else worried that too much power is being given with CSS3? Does everyone remember back to about 2000 when everyone and their mom said they were a web designer/webmaster? That spawned such puke such as Front Page and Fusion.
Anyway, with @font-face, border-radius, text-shadow, animations, transitions, etc available, are we worried that sites are going to go too far we these? Hell, people spend years studying typography. And now with cool sites like fontsquirrel, I can add Franklin Gothic Templeton Moron san-serif to my page without a hitch! Might websites go from one extreme (6 crappy fonts) to the other (millions) without people properly understanding the complexities of the subject?
Anyway, just ranting I guess. I am personally so excited about the web these days! I hope everyone else is too!
Cheers,
TATEMAN
Sam Ng
very helpful. Thanks much!
website design franchise
Great tutorial!I’m not a web designer myself but i really enjoy what you shared here.I will apply this on the basic CSS work in the future.
Wed Design Maidstone
I have recently tried CSS3, this helped me alot, thanks for the tutorial! Very helpful.
Wed Design Maidstone
I have recently tried some CSS3 on my site, this was really helpful, thanks for the tutorial.
kevin
Simple and clear, perfect!
Chicago Web Design
CSS3 is one of the most potential carrying systems ever. Glad to see its expansion and growth moving rapidly.
aakash
Calculate your website real value and earning:
websitereckon.com
Spamtastic
FFS install a god damn spam detector this site is ghetto’d with the spam
OWL
Thanks :D
Alex
Nice round up, could you do one for HTML 5 also? ;)
Julius
I would also love it if all readers could please try to restrain themselves for thanking every article. Yes, they are great and we all learn alot from them, but why can’t you comment when you actually have something to contribute? 100 comments with “Thanks :)” give the author butkiss and other readers a chance to miss the actual useful comments. (PS! I don’t mean to be rude..)
ooty
nice stuff
Liz
Julius: So… what does your comment contribute? Or are you the pot calling the kettle black….
Anyway… THANKS ;) for this. I’m excited about these new tools but I’m so scared of all the hideous drop shadows we’re probably going to see… ack!
Elizabeth Kaylene
Julius,
Thank YOU for setting some guidelines here on your blog.
Nick,
This was a wonderful post. THANK YOU. I’m going to print it out and use it as a reference. Hopefully other browsers will catch up and enable webkit soon; it’s a shame that many users can’t see these awesome attributes.
Vaughn
I didn’t realize text-shadow or box-shadow accepted multiple values… very nice!
Andy
The four corner radius is great, real freedom there to style other wise boring boxes without using images Great!
How compatible are these styles though? I work in the latest firefox on mac but wonder what they would look like on an old PC somewhere in the dark depths. Probably just as square corners?
Ajay
Great tutorial! Thanks
Adrian
I haven’t really started using much css3 as of yet, still a bit concerned about the compatibility with browsers etc, however I’m trying to get to grips with things as it’s only a matter of time before it becomes the norm.
I hadn’t thought about using different radius values for individual rounded corners, could produce some interesting effects.
It seems like there’s so much to learn with css3,
thanks for the info :o)
Ab
good tiny tutorial. thank a lot.
webppd
Very Good！
chinu
“Border Radius” CSS this is working only in mozillia not working in IE 7, IE8
please provide soulation if you have so it can work In IE also
flash
quote – “The following example is a list of three box shadow declarations”
I had no idea you could apply multiple shadows on one element.. but of course it makes sense.
Great stuff
mike
@chinu
-ms-border-radius was suposed to work in IE8 i don’t know if it were a rumor or true.
don’t know if some “filter / -ms-filter” would do the trick in IE7 too ..
also:
-khtml-border-radius (Konkeror)
and:
border-radius (opera)
nilika
great stuff…………..
WebsiteReckon.com outstanding web analytic tools on the internet today. You can use it for FREE. More than website value calculation, are target specific Traffic, pageviews. Fantastic!
nice site design ………..
websitereckon.com
Kenneth
Very Good！keep them comming.
509 Media
Very cool. Thanks for the up. I have a lot to learn about css3
zubair sota
aweeeeeeeeeeeeeeessssssssssssoooooooooooommmmmmmmmmm :) :)))))))))
anil
i want always new friends
paoling
thanks for this, i love how its short, sweet & extremely useful!
Alex
wow……awesome stuff……
Zoe
Incredibly helpful stuff, thank you again!!
Baloot
I’m using this CSS3 mostly on my blog. Check out my blog at http://blog.balootisme.com. Is it nice? :)
glynn
Just found this great site for css3. Seeing as there are some quite lengthy bits this is a good way of helping you not forget the syntax. You can edit the css sheet on the fly, delete parts and copy them to the clipboard!
http://css3please.com/
Lexsite
great article! lots of good information to help people get started with css3
I just wish that Internet Explorer would keep up with the new web trends the way that other browsers do.
mack
Very good, css3 and html5 will be the best web design standard in future. but the browser can not totally support it
WebBanshee
Thaaaaaank you : )))
Clear an useful …
You have been bookmarked.
Bests
Sam
Lee
Just what I was looking for, thanks for this.
Web Design
awesome stuff
thanks again for this great information
hillary
So helpful, you should write more of these kinds of posts. You explain things really well. :)
Web Design
wow ur awesome at explaining!! THANKS
Website Design
covers the basics… would really like to see more advanced features with CSS3
crusher
CSS text-shadow is useful but many navigtion don’t ..
Pariuri Sportive
Multiple backgrounds is too cool. I can see this coming in handy in many different ways. The CSS gradients will also be a great way to save on loading time. No more images when this is accepted as a standard. Great article!
Kyle Alm
Great examples, loved the speech bubbles too. Thanks!
Ismail Sunny
thank’s, it’s Amazing, i like rounded box shadow but still have bug in ie….
————————————————————————————————
sorry for my bad english…
chai
thanks.. this is veru usefull information?…
pandu
The Shadow & rounded corner stuff are not supported by IE, how to fix that one can you explain me..
utari
so cool, i can explore my css design with your tutorial, dude, thanks a lot!!
zakki
its look line simmilar with css3
ekozul
great tutorials, thanks,,,
arieff
CSS text-shadow is useful but many navigtion don’t ..
ardhan
nice example, but maybe you can more detail for the explanation
epry
terima kasih ya mas!!!!!!!!!!!……..thank you very very much in my language)
Ant
Thanks so much for the excellent css3 tutorials. This is just what I was looking for.
grinding mill
It is userful for me. thank you!
raymond mill
Thank you for your share and your useful information.
endy
great post. like this…
indyastari
very usefull..thankyou for the css3 tutorial
code pixelz media
very good. I like the way you present your article.
eric
i think still much the excess of css 3..
let gathering it together…
study study and much study…
:) nice post
God Bless you
arieff
Thanks so much for the excellent css3 tutorials. This is just what I was looking for.
doris
nice example, but maybe you can more detail for the explanation
Koje
People will thank you so much because of this great post :)
Thanks…
yohan
nice info, thanks for sharing :)
ilham
thanks for sharing
tedted
thank you for sharing and it’s very helpful cause i’m beginner
wij
Woow, nice info..
it look so great..
thanks for sharing..
dety
thanks. i can understand easily
Web Dizajn Bosna
interesting tutorials! THX
oky
i wanna learn CSS more… thanks for info…
kai
that’s good… i have tried it before
tedted
very helpful for newbie
yuli45com
it’s so useful for me… thanks very much…
rifky
lets try…
nofel
thx for share
aga
what a good posting!
alfa
nice basic css
alfa
i’ll try soon
dana
very useful..
dana
how does the code combine with tag html??
nuga
nice info
nuga
teach me more how using css code
alfred
i want to know how to design a website
which will be successeful
Ian Topple
Wow this was really helpful. I never knew about these new properties in CSS3. This is exciting! Thanks.
Solo
Thanks to your shared..
محطم
Actually,I like you blog’s comment board more.HAHA..Thanks.
stone crusher
I like it. I’ll try soon.
artistic-solutions
Very helpful information thanks for share!
Shahid
Thanks for Nice and useful CSS3 info…
pinksylvia
hello, I really appreciate your introduction about CSS3
I just transfered this article and show it on my blog
(the demo pictures are upload onto my blog’s album, that I think would not occupied any flow of your sites :DD )
And I also put the link at top of my transfer article.
If you don’t like this, please tell me and I’ll hide the article, and just store it for self learning!
pinksylvia
oh
I forgot to say
Thank you :))
sandro
only for me, It doesnt work for IE?
seolar
Thanks for this insights of css3 basics!
jacky
Oh God you are a genius person and a good photographer i like your pics thanks.
Steve Walker
Thanks a lot for sharing this! Great post! And no this won’t be support by IE until version 9 is released.
m.j.gritli
thank you for the post, i was looking for the border radius for a long time,
but is it working on IE
Arshad
Very informative for beginners
Vaishakh Pushpoth
Very informative and illustrated.
Thanks Nick.
-Vaishakh Pushpoth
Topan Aprilia
tnank you very much for you post, without this I’m never know CSS3,,,
Melvins
Nice tutorial on CSS3. I always eager to know about CSS3 more and more. Thanks for sharing.
Los Angeles Web Design
yogesh
thanks a lot..
Dave
Excellent. Exactly the info for CSS3 additions I was looking for.
Audrey
I’m new to web design and have been wondering how these effects were done. Now my problem is that I can’t fugre out why it won’t work in Dreamweaver CS3. Any ideas?
wuzu
thanks!
ScampMichael
You made shadows clear and taught me about creating multiple shadows. You will be one of the giants on whose shoulders I stand.
Juno Mindoes
As iphone 4 white 3GS has something of non-update to the iPhone range, but there are finally decent alternatives in the smartphone market, with the HTC Desire and Samsung Galaxy S leading the Android fight right to Apple’s door.
whiteiphone4
hanks a lot..
handbagspub
Just want to say what a great blog
lucy
I am on the lookout for such information white iPhone 4 .I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say
Rolex Oyster
Hi
this is really good,
Interesting post about The Power of Information Review launches
Good day
Saji Nediyanchath
Thanks a lot dude. I needed such a simple and descriptive reference to CSS3 basics.
Henry Peise
White iphone 4 avaiable! It’s a great news to tell you the latest white iphone 4 Conversion Kit is on sale. Get the chance to make your iphone more charming!
shoes
You’ve know idea how much time this has saved me in the forums thanks so much !
Uçak Bileti
bana yeterrr
Ben
Lol ,it is a great fun
Graphic Design Kent
This is an awesome guide. Used it for some of my text and box shadows
Daview
Great review — love pierogies — they are my comfort food reminding me of my dad that ate them often on Saturday nights uggs outlet
tütüne son
I am on the lookout for such information white iPhone 4 .I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say
Kasia
Great and simple article, thank You!
One of my favorite blogs :)
蚊子
讲解的直白而简洁.
真漂亮
nino
请不要使用中文。。。
Anonim
為什麼呢
luxury
凑热闹 留名……
How To Put On A Condom | How To Get Taller
Why can’t my professors be as brilliant as you…? You should have a school!
How To Get Taller | How To Put On A Condom
Awesomely crafted! More! More! More!!!
Miguel Quintas
two shadows in the same div.. finally! Thanks :)
Andrei Oprinca
yea, I know what you mean. I looked for that a lot as well heheh
Andrei Oprinca
This is so cool. I love it. I’m a CSS beginner and I like it so much. I learned “old css” and learning the new capabilities of CSS3 is just awesome. Thank you so much.
Bookmarked it for later, this is very interesting.
dexx
age of heart attack decreased with each passing day, he said.
orhanbt
Verry good.
complex41
And then he handed you the thirty-five 45
Ruth
These are really BEAUTIFUL, Nick! But just where do I put the codes?
Cheryl B
@Ruth –
“text-shadow”:
h1 {
color: #8B0000;
text-shadow: 5px 5px 5px #FF8C00;}
“border-radius” would be used with the ‘border’ property:
#box {
border: 2px solid;
border-radius: 25px;
-moz-border-radius: 25px;}
“box-shadow”:
#box2 {
background-color: yellow;
width: 250px;
height: 150px;
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; }
Hope this helps.
Lai Shao Yi
yeah!
this helps lot!
thank you.
360 xbox på spel xbox
Would it not end up being okay to apply your Rss or atom regarding this site?
Ahmad Awais
Your tutos made me subscribe your site !
Very nice tutorials !
Moliva
Would it not end up being okay to apply your Rss or atom regarding this site
LibertyBloggers
subscribed another great css chack, thank U mate :)
Felipe Machado
You could have more cross-browser compatibility with:
BORDER:
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
-moz-border-radius: 12px; /* FF1-3.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
BORDER SHADOW
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3-4, iOS 4.0.2 – 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 – 3.6 */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
Nice tutorial by the way!
Felipe Machado
I forgot to site my sources:
http://css3please.com/
These are the gays to thank to!
Prodyot
Insanely beautiful and useful tutorial.
Thanks for the tips.
bond chiwewe
basics of css and layout
Luthfi All
wow.., its so cool..
I like CSS3
thanks so much…, its so useful
Alicia
Very helpful tutorial! I knew about text-shadow, but using -1px to create a letterpress effect is new to me.
suresh kumar
useful tutorial for all.Three box shadow is beautiful..
www.eubtour.com
very nice!
Thank you!
Yue
These tips are really nice and those examples are very beautiful. Thanks a lot
artisaini
Thank u so much… really like it
DymoLabels
hi sir
Thanks for sharing these basics of Css3 with us
thanks