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

RGBA

RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.

RGBA 2

Text Shadow

Text shadow is structured in the following order: x-offset, y-offset, blur, and color;

screenshot

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.

text shadow 2

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;

text shadow 3

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.

border radius

You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.

border radius

Box Shadow

The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.

box shadow

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);

box shadow 2

202 Comments

Christina
Mar 3, 2010 at 6:52 am

Great to know that you can apply more than one shadow, that’s excellent :D Thanks Nick!

jzigbe
Mar 3, 2010 at 6:54 am

Nicely explained!

Andrew Fairlie
Mar 3, 2010 at 6:55 am

Good article, as always Nick! Keep it up!

Michael Clayton
Mar 3, 2010 at 6:58 am

Nice simple explanations, thanks Nick. Echoing Christina, it’s great to know you can apply more than one shadow :)

Joffrey
Mar 3, 2010 at 6:58 am

Wow, I didn’t know the tip for different box shadows, it’s perfect for buttons!

Joakim
Mar 3, 2010 at 7:11 am

I guess sarcasm doesn’t really register with the readers, huh…

Sarah Sarniak
Mar 3, 2010 at 7:37 am

I already knew about most of these. Some great new additions. Thanks!

Cristina Sturm
Mar 3, 2010 at 8:15 am

Nice! I didn’t know you could apply more then one shadow at a time. Thanks for this! :D

Shiva
Mar 3, 2010 at 8:29 am

The multiple shadows was indeed interesting, a good use might be as a background for smaller images in blogs etc. Thank you!

Claude Sammut
Mar 3, 2010 at 8:35 am

thanks for placing all the basics in one simple post :)

Niubi
Mar 3, 2010 at 9:03 am

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
Mar 3, 2010 at 9:20 am

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
Mar 3, 2010 at 10:04 am

I’m really looking forward to using some of these techniques… and then having to convince clients to update their browsers.

Jordan Walker
Mar 3, 2010 at 11:15 am

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
Mar 3, 2010 at 12:12 pm

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
Mar 3, 2010 at 1:36 pm

CSS3 is amazing! can’t wait until the browsers catch up so i can actually use it regularly though…

TuniLame
Mar 3, 2010 at 1:40 pm

Really thanks for these tips…
I didn’t think using CSS3 was so easy and helpful!

Debbie McClintock
Mar 3, 2010 at 1:40 pm

Very clear and concise. Beautiful presentation. Thanks so much!

CoryMathews
Mar 3, 2010 at 2:11 pm

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
Mar 3, 2010 at 2:13 pm

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
Mar 3, 2010 at 2:16 pm

Very helpful post, cleared up some things for me. Thanks!

Andy Stratton
Mar 3, 2010 at 2:56 pm

Great, quick post. I wasn’t aware of the multiple box-shadow capability!

Marc
Mar 3, 2010 at 3:10 pm

Thanks really gerate summary… this will save me a lot of time!!

Mark Duffy
Mar 3, 2010 at 3:32 pm

Yes, i thought the moz and webkit prefixes where CSS2.1? And Jordan, i think you mean trident. ;-) ie sux.

Andrew
Mar 3, 2010 at 6:18 pm

That stopped me from scratchin my head… Thanks!!

Will Smith
Mar 3, 2010 at 8:22 pm

Well now that its summed up its time to play about a wee bit more :) Thanks.

Hian Battiston
Mar 3, 2010 at 9:31 pm

Amazing tips! Thanks so much!

Hiren Mehta
Mar 4, 2010 at 2:54 am

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
Mar 4, 2010 at 3:11 am

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
Mar 4, 2010 at 3:59 am

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
Mar 4, 2010 at 4:11 am

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
Mar 4, 2010 at 4:18 am

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
Mar 4, 2010 at 4:47 am

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
Mar 4, 2010 at 6:23 am

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
Mar 4, 2010 at 7:27 am

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
Mar 4, 2010 at 8:59 am

I needed it! Thank you!

Alex
Mar 4, 2010 at 10:48 am

I needed it! Thank you!

