The shadow Element | Real World XML (2nd Edition)

The <shadow> Element

You can use the <shadow> element to add shadows to VML shapes , as well as create embossing effects and even double shadows. Here's the attribute list for this element:

 <!attlist shadow  id id #implied -- document-wide unique id -- on cdata #implied type cdata #implied obscured cdata #implied color cdata #implied opacity cdata #implied offset cdata #implied color2 cdata #implied offset2 cdata #implied origin cdata #implied matrix cdata #implied >

You can find the attributes of this element in Table 19-2.

Table 19-2. Attributes of the <shadow> Element

Namespace	Attribute	Type	Default Value	Description
VML	`color`	`boolean`	`gray RGB(128,128, 128)`	Sets the color of the primary shadow.
VML	`color2`	`boolean`	`gray RGB(203,203, 203)`	Sets the color of the second shadow, or the highlight in an embossed shadow.
VML	`id`	`string`	`null`	Gives a unique identifier for the shadow.
VML	`matrix`	`string`	`null`	Gives a perspective transform matrix using the form `"scalexx, scalexy,scaleyx, scaleyy,perspectivex,perspectivey"` . The perspective units are measured in inverse fractions of the shape size.
VML	`obscured`	`boolean`	`false`	Determines whether you can see the shadow if the shape is not filled.
VML	`offset`	`vector2D`	`2pt,2pt`	Gives the amount of x,y offset for the shadow from the shape's location.
VML	`offset2`	`vector2D`	`0pt,0pt`	Gives the amount of x,y offset for the second shadow from the shape's location.
VML	`on`	`boolean`	`true`	Turns the display of the shadow on and off.
VML	`opacity`	`number`	`1.0`	Sets the opacity of the shadow.
VML	`origin`	`vector2D`	`0,0`	Sets the origin. Set this to fractional values.
VML	`type`	`string`	`single`	Sets the shadow type. Can be `single` , `double` , `emboss` , or `perspective` .

Here is the XML template for this element:

 <shadow  id=null on="false" type="single" obscured="false" color="rgb(128,128,128)" opacity="1.0" offset="2pt,2pt" color2="rgb(203,203,203)" opacity2="1.0" offset2="0pt,0pt" origin="0,0" matrix=null </shadow>

You place the <shadow> element inside the <shape> or <shapetype> element or any predefined shape element to draw a shape with a shadow. When creating a shadow, the tricky part is getting the perspective transform matrix to indicate how to create the shadow as you want it. In this example, I've created a matrix that will add a shadow to any VML shapethat shape is a rectangle here, but you can use an oval or whatever you likepointing to the right and up at 45 °:

Listing ch19_16.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>         v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Shadows             </H1>  <v:rect style='width:120pt;height:100pt;'   fillcolor="blue">   <v:shadow on="true" type="perspective"   origin=".5,.5"   matrix="1,-1,0,1,0,-5e-7"/>   </v:rect>  </CENTER>     </BODY> </HTML>

The result appears in Figure 19-16, where you can see the shadow apparently coming from a light source at the lower left.

Figure 19-16. Creating VML shadows.

graphics/19fig16.gif