inset box shadow not working in my case? - css

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>

Related

how to put a vertical line in sudoku table

im try to get vrticl line Under the arrow.
for the horizental line i used .
webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);

If you're specifically wanting to use box-shadow, you can use the first property in the box-shadow shorthand, which adjusts the horizontal offset:
webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
But given you're not using box-shadow to get a shadow effect (i.e. not using blur or spread), a border might be preferable, as it'll give you the same divider look you're after, but will be repositioned if you adjust the padding between your cells. You can do away with your browser prefixes too:
border-right: 3px solid rgba(0,0,0,0.99);
border-bottom: 3px solid rgba(0,0,0,0.99);

Use box-shadow: 5px 0 2px -2px rgba(0,0,0,0.99);
This sets the X offset more to the right.

Shadow box only for inner box of container

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;
}

Change CSS of element when hovering over other element

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);}

CSS margin won't work in stylesheet but in code

I have a style that works fine in "code":
<img class="minbild" style="margin-right: 22px; float: left;" src="/images/Etiketter/AmarilloSingleHopEtikett.jpg" alt="AmarilloSingleHopEtikett" width="300" height="300" />
This will set the margin-right to 22 px. When I move it to the "minbild" class it stops working...
.minbild {
margin-right:62px;
box-shadow: 0px 0px 0px 1px #555, 0px 0px 0px 10px #eee, 0px 0px 0px 11px #555, 3px 3px 5px 11px #555;
-moz-box-shadow: 0px 0px 0px 1px #555, 0px 0px 0px 10px #eee, 0px 0px 0px 11px #555, 3px 3px 5px 11px #555;
-webkit-box-shadow: 0px 0px 0px 1px #555, 0px 0px 0px 10px #eee, 0px 0px 0px 11px #555, 3px 3px 5px 11px #555;
}
Anyone have any idea why this is happening? I use the same css-file for my jceditor and it shows the margin fine! I have tried Chrome and IE9.

Remove the inline css, it should fix the problem:
<img class="minbild" src="/images/Etiketter/AmarilloSingleHopEtikett.jpg" alt="AmarilloSingleHopEtikett" width="300" height="300" />
Inline CSS was taking priority over external css.

css - shadow on right and left

hi there i am using the following code to get a shadow on the right and left side of a div tag but all four sides of the div are shadowed...
.shadow1 {
border-right:1px solid #8d8d8d;
border-left:1px solid #8d8d8d;
-moz-box-shadow:0px 0px 5px 0px #000;
-webkit-box-shadow: 0px 0px 5px 0px #000 ;
box-shadow: 0px 0px 5px 0px #000;
}
is there a way to get the shadow appear only on the right and left side of the div... ?? any help would be appreciated... thanks in advance... :)

This seems to work ok :)
box-shadow: 5px 0px 5px -4px #000,
-5px 0px 5px -4px #000;
EDIT: Oh, I'm waaay late :p looks like we came to more or less the same conclusion tho.

try this:
jsFiddle
div {
width:200px;
height:200px;
margin:20px;
border:1px solid #8d8d8d;
-weibkit-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
-moz-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
}

Try this : http://css3-drop-shadows.herokuapp.com/app
It provides a css3 generator at the end.
It uses :before and :after

Resources