Steffen Geyer
Mar 4, 2010 at 11:17 am

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
Mar 4, 2010 at 1:06 pm

this is very useful info. lets start work on css3. this article will help me a lot.

DANIEL Long
Mar 4, 2010 at 1:37 pm

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
Mar 4, 2010 at 1:52 pm

Thanks for (x-offset, y-offset, blur, color) explanation.

TordDesign
Mar 4, 2010 at 3:54 pm

Useful post. Thanks! :-)

Chuck Norris
Mar 4, 2010 at 4:32 pm

I have made Internet Explorer crash just by looking at it. NOW I AM BECOME DEATH DESTROYER OF WORLDS

Amanda Kay
Mar 4, 2010 at 5:27 pm

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
Mar 4, 2010 at 6:32 pm

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
Mar 4, 2010 at 8:36 pm

Great article. I really didn’t know you could apply more than text shadow or box shadow to an element. Nice one!

Cobby
Mar 4, 2010 at 10:18 pm

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
Mar 5, 2010 at 3:43 am

Very good tutorial, and simple as well. It’s crucial the webmasters learn now the basics of CSS3 :)

Matt Bee
Mar 5, 2010 at 5:36 am

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:

This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.” – http://www.w3.org/TR/css3-background/

Adam Akers
Mar 5, 2010 at 8:10 am

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
Mar 5, 2010 at 2:19 pm

What is your website worth?

Calculate your website real value and earning:

websitereckon.com

thanks

rohit
Mar 5, 2010 at 2:30 pm

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
Mar 6, 2010 at 12:35 pm

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
Mar 7, 2010 at 1:50 am

very helpful. Thanks much!

website design franchise
Mar 7, 2010 at 8:01 pm

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
Mar 8, 2010 at 5:07 am

I have recently tried CSS3, this helped me alot, thanks for the tutorial! Very helpful.

Wed Design Maidstone
Mar 8, 2010 at 5:10 am

I have recently tried some CSS3 on my site, this was really helpful, thanks for the tutorial.

kevin
Mar 8, 2010 at 9:40 am

Simple and clear, perfect!

Chicago Web Design
Mar 8, 2010 at 12:35 pm

CSS3 is one of the most potential carrying systems ever. Glad to see its expansion and growth moving rapidly.

aakash
Mar 8, 2010 at 1:57 pm

Calculate your website real value and earning:
websitereckon.com

Spamtastic
Mar 8, 2010 at 4:40 pm

FFS install a god damn spam detector this site is ghetto’d with the spam

OWL
Mar 8, 2010 at 11:54 pm

Thanks :D

Alex
Mar 9, 2010 at 5:43 am

Nice round up, could you do one for HTML 5 also? ;)

Julius
Mar 9, 2010 at 6:41 am

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
Mar 9, 2010 at 8:54 am

nice stuff

Liz
Mar 9, 2010 at 12:28 pm

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
Mar 9, 2010 at 2:22 pm

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
Mar 9, 2010 at 6:10 pm

I didn’t realize text-shadow or box-shadow accepted multiple values… very nice!

Andy
Mar 10, 2010 at 9:57 am

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
Mar 12, 2010 at 2:44 am

Great tutorial! Thanks

Adrian
Mar 12, 2010 at 9:49 am

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
Mar 12, 2010 at 1:27 pm

good tiny tutorial. thank a lot.

webppd
Mar 13, 2010 at 10:01 am

Very Good!

chinu
Mar 15, 2010 at 1:48 am

“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
Mar 15, 2010 at 6:38 am

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
Mar 17, 2010 at 10:25 am

@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
Mar 18, 2010 at 6:41 am

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
Mar 18, 2010 at 11:20 am

Very Good!keep them comming.

509 Media
Mar 21, 2010 at 2:50 pm

Very cool. Thanks for the up. I have a lot to learn about css3

zubair sota
Mar 23, 2010 at 2:36 am

aweeeeeeeeeeeeeeessssssssssssoooooooooooommmmmmmmmmm :) :)))))))))

anil
Mar 23, 2010 at 6:03 am

i want always new friends

paoling
Mar 24, 2010 at 11:18 am

