CSS shadows without images

There are 13 comments.

This is a pure CSS drop shadow

– using 0 images

The problem with image-based shadows

I cannot tell you how many times I’ve had to, manually, extract bits and pieces of shadows from a Photoshop file, save them as transparent .png’s and hook up :before and :after pseudo elements to create that rich depth and flavor they can add to a design. It’s such a boring, repetitive task where the result can’t even be reused because the shadows always change a tiny bit from project to project.

Say Hello to rich (pure CSS) shadows!

Inspired by, and based on, this post by Nicholas Gallagher I’ve created a bunch of SASS mixins that couldn’t make this annoying and painful process any easier. Let’s say you have a good old div: <div></div> All you need to do is:


div {
	@include shadow();
}

and you will get:

Hi! I have a normal shadow

To create any of the 10 other shadow variations, like this curved one, simply add the shadow name as a parameter to the mixin.


div {
	@include shadow('curved-bottom');
}

will render:

Yo! I have a curved shadow

If you don’t use SASS yet (Then start doing it), you can just add the provided CSS classes to your elements, which will give you the exact same thing:


	<div></div>

Cheers! Mine is also curved – but vertically

– Added using a CSS class

Download and examples

Examples (10 different shadow types):

ahrengot.github.com/sass-dropshadows/

Download the project at Github:

https://github.com/Ahrengot/sass-dropshadows

Feel free to send me a pull request with more shadow types added.

  Older Comments
 
  • www.gardrealms.com/wiki/index.php/Saving_Cash_Is_Really_Straightforward_With_Fantastic_Voucher_Tips zivame coupons

    Dang, it’s actually a really good bit article which I have seem for for an extended time original. Complete in addition , take a look at a few place.

  • www.malgefragt.net/mwiki/index.php?title=Conserving_Money_Is_So_Effortless_With_Wonderful_Coupon_Suggestions Couponrani

    Wow, here is a good portion of post which has been face in in size a long time. Implement on top of that come to my own area.

  • finpedia.net/How_To_Cut_Your_Shopping_Expenses_In_Half_With_Discount_coupons Couponrani

    Fantastic, this is usually first rate amount of jot down which I have uncover about in length very long time. Carry out always head to great page.

 Older Comments