at the rounded corner, it has crisp edge, is this normal?
-moz-box-shadow: inset 0 0 0px 2px #FFF;
-webkit-box-shadow: inset 0 0 0px 2px #FFF;
box-shadow: inset 0 0 0px 2px #FFF;
I tried border method, doesn't seem to be improved..
Related
I was fiddling around with CSS box shadow property. It seems like I can't have the top border shadow when I keep the angle at 90 degrees and apply some distance from bottom. Is there any way I can have top shadow along with bottom shadow.
Here is the FIDDLE
<div class = "someclass">
</div>
.someclass {
-webkit-box-shadow: 0 8px 11px -5px #000;
-moz-box-shadow: 0 8px 11px -5px #000;
box-shadow: 0 8px 11px -5px #000;
margin: 20px;
background: pink;
width:300px;
height:300px
}
box-shadow allows multiple, comma-separated values. You can achieve the effect you want like so:
.someclass {
box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
}
Make sure to also add it to the appropriate prefixed declarations:
.someclass {
-webkit-box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
-moz-box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
}
i am using the following code to make a shadow inside a div tag..
box-shadow: inset 0 10px 10px -10px #000 , inset 0 -10px 10px -10px #000;
but i get shadows on the top and bottom.. i only want the shadow to appear on top not the botton something like the following picture..
i'e been tinkering with the codes for hours but nothing... how can i do this. thanks.
Like this?
box-shadow: inset 0 10px 20px -15px #000;
DEMO
You need to delete the part after the comma.
box-shadow: inset 0 10px 10px -10px #000;
http://jsfiddle.net/9LzV4/
-webkit-box-shadow:inset 0 3px 5px 0 #E3E3E3;
box-shadow:inset 0 3px 5px 0 #E3E3E3;
for more experiments go to css3 generator
-webkit-box-shadow: inset 0px 6px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
Demo
I need to create this shadow effect for a client but can't figure out how it could be done:
Is this even possible with pure CSS?
EDIT: Here is my current CSS:
box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 0px 0px #fff;
-webkit-box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 0px 0px #fff;
-moz-box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 0px 0px #fff;
this other answer that I stole from Another Stack OverFlow Question
use the spread value...
box-shadow has the following values
box-shadow: x y blur spread color;
so you could use something like..
box-shadow: 0px -10px 10px -10px black;
here is another answer from the same Question
You can give multiple values to box-shadow property
eg
-moz-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
it is drop shadow to left and right only, you can adapt it to your requirements
EDIT
I was looking that the OP's Post and I think that if you tried this,
box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 -1px 15px #ccc;
I think that it should show the way that you are thinking it should.
I assume that the values go in Clockwise Order like Borders or margins or whatever,
Attribute: top, right, bottom, left;
and that you should be able to add a value to the left as you would with the right.
you might have to play around with it a little bit though.
I want to have both and outer shadow and an inner (inset) shadow on the same element, is this possible? Right now I have this:
box-shadow: 0 4px 2px -2px #888;
box-shadow: inset 0 0 30px #EEE;
with this the inset shadow overrides the normal box-shadow, any suggestions?
Yes. Separate them with a comma:
box-shadow: inset 0 0 30px #EEE, 0 4px 2px -2px #888;
You can have up to six I believe.
here is an example of what you want fiddle
box-shadow:0 0 30px #222 inset, 0 4px 2px -2px #888;
I am trying to apply inset shadow to thead element of my table. It works in FireFox, but not in Chrome and Safari.
http://jsfiddle.net/jACGx/2/
tbody {
-webkit-box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
-moz-box-shadow:0 0px 5px rgba(180,180,180,1) inset;
box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
}
Please advice!
Try applying the shadow to the td:
td{
-webkit-box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
-moz-box-shadow:0 0px 5px rgba(180,180,180,1) inset;
box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
}
Is that effect you are looking for?