Shadow

Shadow

Shadow effects can be of 2 types:

  • Text Shadow

    Shadow can be applied to the text using the Text-shadow property. Color, horizontal shadow, vertical shadow, blur effect can be applied to the text.

    Syntax:

    text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;

    h-shadow: used to specify the position of the horizontal shadow, it can take negative values v-shadow: used to specify the position of the vertical shadow, it cannot take negative values blur-radius: it is an optional value whose default value is 0

    color: it is an optional value
    none: default value which means no shadow initial: sets the property to its default value inherit: inherits property from its parent

  • Box Shadow

    Box shadow property is used to apply shadow to the elements.

Example No.1:

<html> <html lang="en-US"> <style> h3 { text-shadow: 3px 3px 6px rgb(255, 0, 255); } h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } </style> </head> <body> <h3>Knowledge2life</h3> <h1>Welcome Online website</h1> </body> </html>

OUTPUT:

Knowledge2life

Welcome Online website

Example No.2:

<html> <html lang="en-US"> <style> #example1 { border: 1px solid; padding: 10px; box-shadow: 5px 10px; } #example2 { border: 1px solid; padding: 10px; box-shadow: 5px 10px #888888; } #example3 { border: 1px solid; padding: 10px; box-shadow: 5px 10px red; } </style> </head> <body> <h1>Knowledge2life</h1> <div id="example3"> <p>Knowledge2life website.</p> </div> </body> </html>

OUTPUT:

Knowledge2life

Knowledge2life website.