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.3.

Table 19.3. Attributes of the <shadow> Element
NamespaceAttributeTypeDefault ValueDescription
VMLcolorBooleangray RGB (128,128,128)Sets the color of the primary shadow.
VMLcolor2Booleangray RGB(203,203,203)Sets the color of the second shadow, or the highlight in an embossed shadow.
VMLidstringnullGives a unique identifier for the shadow.
VMLmatrixstringnullIs 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.
VMLobscuredBooleanfalseDetermines whether you can see the shadow if the shape is not filled.
VMLoffsetvector2D2pt,2ptAmount of x,y offset for the shadow from the shape's location.
VMLoffset2vector2D0pt,0ptAmount of x,y offset for the second shadow from the shape's location.
VMLonBooleantrueTurns the display of the shadow on and off.
VMLopacitynumber1.0Sets the opacity of the shadow.
VMLoriginvector2D0,0Sets the origin. Set this to fractional values.
VMLtypestringsingleSets the shadow type. This can be single, double, emboss, or perspective.

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.

Figure 19.18. Creating VML shadows.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.58.197.25