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.3.
This 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>, <shapetype>, 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 shape—that shape is a rectangle here, but you can use an oval or whatever you like—pointing to the right and up at 45°:
<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.18, where you can see the shadow apparently coming from a light source at the lower left.