Quick Tip: Getting Clever with CSS3 Shadows
Tutorial Details
- Topic: CSS3 Shadows
- Difficulty: Moderate
- Format: 8 Minute Screencast
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 Jeffrey Way
I'm the editor of Nettuts+, and help out on the Envato marketplaces.. I also (very infrequently) blog on my personal site. Feel free to check that out as well...if you're bored. Follow us on Twitter, and subscribe to the official Nettuts+ YouTube page if you want to live.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Here’s my attempt.
http://jsbin.com/ehezi5
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.
No I don’t mind, but I was only able to get it here so quickly because I saw your tweet last night.
Ahh – that explains it. I thought you were quick!
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/
That’s clever – using the white shadow!
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.
Jeff I would like to see your take on this
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.
Yeah, I think you’re right. But, last I heard, Firefox 2 has less users than IE6.
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.
Hi Chris, this will fix your problem with the drop shadow. You accidentally rotated it
-4degwhen it should have been4deghttp://jsbin.com/ehezi5/13
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:
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.
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?
He didn’t set up Firefox support. View it in Safari or Chrome.
http://webdesign.tutsplus.com/
Oh, and I’m using Firefox 3.6.12
you should have used -moz too so that it would work in FF. Looks great for browsers that use webkit though.
now…that is sexy..
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.
Speed. Load Times. HTTP requests.
You can pick one.
Sean – you only have to do it once. I never apply shadows with PNGs these days.
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.
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.
Very clever indeed, thanks for the tutorial!
Well done, looks great, thx.
:) Now that’s really clever!
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.
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.
Yes, my bad. Anyway, thanks for the tutorial.
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!
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.
Ah – good note. Thanks, Kevin!
Great Quickie! It’s the small things… Many Thanks!
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).
I started an attempt… Interesting how you can end up doing something completely different.
http://chal.nu/weird_shadow_experiment/
Click the lamp :P
That is cool!
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!
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
Your CSS skills are gnarly. I’m into Dw but Espresso looks cool. Thanks for the tutorial and inspiration.
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 !
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. :)
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 !!
Ah – yeah, I think that’s the only way to do it with CSS, without adding a bunch of unsemantic markup.
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
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!
Definitely
I’m happy the shadows are crisp and look great and we won’t need to use the -webkit prefix soon!
Seems like a awful lot of code for just a simple effect you can make in PhotoShop. Cool tho.
Not really. After the first time, I’ll never have to write that code again.
nice effect – love how you make those tutorials! thanks
Pretty neat. Thanks for the tutorial.
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
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.
Very nice tutorial, thank you Jeffrey. Always nice to see such neat tricks. Btw what color template are you using for Espresso?
Jay
It’s called Cappuccino.
thanks Jeff, that cool effect with Css 3.0 thanks dude :D
This is a very nice topic which sharing some valuable information.
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?
That’s really nice. Thanks.
my new demo
http://jsbin.com/ababo4
tanks Jeffrey , for this very neat trick
good job
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
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.
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
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.