Menu
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)
802
CSS Syntax Note: To add more than one shadow to the text, add a comma-separated list of shadows.
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.
In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow ). The box-shadow property takes a number of values: The offset on the x-axis. The offset on the y-axis.
Box shadows can use commas to have multiple effects, just like with background images (in CSS3). While you can apply multiple shadows, applying inset shadows, I've found, is a special case.
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.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
