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.
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 */
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
I have a an html element in the DOM;
<h5 class="white-shadow"> Basic </h5>
It has the following css rule attached;
.white-shadow{
text-shadow: -1px 0px 5px #ffffff;
}
The h5 is within a list element that has a gray background. The idea is to add the white text shadow for better readability. The odd thing is that I see no results.
This is what I see in the browser;
This is what devtools shows me;
But if I change the background color from white to red I am able to see the change.
This is what I see in the browser;
This is what devtools shows me;
I haven't touched the alpha parameter of the text shadow rule. For some reason the red text shadow color is visible while the white text color is not.
I am using bootstrap3, although I don't expect that it is blocking white text shadows anywhere.
Why can't I see the white shadow around the text? How could I fix it?
Shadow is there in the DOM but because of your background-color, it is not much noticeable
see here
My suggestion, either change shadow color or background-color
here is what you want
use
.white-shadow{
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
text-shadow value quoted from thread : Text border using css (border around text)
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
How can I define background-image repeat with cap insets? I want the image to be repeated without border. Is it possible to repeat (tile) or stretch the middle in CSS?
The first (smaller) rounded rectangle is my PNG image. Red lines show cap insets I want to define. The latter (bigger) should be shown as result.
Check out the CSS3 border-image property. It's designed for this sort of thing.
.box {
border-image: url(my-image.gif) 20 20 20 20 repeat;
}
Interactive demo here.
It's supported on most non-IE browsers.
This looks like you could just solve this by using pure css3
.box {
background: white;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}