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);
}
Related
I have created a scrollbar with 6 inset box-shadows and want these to change colour when I hover on the scrollbar. At the moment, when I hover on it, there is no change. Here is the code I have so far in CSS for the scrollbar:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: mediumpurple;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: 0px 100px 15px indigo inset, 0px -10px 10px indigo inset, 0px 250px 20px darkmagenta inset, 0px -20px 10px darkmagenta inset, 0px 400px 30px mediumorchid inset, 3px 650px 10px violet inset;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: 0px 100px 15px transparent inset, 0px -10px 10px transparent inset, 0px 250px 20px transparent inset, 0px -20px 10px transparent inset, 0px 400px 30px transparent inset, 3px 650px 10px transparent inset, 0px 100px 15px violet inset, 0px - 10px 10px violet inset, 0px 250px 20px plum inset, 0px -20px 10px plum inset, 0px 400px 30px thistle inset, 3px 650px 10px lavender inset;
}
Well, everything here is looking fine, but you just missed a little point here. 0px - 10px 10px violet inset this line will make your whole box-shadow property invalid because it has a disorder in the second element, so you just have to fix this like this:
0px -10px 10px violet inset
Here is the full working code:
body {
height: 150vh;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: mediumpurple;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: 0px 100px 15px indigo inset, 0px -10px 10px indigo inset, 0px 250px 20px darkmagenta inset, 0px -20px 10px darkmagenta inset, 0px 400px 30px mediumorchid inset, 3px 650px 10px violet inset;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: 0px 100px 15px transparent inset, 0px -10px 10px transparent inset, 0px 250px 20px transparent inset, 0px -20px 10px transparent inset, 0px 400px 30px transparent inset, 3px 650px 10px transparent inset, 0px 100px 15px violet inset, 0px -10px 10px violet inset, 0px 250px 20px plum inset, 0px -20px 10px plum inset, 0px 400px 30px thistle inset, 3px 650px 10px lavender inset;
}
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 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 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.
-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);