thanks for this, i love how its short, sweet & extremely useful!

Alex
Mar 24, 2010 at 1:29 pm

wow……awesome stuff……

Zoe
Mar 27, 2010 at 5:25 am

Incredibly helpful stuff, thank you again!!

Baloot
Mar 29, 2010 at 3:01 pm

I’m using this CSS3 mostly on my blog. Check out my blog at http://blog.balootisme.com. Is it nice? :)

glynn
Mar 30, 2010 at 9:39 am

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
Mar 30, 2010 at 1:40 pm

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
Mar 31, 2010 at 3:00 am

Very good, css3 and html5 will be the best web design standard in future. but the browser can not totally support it

WebBanshee
Apr 2, 2010 at 8:59 pm

Thaaaaaank you : )))

Clear an useful …

You have been bookmarked.

Bests

Sam

Lee
Apr 4, 2010 at 5:28 am

Just what I was looking for, thanks for this.

Web Design
Apr 22, 2010 at 6:41 pm

awesome stuff
thanks again for this great information

hillary
Apr 23, 2010 at 7:28 am

So helpful, you should write more of these kinds of posts. You explain things really well. :)

Web Design
Apr 28, 2010 at 9:35 pm

wow ur awesome at explaining!! THANKS

Website Design
May 6, 2010 at 7:20 am

covers the basics… would really like to see more advanced features with CSS3

crusher
May 8, 2010 at 3:47 am

CSS text-shadow is useful but many navigtion don’t ..

Pariuri Sportive
May 13, 2010 at 5:16 pm

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
Jun 8, 2010 at 12:08 am

Great examples, loved the speech bubbles too. Thanks!

Ismail Sunny
Jun 10, 2010 at 6:34 am

thank’s, it’s Amazing, i like rounded box shadow but still have bug in ie….

————————————————————————————————
sorry for my bad english…

chai
Jun 15, 2010 at 4:02 am

thanks.. this is veru usefull information?…

pandu
Jun 18, 2010 at 7:49 am

The Shadow & rounded corner stuff are not supported by IE, how to fix that one can you explain me..

utari
Jun 24, 2010 at 10:36 am

so cool, i can explore my css design with your tutorial, dude, thanks a lot!!

zakki
Jun 26, 2010 at 4:54 am

its look line simmilar with css3

ekozul
Jun 26, 2010 at 6:23 pm

great tutorials, thanks,,,

arieff
Jun 27, 2010 at 1:15 am

CSS text-shadow is useful but many navigtion don’t ..

ardhan
Jun 27, 2010 at 3:44 am

nice example, but maybe you can more detail for the explanation

epry
Jun 27, 2010 at 11:17 am

terima kasih ya mas!!!!!!!!!!!……..thank you very very much in my language)

Ant
Jun 28, 2010 at 11:38 am

Thanks so much for the excellent css3 tutorials. This is just what I was looking for.

grinding mill
Jul 3, 2010 at 1:51 am

It is userful for me. thank you!

raymond mill
Jul 3, 2010 at 2:08 am

Thank you for your share and your useful information.

endy
Jul 6, 2010 at 4:50 am

great post. like this…

indyastari
Jul 8, 2010 at 2:25 am

very usefull..thankyou for the css3 tutorial

code pixelz media
Jul 8, 2010 at 5:36 am

very good. I like the way you present your article.

eric
Jul 8, 2010 at 11:55 am

i think still much the excess of css 3..
let gathering it together…
study study and much study…
:) nice post
God Bless you

arieff
Jul 12, 2010 at 7:29 am

Thanks so much for the excellent css3 tutorials. This is just what I was looking for.

doris
Jul 13, 2010 at 6:01 am

nice example, but maybe you can more detail for the explanation

Koje
Jul 13, 2010 at 4:02 pm

People will thank you so much because of this great post :)
Thanks…

yohan
Jul 13, 2010 at 10:09 pm

nice info, thanks for sharing :)

ilham
Jul 14, 2010 at 4:04 am

thanks for sharing

tedted
Jul 15, 2010 at 3:28 am

