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.
Related
I have this code
-webkit-text-stroke: 30px #67676726;
text-shadow: 0px 4px 20px #d5d5d5,
0px 3px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777,
0px 0px 15px #777777,
0px 0px 15px #777777,
0px 6px 0px #777777,
0px 7px 0px #777777,
0px 8px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777;
this is like a glass effect at the back of text. what I need is I want to remove the sharp edges
it's when I increase the width of text-stroke
It is much appreciated for those who can help me.
PURE CSS only
You could try to wrap your text inside a div tag, add width and height and set the overflow to hidden so your edges get cut off.
Here an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
margin: 40px;
width: 160px;
height: 39px;
position: relative;
overflow: hidden;
}
h1 {
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
-webkit-text-stroke: 20px #0e000026;
text-shadow: 0px 4px 20px #d5d5d5,
0px 3px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777,
0px 0px 15px #777777,
0px 0px 15px #777777,
0px 6px 0px #777777,
0px 7px 0px #777777,
0px 8px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777;
}
<div class="text">
<h1>LetterNVZ</h1>
</div>
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 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);}
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