CSS Shadows

We can use CSS to draw shadows. There are two types of shadow:

Box shadow
Text Shadow

Box Shadow

Example of Various Box Shadows (Run Example)

<!doctype html>   
<html>
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            div
            {
                width:100px;
                height:50px;
                margin-top:50px;  
                padding:10px;         
            }

            #equal
            {
                border:red thin solid;        
                box-shadow:#666 20px 20px 10px;  
            }

            #soft
            {
                border:black thin solid;
                box-shadow:#666 20px 20px 30px;  
            }

            #down
            {
                border:green thin solid;    
                box-shadow:#666 0px 20px 10px;
            }

            #right
            {
                border:blue thin solid;
                box-shadow:#666 20px 0px 10px;
            }

            #red
            {
                border:red thin solid;
                box-shadow:red 20px 20px 10px;
            }
        </style>
    </head>

    <body>
        <div id = "equal">
            Equal
        </div>

        <div id = "soft">
            Soft
        </div>

        <div id = "down">
            Down
        </div>

        <div id = "right">
            Right
        </div>

        <div id = "red">
            Red
        </div>
    </body>
</html>

What happens if you change the order of the browser specific properties in the above code. Explain your answer.

Use an image based vertical menu that uses a drop shadow to identify the item that the mouse is hovering over. Use your menu to create a website that contains image links to the four schools on the DkIT website. You should use appropriate colours and graphics in your website.

Text Shadow

We can place a shadow on text using the text-shadow style, as shown in the example below.

Example of a text shadow (Run example)

<!doctype html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            h1
            {
                text-shadow:#999 3px 3px 2px; 
            }
        </style>
    </head>

    <body>
        <h1>DkIT</h1>
    </body>
</html>