Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Drop Shadows

DZone's Guide to

CSS Drop Shadows

·
Free Resource
This handy technique allows us to build flexible CSS drop shadows that we can apply to any arbitraryblock elements. The beauty of this method is that most exisitng techniques use images to create the shadow effect. This script is lightweight and uses pure CSS! ENJOY!
www.webscriptexpert.com








CSS Drop Shadow DEMO

  

  








  

This is a sample of how we implement the CSS style to create flexible CSS drop shadows that can be applied to block elements.

The beauty of this script is that is doesnt use any images to create the final effect, just pure CSS!



The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
<.CSS FILE HERE> /* CSS container shadow */ #shadow-container { position: relative; left: 3px; top: 3px; margin-right: 3px; margin-bottom: 3px; } #shadow-container .shadow2, #shadow-container .shadow3, #shadow-container .container { position: relative; left: -1px; top: -1px; } #shadow-container .shadow1 { background: #F1F0F1; } #shadow-container .shadow2 { background: #DBDADB; } #shadow-container .shadow3 { background: #B8B6B8; } #shadow-container .container { background: #ffffff; border: 1px solid #848284; padding: 10px; } /* CSS container shadow */
Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}