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);}
Related
I am using box-shadow but it makes the whole container wrapped with shadow, how can I make a shadow only in the inside (top center) box?
Have you tried INSET this will put a shadow on the inside of an element.
.shadow{
box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-moz-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-o-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
}
div{
height:100px;
width:100px;
background:pink;
box-shadow: 0px 0px 0px 3px #000;
}
Above css worked but when I do box-shadow: inset 0px 0px 0px 3px #000; is wasn't work, I also tried box-shadow: 0px 0px 0px 3px #000 inset. Any idea?
try it with smaller number of parameters:
box-shadow: inset 0px 0px 3px #000;
or with specified engine:
-moz-box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
box-shadow: inset 0px 0px 10px #000000;
The syntax of box-shadow property is as follows:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You are not setting any value to h-shadow and v-shadow. That is why you are not able to see a shadow.
Try this code
div {
box-shadow: 10px 10px 5px #888888;
height: 100px;
width: 100px;
}
<div>
</div>
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 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
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.