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 */
Related
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
This question already has answers here:
How to get box-shadow on left & right sides only
(16 answers)
Closed 9 years ago.
Is it possible to get a box shadow applied to only the left & right sides of a div?
box-shadow: 0px 0 20px rgba(0,0,0,.4);
I tried changing this to a few varients of:
box-shadow: 0, foo, 0, foo;
but that didn't work well.
In the image below, I want to remove the bottom line (and the top one, but you can't see that in this image).
I would prefer not to use an image if possible.
You can do it by setting the box-shadow on :before and :after
div:before {
box-shadow: -15px 0 15px -15px inset;
}
div:after {
box-shadow: 15px 0 15px -15px inset;
}
http://jsfiddle.net/Qq5tQ/
Basically the way to do it is to use another box shadow on top of it so you css would look like this:
box-shadow: 0px -45px white,0px 22px white, 2px 0 20px rgba(0,0,0,.4)
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;
I needed to show color around the text in my HTML page, I tried border property but it is giving square box around the Text.
How to achieve below requirement
Thanks.
I would write the code here... But this link http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects explains it so well.
Example Demo : http://codepen.io/anon/pen/CDsFb
This is actually much better ...
text-shadow: 3px 3px 0 #000,
/* Simulated effect for Firefox and Opera and nice enhancement for WebKit */
-3px -3px 0 #000,
3px -3px 0 #000,
-3px 3px 0 #000,
3px 3px 0 #000;
This will ensure it looks like a proper border you want and not a simple glow around your text.
You are looking for text-shadow CSS property
text-shadow: 0px 0px 3px orange;
http://jsfiddle.net/NGPhL/
http://www.quirksmode.org/css/textshadow.html
You may use
text-shadow: 0px 0px 4px #1d1dab;
filter: dropshadow(color=#1d1dab, offx=0, offy=0);
http://css3generator.com/
If browser don't support CSS3:
Use can use two text nodes with 17px and 18px font-size (for example) and positioning by CSS first under second (position:absolute, z-index:100, left, top, etc) with different colors.
Thanks For your suggestions, I found an example to get this requirement here
http://gazpo.com/2011/02/text-shadow/
7. Border Around the text
text-shadow: 0 -4px #00468C,4px 0 #00468C,0 4px #00468C,-4px 0 #00468C,4px -4px #00468C,-4px 4px #00468C,4px 4px #00468C,-4px -4px #00468C;
You can use the CSS3 text-shadow property. As long the browser supports webkit, this should surfice.
main-heading h2{
-webkit-text-stroke: 2px #42a6e1;
}
The text-shadow not working fine. So use text stroke instead of text-shadow. Text shadow also makes difficulties at different devices.
You can see in the screenshot given below
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.