WebAppers

/ best free open source web resources /

Shopify

How to Create CSS Drop Shadows Without Images

Posted · Category: Information, License Free

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. The article: CSS drop-shadows without images, is a summary of the technique and some of the possible appearances.

There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements are generated from an element and then pushed behind it.

css-shadows

Requirements: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+
Demo: http://nicolasgallagher.com/css-drop-shadows…
License: License Free

5 Comments
  • Mo

    Awesome. Thanks for sharing. Will be using this for my next project for sure.

  • http://magazine.nuefolio.com/ Ramaraju Ramakanth

    Nice…Thanks for sharing.

  • http://www.24hourswebdesign.com/ รับทำเว็บไซต์

    hi..! webappers
    i use google alert find out u blog..
    Awesome! I can’t wait to give this a try!

  • VV

    cool trick!

  • http://www.labanauskas.lt FakIToL

    Cool, I like it !

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons