1

shadow image

I was wondering if there is any way to code the green shadow in that shape with css

Lox
  • 299
  • 2
  • 4
  • 18
  • Are we to assume you want the green bottom shadow, but no shadow to the right? – Gareth Cornish May 03 '13 at 20:53
  • eugh. the colours on that graphic are playing havoc with my screen and my eyes. sorry. – Spudley May 03 '13 at 20:58
  • This [blog post](http://nicolasgallagher.com/css-drop-shadows-without-images/) has an interesting method to create a drop shadow. Demo: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ – Rob W May 03 '13 at 20:59

2 Answers2

7

You can stack the horizontal and vertical offset values of the box-shadow property, alternating between two colors and specifying as many layers as you want, e.g.

 div {
     background: olive;

     box-shadow: 
     0 01px black,
     01px 0 green,
     01px 02px black,
     02px 01px green,
     02px 03px black,
     03px 02px green,
     03px 04px black,
     04px 03px green,
     04px 05px black,
     05px 04px green;

     height: 50px;
     width: 50px;
 }

http://jsfiddle.net/Thcvv/

asedsami
  • 609
  • 7
  • 26
Adrift
  • 58,167
  • 12
  • 92
  • 90
  • This is a great solution, I just get this vertical green line in the shadow, and I don't know how to get rid of it. http://imgur.com/h0IbNMV – Lox May 03 '13 at 21:22
  • It looks like you might've mixed the order of the shadows up, can you post the exact code? – Adrift May 03 '13 at 21:23
  • Yep, I've messed up the order, but I fixed it now. It works great. Thanks a lot, you're awesome :D – Lox May 03 '13 at 21:31
1

If you're just looking for the bottom shadow, without the side shadow, you could just draw a rhomboid shape below it:

div{
    height:50px;width:50px;
    background-color: #0f0;
    position: relative;
}
div:after{
    content:'';
    background-color: #9F9;
    width: 50px; height: 10px;
    position: absolute;
    bottom: -10px; left: 5px;
    transform: skewx(45deg)
}
Gareth Cornish
  • 4,357
  • 1
  • 19
  • 22