Curated by Carsonified

Topics

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 24

Advanced CSS3 Box Shadow Techniques

By @ryancarson

01 June 2010 | Category: Design

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!

  • View in HD
  • View on iPhone or Android
  • View on iPad
Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://www.brucelawson.co.uk bruce

    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

  • http://www.adamwintle.com Adam Wintle

    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.

  • http://doctype.tv Nick Pettit

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

  • http://www.meltdowntech.com Ben Everard

    +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?

  • Ryan Carson

    Thanks Adam! :)

  • Ryan Carson

    Thanks for the feedback Bruce – much appreciated.

  • http://cameron-jensen.com/ Cameron Jensen

    He has omitted ‘box-shadow’ in the examples, this works for opera and is useful for forwards compatibility.

  • http://keithwolf.net Keith Wolf

    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

    Hey Cameron, actually, at the end he talks about adding box-shadow into the example.

  • Ryan Carson

    Thanks Keith! Really appreciate it.

  • http://joggink.com Joggink

    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

    Thanks! Super glad you like the format. We’ve thought long and hard about it :)

  • http://www.brucelawson.co.uk bruce

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

  • http://www.buitenaardig.nl/ Phil

    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

  • devs

    how to register? after insert email, it won appear in my email.

  • http://carsonified.com Ryan Carson

    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

  • http://mashkovtsev.ru Mashkovtsev

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

  • http://www.roundpyxel.com David

    I really like the videos : it’s much more communicative. Great work!

  • http://epicio.com David

    Great article, if only Microsoft would get IE9 out the door….

  • http://deepakkaletha.com deepak kaletha

    Great Post, Thanks Ryan for posting

  • oVan

    The links don’t work (anymore). Are they broken or is there an alternative? Would really like to see it!

  • http://www.snilesh.com neel

    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.

  • Skill83

    i cannot watch the visdeo… can u upload it again? thanks

  • http://erikmallinson.com Erik

    Fantastic video. I have one quibble: if one says something like “at this time” in a video there should be something on the page that states the date the video was made. For all I know it could have been made 10 years ago and it never made it into another CSS3 module.

Learn Web Design!

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.