thank you for sharing and it’s very helpful cause i’m beginner

wij
Jul 17, 2010 at 5:43 am

Woow, nice info..
it look so great..
thanks for sharing..

dety
Jul 18, 2010 at 10:43 pm

thanks. i can understand easily

Web Dizajn Bosna
Jul 19, 2010 at 12:04 am

interesting tutorials! THX

oky
Jul 19, 2010 at 12:49 am

i wanna learn CSS more… thanks for info…

kai
Jul 19, 2010 at 8:00 pm

that’s good… i have tried it before

tedted
Jul 20, 2010 at 2:24 am

very helpful for newbie

yuli45com
Jul 20, 2010 at 11:13 pm

it’s so useful for me… thanks very much…

rifky
Jul 23, 2010 at 8:09 am

lets try…

nofel
Jul 25, 2010 at 9:11 am

thx for share

aga
Jul 28, 2010 at 12:49 am

what a good posting!

alfa
Jul 28, 2010 at 12:50 am

nice basic css

alfa
Jul 28, 2010 at 12:50 am

i’ll try soon

dana
Jul 28, 2010 at 12:51 am

very useful..

dana
Jul 28, 2010 at 12:53 am

how does the code combine with tag html??

nuga
Jul 28, 2010 at 12:54 am

nice info

nuga
Jul 28, 2010 at 12:55 am

teach me more how using css code

alfred
Jul 28, 2010 at 2:33 am

i want to know how to design a website
which will be successeful

Ian Topple
Jul 30, 2010 at 10:31 am

Wow this was really helpful. I never knew about these new properties in CSS3. This is exciting! Thanks.

Solo
Aug 4, 2010 at 1:16 am

Thanks to your shared..

محطم
Aug 7, 2010 at 1:59 am

Actually,I like you blog’s comment board more.HAHA..Thanks.

stone crusher
Aug 9, 2010 at 12:42 am

I like it. I’ll try soon.

artistic-solutions
Aug 12, 2010 at 1:54 am

Very helpful information thanks for share!

Shahid
Aug 13, 2010 at 4:49 am

Thanks for Nice and useful CSS3 info…

pinksylvia
Aug 13, 2010 at 11:25 pm

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
Aug 13, 2010 at 11:26 pm

oh
I forgot to say
Thank you :))

sandro
Aug 15, 2010 at 11:27 pm

only for me, It doesnt work for IE?

seolar
Sep 12, 2010 at 4:12 pm

Thanks for this insights of css3 basics!

jacky
Oct 7, 2010 at 10:02 pm

Oh God you are a genius person and a good photographer i like your pics thanks.

Steve Walker
Oct 12, 2010 at 7:17 am

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
Oct 13, 2010 at 3:03 pm

thank you for the post, i was looking for the border radius for a long time,
but is it working on IE

Arshad
Oct 14, 2010 at 1:31 pm

Very informative for beginners

Vaishakh Pushpoth
Oct 30, 2010 at 8:27 am

Very informative and illustrated.
Thanks Nick.
-Vaishakh Pushpoth

Topan Aprilia
Nov 1, 2010 at 1:42 am

tnank you very much for you post, without this I’m never know CSS3,,,

Melvins
Nov 3, 2010 at 1:00 am

Nice tutorial on CSS3. I always eager to know about CSS3 more and more. Thanks for sharing.

Los Angeles Web Design

yogesh
Nov 8, 2010 at 9:13 am

thanks a lot..

Dave
Nov 19, 2010 at 11:07 pm

Excellent. Exactly the info for CSS3 additions I was looking for.

Audrey
Dec 15, 2010 at 11:52 pm

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
Dec 17, 2010 at 12:26 am

thanks!

ScampMichael
Dec 18, 2010 at 8:21 am

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
Dec 23, 2010 at 10:02 pm

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
Dec 23, 2010 at 10:02 pm

hanks a lot..

handbagspub
Dec 23, 2010 at 10:03 pm

Just want to say what a great blog

lucy
Dec 24, 2010 at 3:07 am

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
Dec 24, 2010 at 6:58 am

