Is it possible to apply two text-shadow values on one p element with CSS3?
I want to create a very light black background with a 1 pixel border.
Something like this:
text-shadow: 0 0 55px black; (very light black background to increase white text readabilitiy)
&
text-shadow: 0 1px 0 rgba(0,0,0, .25); (one pixel black drop shadow)
You can simply seperate the shadows with a comma:
text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25);
Demo fiddle
You may want to have a look at this article on MDN for further information.
The text-shadow CSS property adds shadows to text. It accepts a
comma-separated list of shadows to be applied to the text and
text-decorations of the element.
Each shadow is specified as an offset from the text, along with
optional color and blur radius values.
Multiple shadows are applied front-to-back, with the first-specified shadow on top.
You can try using this code :
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
REF : CSS SHADOW TRICKS
Related
I'm having a bit of difficulty with CSS at the moment. I'm trying to apply both text stroke and a shadow, however I'd like to be able to change the opacity of both the stroke and shadow. I've tried however either the text shadow applies and the stroke doesn't or the stroke applies and the shadow doesn't. Any pointers? I can provide the code I was trying to use if need be.
Thanks a lot.
You can use pseudo :after to create strike through effect and play with its opacity to achive what you want.
Check this JS Fiddle I have created. You can change the values in the CSS part to achive what you want: http://jsfiddle.net/_vijaydev/xvse9p1o/
There is other way to make your text strike using text-decoration:line-through and apply that at your css.
DEMO
I found that this works for IE:
text-shadow:
2px 2px 10px color,
0px 2px 10px color,
2px 0px 10px color,
2px -2px 10px color,
0px -2px 10px color,
-2px 0px 10px color,
-2px 2px 10px color,
-2px -2px 10px color;
and '-webkit-text-stroke:2px color;' & a 'text-shadow:' rule for FF/Chrome.
Obviously you can change the px to what you want.
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
I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:
(source: gyazo.com)
Does any body know how I can get that effect with CSS?
The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.
Notice the form of box-shadow is "x-offset, y-offset, blur, color"
Learn to use the blur amounts and multiple shadows and you can make some really nice effects.
Example style (for display on a background of #222):
.button {
display:inline-block;
padding: 10px 15px;
color: white;
border-radius: 20px;
box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}
The answer has already been given to you (box-shadow: inset ..), so here's a quick demonstration of how it could work:
http://jsfiddle.net/L6nJj/
The important part is box-shadow: inset 2px 2px 3px 0 red.
For an explanation of the available options: https://developer.mozilla.org/en/css/box-shadow#Values
Be sure to take into account the browser support for box-shadow, which is that it doesn't work in older versions of IE, but works "everywhere" else: http://caniuse.com/css-boxshadow
Have a look at the CSS3 box-shadow property, in particular, inset box shadows. Example L in this article should provide the effect you're looking for.