box shadow in css

Question

How can i get these spaces covered with this box shadow?

enter image description here

CSS-

.button
{
  height:24px;
  width:120px;
  background:black;
  position:absolute;
  border-radius:2px;
  padding:3px;
  box-shadow:4px 4px 0px 0px #444;
}

Just a fiddle

Why not cheat with `border-bottom` and `border-right` rgba color to reproduce the box shadow while not having blank spaces ? — Elyx0, Jun 19 '13 at 05:41

score 0 · Answer 1 · answered Jun 19 '13 at 05:47

0

Changing the h-shadow and v-shadow will position the shadow on the box. If you want the shadow to be closer, change the distance of the shadow.

Test it here

answered Jun 19 '13 at 05:47

whastupduck

1,156
11
25

Well, talking about closer shadows isn't a good idea, Any better way? – Manoz Jun 19 '13 at 05:48

score 0 · Answer 2 · answered Jun 19 '13 at 05:55

0

Using close shadows might not get you that much effect. Instead you can use background properties and positions... Here is a good example.

answered Jun 19 '13 at 05:55

Bhavik

4,836
3
30
45

score 0 · Answer 3 · answered Jun 19 '13 at 05:58

0

Try this:-

.button
{
height:24px;
width:120px;
background:black;
position:absolute;
border-radius:2px;
padding:3px;
box-shadow:2px 2px 0px 2px #444; // changed
}

answered Jun 19 '13 at 05:58

Vivek Sadh

4,230
3
32
49

box shadow in css

3 Answers3