Quick Tip: Getting Clever with CSS3 Shadows
videos

Quick Tip: Getting Clever with CSS3 Shadows

on Nov 2nd 2010 with 65 comments
Tutorial Details
  • Topic: CSS3 Shadows
  • Difficulty: Moderate
  • Format: 8 Minute Screencast
Download Source Files
Demo View It Online
This entry is part 14 of 16 in the CSS3 Mastery Session
« PreviousNext »

As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways.

Premium Members: Download this Video ( Must be logged in)

Subscribe to our YouTube page to watch all of the video tutorials!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://baylorrae.com Baylor Rae’

    Here’s my attempt.

    http://jsbin.com/ehezi5

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Baylor – Excellent; that effect was to be my next shadows video, if people enjoyed this one, You beat me to it. :)

      Do you have any problems if I reference your source code / expand upon it? I’ll of course give you credit in the video.

      • http://baylorrae.com Baylor Rae’

        No I don’t mind, but I was only able to get it here so quickly because I saw your tweet last night.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Ahh – that explains it. I thought you were quick!

      • http://www.ballyhooblog.com Andrew Wilson

        You may want to take a look at my example, which is similar, but utilizes “skew” to create a super realistic shadow with just CSS and one single DIV!

        http://www.ballyhooblog.com/realistic-css3-box-shadows/

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        That’s clever – using the white shadow!

      • http://twitter.com/teddyzetterlund Teddy

        Just so you know, this one was sent across twitter long ago: http://nimbupani.com/demo/css3-drop-shadows.html

        Just hoping credit will be, where credit is due.

      • Tony

        Jeff I would like to see your take on this

    • http://css-tricks.com Chris Coyier

      Hot. Love me some pseduo elements.

      I think Firefox 2 (?) will bungle that as it allowed pseudo elements but didn’t allow you to absolutely position them (or something like that), but whatever, I’d use this in a heartbeat.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Yeah, I think you’re right. But, last I heard, Firefox 2 has less users than IE6.

      • http://css-tricks.com Chris Coyier

        It’s a little bungly in Firefox 3.6: http://cl.ly/34Ry

        Possible solution: just don’t use the -moz- prefixes.

        Firefox 2 just doesn’t have anything, as I don’t think it has -moz-box-shadow at all.

        This is the kind of thing that really annoys me, when a browser implements a feature, but it’s kinda broken.

      • http://baylorrae.com Baylor Rae’

        Hi Chris, this will fix your problem with the drop shadow. You accidentally rotated it -4deg when it should have been 4deg

        http://jsbin.com/ehezi5/13

      • http://css-tricks.com Chris Coyier

        Doh! My bad. Although I figured it out. It’s Firefox 3.0 that has the stupid issue with positioning and pseudo elements. From here:

        Firefox 3.0 supports CSS 2.1 pseudo-elements but does not support their positioning. Due to this partial support, effects that explicitly declare a pseudo-element width or height can look pretty broken. There is no graceful fallback for Firefox 3.0 if you declare width or height dimensions.

        Again, just trying to spread the word on that little quirk, but the important part is this idea is awesome and should be used regardless.

    • http://www.youfounderic.com Eric Kelly

      I haven’t watched the video yet but I don’t see anything new/cool having to do with shadows when I visited your link. Am I missing something? All that I see is a white box with “Goodbye Photoshop” written in it.

      On another note, WHERE DID WEBDESIGN.TUTSPLUS GO?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        He didn’t set up Firefox support. View it in Safari or Chrome.

        http://webdesign.tutsplus.com/

      • http://www.youfounderic.com Eric Kelly

        Oh, and I’m using Firefox 3.6.12

    • http://www.ibrightdev.com Justin St. Germain

      you should have used -moz too so that it would work in FF. Looks great for browsers that use webkit though.

    • chris

      now…that is sexy..

  • http://twitter.com/seanhimself Sean

    That’s a lot of work when you could just use a single png as one image. I don’t see any reasoning for adding this shadow in css.

    • http://envexlabs.com Matt Vickers

      Speed. Load Times. HTTP requests.

      You can pick one.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Sean – you only have to do it once. I never apply shadows with PNGs these days.

    • http://kylefox.ca Kyle F

      What happens if the client requests the angle / size / distance / direction / colour of the shadow changed?

      If it’s an image, you need to open photoshop, apply the transforms, re-export & upload.

      With CSS, you tweak a couple text values and refresh the page.

    • Brannon

      It’s pretty great in terms of CSS evolving. I’ve read articles on the follies of the internet sort of growing unexpectedly out of something that was never originally expected to become what it is today. Basically, the fact that we use images for everything in browsers has always been sort of backwards. It’s almost like you have to hack the code using a crutch to make it do the things it really should do by itself. With things like this, CSS is finally beginning to move forward past that stage of things.

      As someone mentioned before, CSS shadows and other CSS3 properties have the possibility beyond extending CSS to also speed up page loads and simplify future edits. It’s important to note that when you apply shadows this way to multiple elements dynamically, you have a range of new possibilities that images can’t really offer.

      There are some exciting possibilities using this sort of thing that I’ve been thinking on lately. For example, if you combined the CSS3 box-shadow property, the transform property and the transition property on a psudo-selector, you could do something like shadows that move as if the light source is moving when you roll over a link.

  • http://grazdesigns.com Sebastian

    Very clever indeed, thanks for the tutorial!

  • http://newarts.at Drazen Mokic

    Well done, looks great, thx.

  • Abhijit

    :) Now that’s really clever!

  • http://drulia.co.uk drulia

    doesn’t work properly in opera 10.63 and IE 9.
    Baylor Rae > your example doesn’t work in Opera, Firefox and IE, but it works in Safari and Chrome. I tested on windows OS.
    I guess, we’ll have to wait a little bit more, to be able use that kind of technique in web design.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      There are transitions for Opera – I just didn’t include them. Not sure about IE9 just yet.

      Baylor’s demo was just a sample. All you need to do is apply the appropriate vendor prefixes.

      • http://drulia.co.uk drulia

        Yes, my bad. Anyway, thanks for the tutorial.

      • http://www.duvieusart.net Nicolas Duvieusart Déry

        You mean instead of ‘transform’ you have to use ‘transition’ for Opera ? This is really cool effect but f*** i’m tired of writing specific code for different browsers, can’t wait for the time when we’ll be able to only use ‘box-shadow’…

        Thanks for the tip!

    • http://www.venture-ware.com/kevin/ Kevin Jensen

      IE9 finally added support for transform in the platform preview build 6. However, like webkit and moz, you have to add the prefix ‘-ms-’. So the list grows to:

      -webkit-transform: skew( -60deg );
      -moz-transform: skew( -60deg );
      -ms-transform: skew( -60deg ); /* IE9 Platform Preview Build 6 Support */
      transform: skew( -60deg );

      According to MSDN they’re planning to including support in the IE9beta in the future.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Ah – good note. Thanks, Kevin!

  • http://www.shiftedwork.de/blog/ Daniel S

    Great Quickie! It’s the small things… Many Thanks!

  • http://kylefox.ca Kyle Fox

    Neat idea & demo.

    But there’s an odd visual inconsistency in your demo: the image shows a shadow around the full frame (square), even though there is no surface *behind* the box (implied by the skewed shadow).

  • Christian

    I started an attempt… Interesting how you can end up doing something completely different.

    http://chal.nu/weird_shadow_experiment/
    Click the lamp :P

    • John

      That is cool!

  • Brannon

    This is totally awesome and just what I needed for my new portfolio site I’m working on. I’m going to make all of my project thumbnails look like they’re labels peeling off the page a little, but I wanted to do it in CSS3 to help illustrate that I’m keeping up with modern code techniques. This shows me just how to do it.

    Thanks for the great tutorial!

  • arnold

    that looks good. I didnt know how to use the transform also.
    so I learn a lot from this quickie.thanks man.
    I hope in every tutorial in netttus , includes the ‘Compatible Browsers’ , just a tip

  • Brennen

    Your CSS skills are gnarly. I’m into Dw but Espresso looks cool. Thanks for the tutorial and inspiration.

  • CosmoCoder

    Hi Jeff, that was a nice and quick tut !
    BTW did you see that I have a similar item in Codecanyon CSS3 Shadow Pack ? It has quite a few varieties and works in all modern browsers (except IE of course).
    Love your tutorials, keep up the good work !

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Checking it out now. Really well done! I love the variety and intensities.

      How did you handle the shadow manipulation? Are you using an extra div, or this psuedo class technique that’s been catching on lately?

      Maybe we’ll feature that item next week! Good job. :)

      • CosmoCoder

        Thanks !! I also used the pseudo class technique.

        I was a bit surprised on seeing a tutorial based on the same techniques that my item was based on.

        I really think it is much better to create these fancy shadows using just css, rather than always relying on Photoshop.

        Keep posting more awesome tuts !!

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Ah – yeah, I think that’s the only way to do it with CSS, without adding a bunch of unsemantic markup.

  • http://www.cssass.com ONEBOYS·

    Good idea ！

    I copied it, and modify some code to compatible with opera and safari4

    http://www.cssass.com/blog/index.php/2010/833.html

  • http://www.garryaylottdesign.co.uk Garry Aylott

    Awesome tut Jeff.

    It’s always awesome watching experimental CSS tuts to see what’s possible outside of Photoshop.

    I’d be happy to use this for certain elements even if it doesn’t show in IE as it won’t detract from the experience.

    Thanks!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Definitely

  • http://www.thecodebakery.com Web Technology News

    I’m happy the shadows are crisp and look great and we won’t need to use the -webkit prefix soon!

  • http://www.etabrizi.co.uk Emyr Tabrizi

    Seems like a awful lot of code for just a simple effect you can make in PhotoShop. Cool tho.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Not really. After the first time, I’ll never have to write that code again.

  • Tobias Jurga

    nice effect – love how you make those tutorials! thanks

  • http://360signals.com Maor

    Pretty neat. Thanks for the tutorial.

  • http://www.roman-designs.com Roman Serebryakov

    I don’t like this method, it is not very flexible for the reason that not all browsers support the transformation features of the css you were using, especially -webkit, also, don’t forget that if it doesnt work in IE there is no real reason to use it at all, the IE still has the majority if users …

    the better solution is to use the png shadow for your images that goes behind the image container using you “after” pseudo class

  • http://twitter.com/garbaczd David Garbacz

    Who knew that CSS could get so complex? I was sitting there with a furrowed brow looking at this screencast going…… huh?

    Great tip though for those looking to be on the bleeding edge.

  • http://jopixel.cz Jay

    Very nice tutorial, thank you Jeffrey. Always nice to see such neat tricks. Btw what color template are you using for Espresso?
    Jay

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s called Cappuccino.

  • http://www.egydes.com/blog/ Husien Adel

    thanks Jeff, that cool effect with Css 3.0 thanks dude :D

  • Amit

    This is a very nice topic which sharing some valuable information.

  • http://www.mamaov.info khim

    I have test for preview it but it not working with IE8. How we make it for support IE (6,7,8)?

    Do you have any solution?

  • Andrzej

    That’s really nice. Thanks.

  • Ahmed
  • http://blackberry-curve-8520-alx.blogspot.com/ blackberry appliction

    tanks Jeffrey , for this very neat trick
    good job

  • monica

    Really cool.

    Is there any way to add this both sides, as if the light source was head-on? Tried wrapping the element in 2 divs but this didn’t work.

    Cheers

    • Charlotte

      Monica, I made a shadow from a light source in front by creating a trapezium shape with borders. Unfortunately the lines don’t blur but it looks good if you use subtle greys and a bit of noise in the background.

  • marcoponta

    you use a 5px border:

    .box {
    box-shadow: 2px 2px 5px rgba(0,0,0,.5); /* shadow height 5px */
    padding: 10px;
    background: #ffffff;
    position: relative}

    instead of setting a height of 40px in .box:after leaving an internal line non-shadowed zone, set box-shadow height as desired ( my case 60px ) and from the bottom 65px ( 60 height + 5 from the first shadow ) just not to have that undesired darken zone in the bottom

    .box:after {
    content:’ ‘;
    box-shadow: 80px 0 10px 60px rgba(0,0,255,.5); /* shadow height 60px */
    position:absolute;
    width:50%;
    bottom:65px; /* shadow shift 60 + 5 to avoid darkened bottom border */
    right:100px;
    z-index:-1;
    -moz-transform:skew(-30deg)}

    That’s all

  • fjpoblam

    Just tried a crazy one, out of hope. I already had:

    dt:before[title="something"],dd:before[title="something"],li:before[title="something"]{content:whatever;}

    I tried:

    *:before[title="something"]{content:whatever}

    No workee. Just playing.