Hi
this is really good,
Interesting post about The Power of Information Review launches
Good day

Saji Nediyanchath
Dec 24, 2010 at 4:05 pm

Thanks a lot dude. I needed such a simple and descriptive reference to CSS3 basics.

Henry Peise
Dec 24, 2010 at 8:51 pm

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
Dec 27, 2010 at 12:33 am

You’ve know idea how much time this has saved me in the forums thanks so much !

Uçak Bileti
Jan 11, 2011 at 3:35 pm

bana yeterrr

Ben
Jan 12, 2011 at 2:13 am

Lol ,it is a great fun

Graphic Design Kent
Jan 17, 2011 at 11:23 am

This is an awesome guide. Used it for some of my text and box shadows

Daview
Jan 22, 2011 at 2:09 am

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
Jan 29, 2011 at 4:01 pm

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
Mar 8, 2011 at 6:40 am

Great and simple article, thank You!
One of my favorite blogs :)

蚊子
Mar 12, 2011 at 8:59 am

讲解的直白而简洁.
真漂亮

nino
Apr 24, 2011 at 7:28 am

请不要使用中文。。。

Anonim
Jun 28, 2011 at 9:54 am

為什麼呢

luxury
Aug 7, 2011 at 10:02 am

凑热闹 留名……

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:57 pm

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
Mar 17, 2011 at 5:58 pm

Awesomely crafted! More! More! More!!!

Miguel Quintas
Mar 31, 2011 at 10:01 am

two shadows in the same div.. finally! Thanks :)

Andrei Oprinca
Apr 5, 2011 at 5:47 pm

yea, I know what you mean. I looked for that a lot as well heheh

Andrei Oprinca
Apr 5, 2011 at 5:46 pm

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
Apr 17, 2011 at 2:55 pm

age of heart attack decreased with each passing day, he said.

orhanbt
Jul 15, 2011 at 4:42 pm

Verry good.

complex41
Aug 23, 2011 at 11:48 am

And then he handed you the thirty-five 45

Ruth
Sep 7, 2011 at 1:13 am

These are really BEAUTIFUL, Nick! But just where do I put the codes?

Cheryl B
Sep 11, 2011 at 6:53 pm

@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
Dec 4, 2011 at 8:07 pm

yeah!
this helps lot!
thank you.

360 xbox på spel xbox
Oct 25, 2011 at 12:53 pm

Would it not end up being okay to apply your Rss or atom regarding this site?

Ahmad Awais
Nov 10, 2011 at 10:20 am

Your tutos made me subscribe your site !
Very nice tutorials !

Moliva
Dec 9, 2011 at 8:58 am

Would it not end up being okay to apply your Rss or atom regarding this site

LibertyBloggers
Jan 1, 2012 at 10:44 am

subscribed another great css chack, thank U mate :)

Felipe Machado
Jan 6, 2012 at 4:44 pm

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
Jan 6, 2012 at 4:45 pm

I forgot to site my sources:

http://css3please.com/

These are the gays to thank to!

Prodyot
Jan 19, 2012 at 10:45 pm

Insanely beautiful and useful tutorial.
Thanks for the tips.

bond chiwewe
Feb 13, 2012 at 3:30 pm

basics of css and layout

Luthfi All
May 20, 2012 at 12:42 am

wow.., its so cool..
I like CSS3

thanks so much…, its so useful

Alicia
Jun 6, 2012 at 5:49 am

Very helpful tutorial! I knew about text-shadow, but using -1px to create a letterpress effect is new to me.

suresh kumar
Jun 22, 2012 at 12:41 pm

useful tutorial for all.Three box shadow is beautiful..

www.eubtour.com
Jul 20, 2012 at 12:33 am

very nice!
Thank you!

Yue
Aug 14, 2012 at 10:02 pm

These tips are really nice and those examples are very beautiful. Thanks a lot

artisaini
Sep 10, 2012 at 7:25 am

Thank u so much… really like it

DymoLabels
Jun 1, 2013 at 3:35 am

hi sir
Thanks for sharing these basics of Css3 with us
thanks

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.