CSS3 > Texts

Text-Shadow in CSS3

How to create a drop shadow beneath the selected text in CSS3?


By using Text-Shadow we can create a drop shadow beneath the selected text.

<style>
        a.class1 {
            font-size: 50px;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
        }

            a.class1:hover {
                background-color: #690;
            }
</style>
    
<body>   
     <a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>
</body>

In the above code snippet, the DotNetFunda.com link comes with shadow.

  • The 1st argument of the text-shadow is horizontal offset
  • The 2nd argument of the text-shadow is vertical offset
  • The 3rd argument of the text-shadow is blur radius
  • The final argument is the color name
OUTPUT
If the cursor is On hover, the background color of the hyperlink turns into Green. That is shown clearly in the Demo URL.
 Views: 631 | Post Order: 92



Write for us