-moz-box-shadow: inset 3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 3px 3px rgba(0,0,0,0.5);
box-shadow: inset 3px 3px rgba(0,0,0,0.5);
this makes an inset shadow on the top, and left. I can't figure out to make it on the bottom and the right instead!
Make the position values negative:
-moz-box-shadow: inset -3px -3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset -3px -3px rgba(0,0,0,0.5);
box-shadow: inset -3px -3px rgba(0,0,0,0.5);
Related
i want to create a Inner-Shadow like on this website:
http://css-tricks.com/snippets/css/css-box-shadow/
But i want to have the shadows on the right and bottom side colored white.
I really have no more ideas.
Always when i click my button i only get the white shadow. So the white shadow overwrites the black?
Thats how far i am:
$('#button').mouseup(function () {
$('#button').removeClass('shadowBlack shadowWhite')
});
$('#button').mousedown(function() {
$('#button').addClass('shadowBlack shadowWhite')
});
.shadowBlack {
-webkit-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
-moz-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
}
.shadowWhite {
-webkit-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
-moz-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
}
Found it out:
.shadow{
-webkit-box-shadow: inset 9px 9px 15px 0px rgba(0,0,0,0.75).inset -10px -10px 15px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 9px 9px 15px 0px rgba(0,0,0,0.75), inset -10px -10px 15px 0px rgba(255,255,255,1);
box-shadow: inset 9px 9px 15px 0px rgba(0,0,0,0.75), inset -10px -10px 15px 0px rgba(255,255,255,1);
}
$('#button').mouseup(function () {
$('#button').removeClass('shadowBlack shadowWhite')
});
$('#button').mousedown(function() {
$('#button').addClass('shadowBlack shadowWhite')
});
.shadowBlack {
-webkit-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
-moz-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
}
.shadowWhite {
-webkit-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
-moz-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
}
I want to alter the CSS of an element when the user hovers over another element - pure CSS no JS.
I am sure it's possible, i'm sure i've done it before....just can't get it to work now.
I have two DIVs.
One already has box shadow and the other not.
When the user hovers over the one with no shadow, I want that DIV to get box-shadow and the other one to lose it's shadow....And the vice versa to happen when the user takes mouse off the second DIV.
.div1 {background: #24D4F9;-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);}
.div2{} /* No Shadwow */
.div2:hover {-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);} /* This bit works */
.div2:hover .div1{-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0);} /* This bit doesn't work */
What's the correct way to write the last bit?
Thanks
You need to change the order of the div's and then it is possible :)
http://jsfiddle.net/zcw8bdnq/
HTML:
<div class="div2">Test text div 2</div>
<div class="div1">Test text div 1</div>
CSS:
.div1, .div2 {
height: 100px;
margin-bottom: 30px;
}
.div1 {background: #24D4F9;-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);}
.div2{}
.div2:hover + .div1 {-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);}
.div2:hover {-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);}
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
-moz-box-shadow: inset 3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE;
That puts an inner shadow on the left side. Is it possible to have an inner shadow on both sides?
box-shadow accepts multiple values, so simply repeat your values with a -3px offset:
-moz-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
But those look more like borders than shadows. Perhaps you should use borders instead, and maybe with box-sizing: border-box in case you can't subtract from width or padding:
border-left: 3px solid #BDD4DE;
border-right: 3px solid #BDD4DE;
You can also use it like this
box-shadow:0px 0px 5px Grey
The first and secod value is the offset (use no offset) and the third value is the blur value
hi trying to get a drop shadow on all sides but the top, for a drop down sub menu
found this code on this site and it has shadow on all sides but not bottom
body {
width: 300px;
height: 200px;
margin: 20px auto;
-webkit-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
-moz-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999
}
how do i change to be shadow on all sides but top?
been trying on fiddle but for the life of me cant understand the above code to change it from top to bottom shadow
http://jsfiddle.net/PuKDb/
need it to be like this one
http://jsfiddle.net/leaverou/8tgAp/
but instead of red line the shadow from above...
im a cut and paste coder so any help would be appreicated!
body {
width: 300px;
height: 200px;
margin: 20px auto;
-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}
no explanation because you obviously have no interest in why it works, just that it does ;)
Probably the author will never access this topic again, but I found out the right definition is made by two declarations, instead of 3:
box-shadow: 3px 5px 8px -1px rgba( 15, 15, 15, .8 ), -3px 5px 8px -1px rgba( 15, 15, 15, .8 );
It's hard to explain, but if you define two primary colors you will see the reason in bottom shadow:
box-shadow: 3px 3px 8px -1px red, -3px 3px 8px -1px yellow;
The presence of a non-zero integer as first value mixes the two colors, producing a new one.
The point is, defining three declarations, one of them will overlay one of the others (depending the arguments) and thus produce darker shadows.
The same is valid for vertical offset. If both them are the same (here represented by 5px), another overlay will happen, in the bottom shadow, if positive, or in the top shadow, if negative (which is not the case of the topic).
I hope it helps somebody else.
This should work for you
body
{
width: 300px;
height: 200px;
margin: 20px auto;
-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}
.div {
-webkit-box-shadow: 0 3px 3px -3px #c00;
-moz-box-shadow: 0 3px 3px -3px #c00;
box-shadow: 0 3px 3px -3px #c00;
}
change the 2nd set of numbers according to the size and blur.