Invert Property
The Invert property flips all the visual properties of an object, including color, saturation, and brightness values.
Its expression is also simple:
Filter:invert
Let's take a look at the picture effect before and after adding the invert attribute (pictured below):
Artwork Invert Property Effect chart
We see that the Invert property actually achieves the effect of a "negative".
Try it yourself with another picture.
Glow Property
When you use the "Glow" attribute on an object, the edge of the object produces a glow-like effect. Its expression is as follows:
Filter:glow (Color=color,strength=strength)
There are only two parameters for the Glow property: Color is the specified glow, strength specifies the intensity of the glow, and the parameter values from 1 to 255. Let's take a look at the effect of adding the Glow property:
How does it feel to have a burning flame. The code that implements this effect is as follows:
<title>filter glow</title>
<style>//* start setting CSS styles *//
<!--
. leaf{position:absolute; top:20; width:400;
Filter:glow (color= #FF3399, strength=15);
file://* set class leaf, absolute positioning, glow Filter properties, luminous color value of #ff3399, strength
15*//
. weny{position:absolute top:70; left:50; width:300;
Filter:glow (color= #9966CC, strength=10);
file://* Set class Weny, absolute positioning, glow Filter properties, luminous color value of #9966cc, strength of
15*//
-->
</style>
<body>
<div class= "leaf" >//*leaf class style *//
<p style= "Font-family:lucida handwriting;
Font-size:54pt;font-weight:bold;color: #003366; ">
Leaf mylove</p>//* Set font name, size, weight, color *//
</div>
<div class= "Weny" >//*weny class style *//
<p style= "Font-family:bailey; font-size:48pt;
Font-weight:bold;color: #99CC66; ">
file://set font name, size, weight, color *//
Weny good!</p>
</div>
</body>
You can also change the color values to see what other glow effects are.
Fliph, FLIPV properties
Flip is the flip property of a CSS filter, fliph represents a horizontal flip, and the FLIPV represents a vertical flip. Their expressions are simple, respectively:
Filter:fliph
Filter:flipv
Let's look at a picture first:
The following is a horizontal flip and a vertical flip for it, and a piece of text above the picture also flips. The code is as follows:
<title>flip css</title>
<style>//* set CSS style start *//
<!--
div{position:absolute;top:20;width:300;
Filter:fliph (FLIPV);}
file://* defines a div-scoped style, absolutely positioned, flipped to flip horizontally or flip vertically.
Note: Here Fliph and FLIPV only take one of the *//
img{position:absolute;top:70;left:40;
Filter:fliph (FLIPV);}
file://* defines the style of the picture, absolute positioning, flipping the attributes and Div. *//
-->
</style>
<body>
<div>
<p style= "FONT-FAMILY:BAILEY;FONT-SIZE:36PT;
Font-weight:bold Color:rgb (10,128,156); ">
Leaf Village </p>
file://* define font name, size, weight, color *//
</div>
<p></p>
file://* Import a picture *//
</body>
The two effects generated by the code are as follows:
Flip Vertical Flip Horizontally
Flip the property application is not very simple.
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
