|
|
| Line 147: |
Line 147: |
| <font color="orange">'''<font size="3">Hope this helped you!</font>'''</font> | | <font color="orange">'''<font size="3">Hope this helped you!</font>'''</font> |
| </center> | | </center> |
| ==='''Text Shadow'''===
| |
| Text-shadow is a part of CSS(Cascading Style Sheets) Property, it adds shadows to each letter of some text, This property also accepts a list of comma-separated list of shadows to be applied to the text, heres how to do it
| |
| ==='''Syntax'''===
| |
| <pre>
| |
| <p style="text-shadow: (h-shadow) (v-shadow) (Blur Radius) (Color)">
| |
| </pre>
| |
| *'''H-shadow''' = '''The horizontal text shadow position(or x-offset)'''
| |
| *'''V-Shadow''' = '''The vertical text shadow position(or y-offset)'''
| |
| *'''Blur Radius''' = '''The higher the number. the more blur it will be'''
| |
| *'''Color''' = '''The color of the text shadow the available color formats are HEX, RGB, and HSL'''
| |
| ==='''How to do it'''===
| |
| the text has 2 shadows, Which adds a dark gray (#333) shadow a little to the right (0.2em) and down (0.5em) relative to the normal text. The result looks like this:
| |
| <pre><p style="text-shadow: 0.2em 0.5em 10px #FFFFFF">This is a Paragraph</p></pre>
| |
| <p style="text-shadow: 0.2em 0.5em 10px #FFFFFF">This is a Paragraph</p>
| |
| =='''Multiple Shadows:'''==
| |
| You can also have more than one shadow and you all have to do is put comma next to the color value and do the same format again and put them in different positions by using ('''X-shadows''' and '''V-shadow''') formats. if you want more text shadows like this, you have to copy this following line of code and you can change the color value:
| |
| <pre> <!--add comma to add more text shadows---> <!-----Text Size----->
| |
| | | |
| |
| \/ \/ \/
| |
| <p style="text-shadow: 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #600, 0.4em -0.3em 0.1em #006; font-size:40px">This text has more than one shadow</p>
| |
|
| |
| </pre>
| |
| <p align="center" style="font-size:20px">Final Result</p>
| |
| <div style="border: 1px solid white; border-radius:10px" align="center">
| |
| <p style="text-shadow: 0.2em 0.5em 0.1em yellow,-0.3em 0.1em 0.1em, 0.4em -0.3em 0.1em cyan; font-size:40px">This text has more than one shadow</p>
| |
| </div>
| |
| <div align="center">
| |
| <font style="font-size:20px">Check out [https://html-css-js.com/css/generator/text-shadow/ Text Shadow Generator] this will help you!</font>
| |
| <e>
| |
| </div>
| |
| |-|Formatting Guide= | | |-|Formatting Guide= |
| =='''Formatting Guide'''== | | =='''Formatting Guide'''== |
| Line 182: |
Line 152: |
|
| |
|
| <u>NOTE</u>: ''You need to add the commands in the source editor ("Edit source" on the top right hand corner) or it will not work. Also, dont forget to remove the (placeholder) tags and overwrite it with your own text!'' | | <u>NOTE</u>: ''You need to add the commands in the source editor ("Edit source" on the top right hand corner) or it will not work. Also, dont forget to remove the (placeholder) tags and overwrite it with your own text!'' |
| | |
| | |
| ==='''Title'''=== | | ==='''Title'''=== |
| <pre> | | <pre> |
