DropShadow Property
The DropShadow property is intended to add shadow effects to an object. The effect it does looks like leaving the original object out of the page and then displaying the object's projection on the page. Take a look at its expression:
Filter:dropshadow (Color=color,offx=offx,offy=offy,
positive=positive)
There are four parameters for this property: color represents the colors of the cast shadow. OFFX and Offy The offset of the shadow in the X and Y directions respectively. The offset must be set with an integer value. If set to a positive integer, represents the right direction of the x-axis and the downward direction of the y-axis. Set to a negative integer is the opposite.
The positive parameter has two values: true to create a visible projection for any non-transparent pixel, and false to create a visible projection for the transparent pixel portion.
Again, let's take a look at an example (see figure below):
Look, the text in the picture is like flying out of the page, and leaves a faint shadow.
The DropShadow property of the CSS is actually applied here, let's take a look at its code:
<title>dropshadow </tit Le>
<style>//* defines CSS styles *//
<!--
Div {position:absolute;top:20;width:300;
Filter:drops Hadow (color= #FFCCFF, offx=15,offy=10,positive=1);}
-->
file://* defines the style within the Div range, absolute positioning, the color of the projection is #ffccff,
projection Coordinates are offset 15 pixels to the right, 10 pixels down *//
</style>
<body>
<div>
<p s tyle= "Font-family:matisse itc;font-size:64
Font-weight:bold;color: #CC00CC;" >
file://* Define font name, size, weight, color Color *//
Love Leaf </p>
</div>
</body>
and Chroma properties, DropShadow attribute to image support is not good, I refer to JPEG, GIF format image files. The reason for not supporting is the same as Chroma, because the color of the image is very rich, it is difficult to find a projection shadow position.
Chroma Property
The Chroma property can set the color specified in an object to be a transparent color, and its expression is as follows:
Filter:chroma (Color=color)
The expression of this property is not simple, it has only one argument. Just use the color parameter to set the colors you want to specify to be transparent. For example, the following picture:
The figure shows two fonts, two colors, and we now add the Chroma property to the "leaves" font to make it transparent. The code is as follows:
<title>chroma filter</title>
<style>
<!--
div{position:absolute;top:70;width:200;
Filter:chroma (Color=green)}
file://* defines a div-wide green as a transparent color, and sets the position of the div in addition *//
P{font-family:bailey;font-size:48;font-weight:bold;
Color:green} file://* set P's font name, size, weight, color *//
Em{font-family:lucida handwriting italic;font-size:48;
Font-weight:bold;color:rgb (255,51,153)}
file://* sets the font name, size, weight, and color of EM *//
-->
</style>
<body>
<div>
<p>leaves <em>LOVE</em></p>
</div>
</body>
Make the green transparent by setting the Chroma property in the code above. The display effect is as follows:
We see the green leaves font is missing, in fact it is transparent, in IE click on its area, it will still show (see figure below):
Also, it is important to note that the Chroma property is not suitable for picture files. Because many of the pictures are subtractive and compressed (such as JPG, GIF, etc.), they rarely have a fixed position to be set to transparent.
You can also set the font on the page by using the Blur property. If the Blur property add parameter value of the font is defined to be 1, the font effect is as follows (figure below):
How, is not some impressionist meaning, the implementation of this effect code is as follows:
<title>filter blur</title>
<style>//*css style definition begins *//
<!--
div{width:200;
Filter:blur (add=true,direction=90,strength=25);}
file://* Set div style, filter blur properties *//
-->
</style>
<body>
<div style= "width:702 height:288" >
<p style= "Font-family:lucida handwirting italic;
Font-size:72;font-style:bold;color:rgb (55,72,145); ">
Leaf</p>
file://* defines the font name, size, style, foreground color *//
</div>
</body>
We see strength set to 25, if the value of the larger, it will achieve very exaggerated effect, while the direction parameter value of 180, display the effect of the following figure:
Using the Blur property to set the font can achieve a lot of effects, the direction and strength to make changes, but also to achieve a variety of effects, you can modify their own try.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
