How do I get a drop shadow to spread the full width of an element. This is what I have right now but I'm it's falling short of spreading horizontally across the element.
As you can see at the right and left of the image the shadow is inset I need it to span the entire width.
box-shadow: 0 8px 6px -6px black;
Your negative spread-radius is causing that. Change the -6px to some positive value:
box-shadow: 0 8px 6px 6px black;
jsFiddle example
According to the MDN:
Positive values will cause the shadow
to expand and grow bigger, negative values will cause the shadow to
shrink. If not specified, it will be 0 (the shadow will be the same
size as the element).
Dont use the -6px have it at 0px, also dont forget about other browsers.
-webkit-box-shadow: 0 8px 6px 0 #000000;
-moz-box-shadow: 0 8px 6px 0 #000000;
box-shadow: 0 8px 6px 0 #000000;
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I tried a lot to a 4 sided shadow to make it as 3 sides and not getting any idea how it can be done. found one question from Stack for top and bottom for shadow but that did not help me well.
I have given below the example of a shadow which is 4 sided and I need to know how is it possible to remove one side of the shadows specifically LEFT. Is it possible?
0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
You can achieve a simple shadow on 3 sides of an element by overlapping 2 shadows using box-shadow:
box-shadow: 3px 3px 3px 0 #999, 3px -3px 3px 0 #999; /* No shadow on the left */
This basically adds 2 shadows together to get the desired effect (I'm going to call this a Shadow Equation):
_____ _____
| + | = |
_____| | _____|
Why it works
The syntax for this CSS property is: box-shadow: offset-x | offset-y | blur-radius | spread-radius | color. By overlapping multiple shadows that have different offsets (starting positions), you can control which sides of the element the shadow appears on.
box-shadow: 3px 3px 3px 0 #999 creates a shadow that has an offset of 3px to the right and 3px down from the top, so the shadow will show on the right and bottom sides of the element.
box-shadow: 3px -3px 3px 0 #999 creates a shadow that has an offset of 3px to the right and 3px up from the top, so the shadow will show on the right and top sides of the element.
Because these two shadows are combined (overlapping), you will see shadows on the top, right and bottom sides of the element, but not the left.
Variations
Of course, there are many different shadow combinations, but the 4 basic variations of this example are:
box-shadow: 3px 3px 3px 0 #999, -3px 3px 3px 0 #999; /* No shadow on the top */
box-shadow: -3px 3px 3px 0 #999, -3px -3px 3px 0 #999; /* No shadow on the right */
box-shadow: 3px -3px 3px 0 #999, -3px -3px 3px 0 #999; /* No shadow on the bottom */
box-shadow: 3px 3px 3px 0 #999, 3px -3px 3px 0 #999; /* No shadow on the left */
The box shadow I have applied at the bottom of the navbar cut's off short at the beginning and end.
CSS
-webkit-box-shadow: 0 8px 8px -8px rgba(0,0,0,.2);
box-shadow: 0 8px 8px -8px rgba(0,0,0,.2);
Updated with Bootply:
http://www.bootply.com/WgAVhmb8ql
It's caused by the -8px which is the value for the "spread" - you're telling the shadow to spread by a negative amount, so it basically retracts from the edges.
From http://www.w3.org/TR/css3-background/#box-shadow
Specifies the spread distance. Positive values cause the shadow to
expand in all directions by the specified radius. Negative values
cause the shadow to contract.
Try removing the negative spread and playing about with the other values in the shadow, e.g.
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2);
box-shadow: 0 3px 3px rgba(0,0,0,.2);
http://www.bootply.com/t7qfN7Wk3w
ive got a div styled with the css properties:
border: 20px solid #000;
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5);
the problem i have is, the shadow of the div is just outside, but not inside of the border.
ive allready tried to set the background to 100% opacity with background: rgba(0,0,0,0); but nothing changes.
I also tried to use inset but then the shadow is just inside.
what to do?
No reason to expect anything different. If you want an inner shadow, add a second one to the declaration that starts with the keyword inset.
E.g. -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5), inset 0 0 40px 0 rgba(0,0,0,0.5);.
Note that elements that are descendants of the element with the box shadow will cover the inner shadow.
Also note that some older versions of modern browsers only support one shadow declaration at a time, but I think that set of browsers/versions is quite small.
Try something like this:
#mydiv {
border: 1px red solid;
box-shadow: 0 0 15px #555, inset 0 0 15px #555;
width: 100px; height: 100px;
}
Codepen
This question already has answers here:
Inner shadow to div in IE
(3 answers)
Closed 9 years ago.
Need help converting some css that I have working in the good browsers to now work for internet explorer. This is what I have right now
.headerLoginFooter
{
background-color:#f5f5f5;
padding:7px 10px 7px 10px;
margin:20px 0 0 0;
-moz-box-shadow:inset 0 8px 6px -6px #c4c4c4;
-webkit-box-shadow:inset 0 8px 6px -6px #c4c4c4;
box-shadow:inset 0 8px 6px -6px #c4c4c4;
}
The three attributes at the end are producing an inward glow within the footer section of the login box for that div that looks like this
I was able to get the code for this styling here CSS Tricks but I need to make this compatible for Internet Explorer. My first problem is I only have a mac so I don't have internet explorer to easily test my code. My second problem is I'm not getting how to convert the above code like he has in his code. Could someone help me convert my above code to work for internet explorer following the guidelines within the link. Thank you.
IE is very problematic with many CSS3 features, especially older versions.
I would recommend using CSSpie for use in your CSS stylesheet. This has been answered previously here.
Some things can prevent box-shadow from working in IE: (if they are applied to the same element)
rounded corners / border-radius
overflow:hidden
background-color
background gradients
To overcome this, I usually nest a container inside the one I want to style with a box-shadow.
<style>
.boxShadow {
behavior: url(PIE.htc);
-webkit-box-shadow: inset 0 8px 6px -6px #c4c4c4;
-moz-box-shadow: inset 0 8px 6px -6px #c4c4c4;
box-shadow: inset 0 8px 6px -6px #c4c4c4;
overflow:visible;
}
.otherStyles{
background-color:#f5f5f5;
border-radius:0px;/*or other value*/
/*gradients can be placed here too.*/
}
</style>
<div class="boxShadow">
<div class="otherStyles">
...content...
</div>
</div>
I'm investigating since some days box-shadow and text-shadow. I'm trying to gain the following effect. I want a glow come out from the text of the <a> once hovered. Simple, this should be easy as I explored using text-shadow. Ok, but it works with small glows, I mean, once the glow is bigger you just cannot see the glow due to its high blur. There has to be a solution for this. An image will explain better than 100 words.
This is what I want to gain:
LINK:
HOVER:
This is the code I've used for
#projectBox a:LINK{
background-image: url('../_img/showcase/projectTabs/link.png');
}
#projectBox a:HOVER{
background-image: url('../_img/showcase/projectTabs/link.png');
color:#fa0000;
text-shadow: 0 0 80px white;
}
I know I can use background image again for the hover but I want to avoid this. The problem is that if you add more blur it doesnt appear anymore, as its too blur. the other two properties dont help too much, as I want the glow to begin from the middle.
Lets work out this together and see how we can do with CSS a wide and high glow effect.
You can add multiple text-shadows:
text-shadow:
-3px 0px 10px #FFF,
3px 0px 10px #FFF,
0px 0px 10px #FFF,
-3px -3px 10px #FFF,
3px -3px 10px #FFF,
0px -3px 10px #FFF,
-3px 3px 10px #FFF,
3px 3px 10px #FFF,
0px 3px 10px #FFF;
This would give you a wider, fuller glow, as there are 9 separate shadows surrounding the text. Adjust the values to get the intensity you're looking for.
(the values are a random guess - untested as I'm on my phone) :)
http://jsfiddle.net/pzMmC/ -
You can overlay concentric shadows to multiply the effect:
a:hover {
text-shadow: 0 0 80px white,
0 0 70px white,
0 0 60px white,
0 0 50px white,
0 0 40px white,
0 0 30px white;
}
I've written a test: http://jsfiddle.net/simbirsk/DnHKk/
Why not use CSS3's gradients?
Take a look at this fiddle.
You can generate your own gradients here or here.