Differences
This shows you the differences between two versions of the page.
| — | development:css:text_shadow [2019/10/31 09:04] (current) – created - external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== Text shadow with CSS ====== | ||
| + | Adding shadows to text (and explanation of parameters) | ||
| + | |||
| + | Regular text shadow: | ||
| + | <code css> | ||
| + | p { text-shadow: | ||
| + | </ | ||
| + | Multiple shadows: | ||
| + | <code css> | ||
| + | p { text-shadow: | ||
| + | </ | ||
| + | The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow: | ||
| + | <code css> | ||
| + | value = The X-coordinate | ||
| + | value = The Y-coordinate | ||
| + | value = The blur radius | ||
| + | value = The color of the shadow | ||
| + | </ | ||
| + | Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value). | ||
| + | |||
| + | The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero. | ||
| + | Also, remember you can use RGBA values for the color, for example, a 40% transparency of white: | ||
| + | <code css> | ||
| + | p { text-shadow: | ||
| + | </ | ||
| + | |||