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.

Adjust the example here, so that each image also contains a drop shadow that changes when the mouse hovers over the image, as shown here.

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>