1 June 2010
Advanced CSS3 Box Shadow Techniques
We’re very close to the launch of Think Vitamin Membership, so I wanted to give you a preview of the kind of video courses that will be available.
Here is a five minute video that will teach you some advanced CSS3 Box Shadow techniques. We will be adding 70+ videos like this per month to the Think Vitamin Membership Training Course Library.
As a little treat, the next 10 people to signup at membership.thinkvitamin.com will receive 50% off their first month. Yay!
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 45 percent on your subscription.
bruce
# June 1, 2010 - 7:42 pm
Nice. For a truly advanced tutorial, I’d like to see the techniues future-proofed. In OE9, border-radius exists, as it does in Opera, but they don’t use vendor-specific prefixes like -webkit- and -moz. If you always ensure that you use each vendor-specific prefix -moz-, -ms-, -o-, – webkit- (i use alphabetical order), and then use the non-prefixed property, you’ll target every broweser:
It seems silly to only target two browsers when you can target them all in a future-proof wayt. (I showed this technique at Future of Web Design in London 2 weeks ago).
Bruce
Nick Pettit
# June 1, 2010 - 8:20 pm
Hey Bruce,
Thanks for the helpful feedback. I actually thought about this quite a bit before we started recording: The reason I’m only showing two vendor prefixes is for the sake of brevity, simplicity, and practicality. This video is meant to demonstrate box shadows, although in other tutorials I’ll cover the specifics of vendor-prefixes.
Think Vitamin Membership videos are less about showing a quick technique and more about gaining a real understanding of how things work.
Again, thanks for the feedback, it really does help. :)
Ryan Carson
# June 1, 2010 - 11:33 pm
Thanks for the feedback Bruce – much appreciated.
Adam Wintle
# June 1, 2010 - 7:59 pm
I gotta say I was impressed with that sneak peek. I was sceptical about these videos but this was very concise and clear. The guy you’ve chosen to do these is a great teacher.
I’m looking forward to some more previews.
Ben Everard
# June 1, 2010 - 10:19 pm
+1, I’m sure this is that chap that does *cough*Nettuts*cough* videos….
Regardless, was a very good video.
Oh, and I’m sure Bruce meant IE9, not OE9… didn’t he?
bruce
# June 2, 2010 - 11:33 am
yes, I did mean “IE”, Ben. Apologies all: mobile phones and typing more than “LOL WTF” are not something I’m adept at.
(No, I wasn’t drunk. After all the beer at Mr Carson’s marvellous Future of Web Design and my recent speaking engagement in Poland, I’m on the wagon. At least until @media next week ..)
Ryan Carson
# June 1, 2010 - 11:32 pm
Thanks Adam! :)
Cameron Jensen
# June 2, 2010 - 1:42 am
He has omitted ‘box-shadow’ in the examples, this works for opera and is useful for forwards compatibility.
Ryan Carson
# June 2, 2010 - 7:39 am
Hey Cameron, actually, at the end he talks about adding box-shadow into the example.
Keith Wolf
# June 2, 2010 - 1:47 am
Thanks for posting this preview; it’s very helpful to see the coming membership benefits in action (though I had no concerns of quality once I heard Nick was on board… great choice by the way. I think he will be a huge asset to you guys).
It’s kinda cool you are starting this project the very day I will start school to finally pursue web development as a career. This will be a HUGE supplement to my education.
Kudos!
– Keith
Ryan Carson
# June 2, 2010 - 7:39 am
Thanks Keith! Really appreciate it.
Joggink
# June 2, 2010 - 8:24 am
Very nice! At first I was a bit sceptic but they’re short and powerfull. Only minor is the px added to the zero pixels, as I’ve always learned to omit them. In the demo it doesn’t make a big difference in filesize, but in large css files, all pieces help.
Ryan Carson
# June 2, 2010 - 10:30 am
Thanks! Super glad you like the format. We’ve thought long and hard about it :)
Phil
# June 2, 2010 - 1:23 pm
Good job Ryan and Nick. The technique is pretty awesome. Too bad IE is still holding us back. I’m still too scared to use it for my clients. Most of them would be using IE most likely. Sigh. Should’ve gone in the printing business…
With kind regards from the Netherlands,
Phil
Ryan Carson
# June 2, 2010 - 9:02 pm
Hey Phil,
Thanks for the kind words – glad you liked the vid.
I know, it’s sad when you can’t use advanced methods because clients have old browsers. I guess that’s why we’re all so excited about IE9!
Best,
Ryan
devs
# June 2, 2010 - 5:41 pm
how to register? after insert email, it won appear in my email.
Mashkovtsev
# June 3, 2010 - 9:36 am
Wow… I came to your blog first time and amazing… I like very much light designs and your design very good!
But design is not main things for blog… The main is content and on your blog I found many articles, which struck me. :)
PS: sorry for my English- i’m from russia and learn english for 2 years, but I want to wtite this comment very much :)
David
# June 5, 2010 - 11:37 pm
I really like the videos : it’s much more communicative. Great work!
David
# June 7, 2010 - 4:09 pm
Great article, if only Microsoft would get IE9 out the door….
deepak kaletha
# June 16, 2010 - 7:28 am
Great Post, Thanks Ryan for posting
oVan
# July 2, 2010 - 5:40 am
The links don’t work (anymore). Are they broken or is there an alternative? Would really like to see it!
neel
# July 26, 2010 - 12:02 pm
Great article. Yes due to effects in CSS3 we will reduce the images. All the websites will be more faster. and less bandwidth will be used.