CSS Box Shadows

Several CSS3 properties are not yet implemented on all browsers. The 'box-shadow' is one such property. When a property is not yet fully supported across all browsers, we need to include a version of the property for each browser. The browser specific version of a property will always begin with a browser identifier and end with the property name. The browser specific version of the 'box-shadow' property is:

We also need to to include the default CSS3 version of the property. This should always be listed after the browser specific versions of the property.

Example of Various Box Shadows (Run Example)

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Example</title>

<style type="text/css">
div
{
    width      : 100px;
    height     : 50px;
    margin-top : 50px;   /* leave a gap between each div */
    padding    : 10px;   /* put padding around the text inside the div */        
}

#equal
{
    border             : red thin solid;        
    -webkit-box-shadow : #666 20px 20px 10px;
    -moz-box-shadow    : #666 20px 20px 10px;
    -ms-box-shadow    : #666 20px 20px 10px;
    -o-box-shadow    : #666 20px 20px 10px;
    box-shadow         : #666 20px 20px 10px;  /* always list the default last */
}

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

#down
{
    border             : green thin solid;    
    -webkit-box-shadow : #666 0px 20px 10px;
    -moz-box-shadow    : #666 0px 20px 10px;
    -ms-box-shadow    : #666 0px 20px 10px;
    -o-box-shadow    : #666 0px 20px 10px;
    box-shadow         : #666 0px 20px 10px;
  behavior           : url(pie.htc);    
}

#right
{
    border             : blue thin solid;
    -webkit-box-shadow : #666 20px 0px 10px;
    -moz-box-shadow    : #666 20px 0px 10px;
    -ms-box-shadow    : #666 20px 0px 10px;
    -o-box-shadow    : #666 20px 0px 10px;
    box-shadow         : #666 20px 0px 10px;
    behavior           : url(pie.htc);        
}

#red
{
    border             : red thin solid;
    -webkit-box-shadow : red 20px 20px 10px;
    -moz-box-shadow    : red 20px 20px 10px;
    -ms-box-shadow    : red 20px 20px 10px;
    -o-box-shadow    : red 20px 20px 10px;
    box-shadow         : red 20px 20px 10px;
    behavior           : url(pie.htc);    
}
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text shadow example</title>
<style>
p
{
   -webkit-text-shadow: #999 3px 3px 2px; 
   -moz-text-shadow:#999 3px 3px 2px; 
   -ms-text-shadow: #999 3px 3px 2px; 
   -o-text-shadow: #999 3px 3px 2px; 
   text-shadow: #999 3px 3px 2px; 
}

</style>
</head>

<body>

<p>DkIT</p>

</body>
</html>
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>