Walkthrough CSS Filters (5) DropShadow Properties

Source: Internet
Author: User
Tags filter object integer
ado|css| Filter | Detailed 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 leaving a faint shadow.
What actually applies here is the CSS DropShadow attribute, let's take a look at its code:

<HTML>
<title>dropshadow </title>
<style> //* define CSS styles *//
<!--
Div { position:absolute;top:20;width:300
Filter:dropshadow (color= #FFCCFF, offx=15,offy=10,positive=1);
--> The
//* defines a div-scoped style, absolutely positioned, the color of the projection is #ffccff,
the projection coordinates are offset to the right 15 pixels down, and 10 pixels down *//
Font color= "#006666" ></style>
<body>
<div>
<p style= "font-f Amily:matisse itc;font-size:64
Font-weight:bold;color: #CC00CC; "
//* definition   Font name, size, weight, color *//
love Leaf </p>
</div>
</body>

Like the Chroma property, the DropShadow attribute is not good for the image, I mean the JPEG, GIF format image file.
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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.