CSS filter
1. Outlined, below we will enter the most exciting part of CSS - filters, which will bring us into the colorful multimedia world. It is a filter property, and the page becomes more beautiful. The identifier of the CSS filter property is Filter. In order to make you have a whole impression, let's take a look at its writing format: Filter: FilterName (parameters)? Is it very simple, it seems that there is no difference in definition with the presently attributes. FILTER is a filter property selector. That is, as long as you perform filter operation, you must first define the filter; filter is the filter attribute name, including Alpha, Blur, Chroma, etc., more than a detailed, please see the following table: The following Filter expressions Parameters is the parameters of each filter property, which is why these parameters determine how the filter will display. Have a long list of long lists, is it very difficult? Don't tighten, let's take a brief introduction how these properties are implemented in CSS (very simple ^ _ ^). In the next section, we will first learn from the application of Alpha transparent properties. 2, Alpha attribute Alpha is to set transparency. Let's take a look at its expression format: filter: alpha (opacity = opcity, finishopacity = finishopacity, style = style, startx = startx, starty = starty, finishx = finishx, finishy = finishy) Wow, how is it so long. Yes, but these parameters have their own use. Opacity represents a transparency level, optional value is completely transparent from 0 to 100, 0 representative, and 100 represents completely opaque. The Style parameter specifies the shape characteristics of the transparent area. One represents a unified shape; 1 represents the line shape; 2 represents the radiation; 3 represents the rectangular. Finishopacity is an option to set the transparency at the end, thereby achieving a gradient effect, and its value is from 0 to 100. StartX and Starty represent the beginning coordinates of the gradient transparent effect, finishx and finishy represent the end coordinates of the gradient transparent effect. From the above, we can see that if you do not set a transparent gradient effect, you can only set the parameter of Opacity.
Said so much, let's take a look (see below): The code that implements the above effect is as follows:
alpha </ title> <style> // * Define CSS style * // <! - div {position: absolute; left: 50; Top: 70; Width: 150;} // * Define the style in the DIV area (location is absolute positioning, the coordinates of LEFT, TOP, WIDTH) * / / IMG {Position: Absolute; Top: 20; Left: 40; Filter: Alpha (Opacity = 80)} // * Define the style, absolute positioning, and filter properties are transparent to 80 * // -> </ Style> </ head> <body> <div> <p style = "font-size: 48; font-weight: bold; color: red;"> beautiful </ p> // * Define font properties, the foreground color is Red * // </ div> <p> <img src = "ss01076.jpg"> </ p> // * Import a picture * // </ body> </ html> If you are on the code above Do additional effects are made. We only modify the IMG style properties, change the IMG style property code in Head as follows: img {position: absolute; Top: 20; Left: 40; filter: alpha (Opacity = 0, finishopacity = 100, style = 1, startX = 0, starty = 85, finishx = 150, finishy = 85);} // * Set transparent gradient effect, start coordinates, termination gradient coordinates, and set transparent style values (Style = 1) is linear * / The effect of this code is as shown in the lower left. The two pictures of the right side are the effects of the STYLE parameter value of the alpha of Alpha, and click the thumbnail to enlarge. Style = 1 style = 2 style = 3 or more is the application of the Alpha filter attribute of CSS, and the specific application also requires you to find an example to practice one. In the next section we will introduce the blur (blur) attribute. 3, blur attributes If you use your hand to quickly scribble on an oil painting that has not been dried, the picture will become blurred. The blur attribute under the CSS will reach this blurry effect. Let's take a look at the expression of blur attributes: Filter: bl (add = add, direction, strongth = strength) We see that the blur property has three parameters: add, direction, stregth.</p>
<p>The add parameters have two parameter values: True and False. It means that the specified image is changed to a fuzzy effect. The Direction parameter is used to set the fuzzy direction. The fuzzy effect is carried out in a clockwise direction. Where 0 degrees represent vertical up, one unit every 45 degrees, the default value is 270 degrees to the left. The correspondence between the angular direction is shown in the following table: The Stregth parameter value can only be specified using an integer, which represents how much pixels will be blurred. The default is 5 pixels. Still watching an example. Click here to see if it looks like a kaleidoscope, add some JavaScript statements in this example, the code is as follows: <html> <head> <title> blur css </ title> <script> function handlechange (obj) / / * Set a loop function Handlechange, the object is Obj * // {with (Obj.Filters (0)) // * OBJ Filter property * // {if (Strength <255) // * Settings Circulation Conditions * // {Stregth = 1; Direction = 45;} // * Each cycle will add 1, Direction plus 45 degrees * //}} </ script> </ head> <body> <p> <img id = "IMG1" SRC = "SS01087.JPG" style = "filter: blug (stregTH = 1)" onfilterchange = "Handlechange (this)"> // * Import a picture, the initial blur attribute strongth is equal to 1, and call the ONFILTERCHANGE function at the same time * // </ p> </ body> </ html> Note: The blur attribute in JavaScript is such a definition: [oblurfilter =] Object.filters.blur This example is a complicated example of the blur property, next I will introduce you to the two simpler database effects. You can also set the fonts in the page via the blot property.</p>
<p>If the BLUR attribute of the font is defined as 1, the font effect is like this (as shown below): How is it, is it a bit impressionist meaning, this effect is as follows: <html> <head> <title> filter blur </ title> <style> // * CSS style definition start * // <! - DIV {Width: 200; filter: bl (add = true, Direction = 90, strENGTH = 25);} // * Set a DIV style, filter blur property * // -> </ style> </ head> <body> <div style = "Width: 702; Height: 288> <p style =" font-family : Lucida Handwirting Italic; Font-Size: 2; Font-Style: Bold; Color: RGB (55, 72, 145); "> Leaf </ p> // * Define Font Name, Size, Style, Prospect * // < / div> </ body> </ html> We see that Stregth is set to 25, if the value is changed, it will reach a very exaggerated effect, while the Direction parameter value is 180, the display effect is as follows: use Blur Attributes Set the font to achieve a lot of effect, make Direction and Streg, can also reach a variety of effects, you can modify yourself try. In this section, we introduced the blur attribute, and the next section will introduce you to Chroma properties. 4, chroma property chroma property can set the color specified in an object to transparent color, its expression is as follows: Filter: chroma (color = color) The expression of this attribute is very simple, it has only one parameter. Just set up the color of the transparent color with the Color parameter. For example, the picture below: Two fonts, two colors, we now add a chroma property to the "Leaves" font, making it transparent.</p>
<p>The code is as follows: <html> <head> <title> chroma filter </ title> <style> <! - DIV {Position: absolute; top: 70; width: 200; filter: chroma (color = green)} // * Define green in the DIV range to transparent colors, and set up the location of the DIV * // p {font-family: bailey; font-size: 48; font-weight: bold; color: green} // * Setting the font name , Size, thick, color * // em {font-family: Lucida Handwriting italic; font-size: 48; font-weight: bold; color: RGB (255, 51, 153)} // * Setting EM's font name, size , Thickness, color * // -> </ style> </ head> <body> <div> <p> Leaves <em> love </ em> </ p> </ div> </ body> </ HTML> Sets green transparency by setting the property of chroma in the above code. The display effect is as follows: We see the green Leaves font is not seen, in fact it is transparent, click on its area under IE, it will still be displayed (see below): In addition, it is necessary to note that chroma Attributes are not very suitable for image files. Because many pictures are treated and compressed (such as JPG, GIF format formats), they have few fixed locations that can be set to transparent. This section describes the application of the Chroma property. The next section will introduce you to the DROPSHADOW attribute. 5, the Dropshadow property DROPSHADOW property is to add the shadow effect of the object. The effect it achieves looks like the original object leaves the page, and then the projection of the object is displayed on the page. Take a look at its expression: Filter: Dropshadow (color = color, offx = offx, offy = OFFY, POSTIVE = POSTIVE) This property has four parameters: Color represents the color of the projected shadow. Offx and OFFY respectively x direction and the shift of the Y direction. The offset must be set with an integer value. If set to positive integers, represent the right direction of the X axis and the downward direction of the Y-axis. Set to negative integers. The Positive parameter has two values: TRUE establishes visible projections for any non-transparent pixel, False establishes visible projections for transparent pixels. Similarly, let's take a look at an example (see below): Look, the text in the figure is like flying out from the page, and left a faint shadow.</p>
<p>In fact, the application is the CSS DROPSHADOW attribute, let's take a look at its code: <html> <head> <title> Dropshadow </ title> <style> // * Define CSS style * // <! Div {POSITION: ABSOLUTE; TOP: 20; Width: 300; Filter: Dropshadow (color = # ffcff, OFFX = 15, OFFY = 10, Positive = 1);} -> // * Define the style within the DIV range, Absolute positioning, the color of the projection is #FFCCFF, the projection coordinates are offset to the right, offset 10 pixels * // </ style> </ head> <body> <div> <p style = " FONT-FAMILY: Matisse Itc; Font-Size: 64; Font-Weight: bold; color: # cc00cc; "> // * Define the font name, size, thickness, color * // love leaf </ p> </ div > </ Body> </ html> and chroma properties, the DROPSHADOW property is not good for the image, I refer to the image file in JPEG, GIF format. Causes that cannot be supported are like Chroma, because this image is rich in color, it is difficult to find a position of shooting shadows. This section describes the application of the DROPSHADOW attribute. The next section will introduce you to the properties of FLIPH, FLIPV. 6, fliph, flipv attribute FLIP is the flip properties of the CSS filter, and the fliph represents horizontally, and FLIPV represents vertical flipping. Their expressions are very simple, respectively: Filter: Fliph filter: Flipv let's take a picture first: Click to enlarge the lower below We achieve horizontal flipping and vertical flipping, and in a piece of text above the picture, . The code is as follows: <html> <head> <title> flip css </ title> <style> // * Set the CSS style start * // <! - div {position: absolute; top: 20; width: 300; Filter : Fliph (flipv);} // * Defines the style in the DIV range, absolute positioning, flip to flip or vertically. Note: Only one of the fliph and flipv only one of the * // ims; top: 70; Left: 40; Filter: fliph (flipv);} // * Define the style, absolute positioning, flip properties Like DIV.</p>
<p>* // -> </ style> </ head> <body> <div> <p style = "font-family: bailey; font-size: 36pt; font-weight: bold; color: RGB (10, 128, 156); > Leaf Village </ p> // * Define the font name, size, thickness, color * // </ div> <p> <img src = "ss05058.jpg"> </ p> // * Import The two effects generated by the image * // </ body> </ html> code are shown below: (Click to enlarge) attribute applications that horizontally flip vertically flip flipping. I will introduce you to the glow properties. 8, the Glow property When using the "Glow" property for an object, the edge of this object produces a similar luminescence. Its expression is as follows: Filter: Glow (color = color, strongth = strength) The parameter of the glow property is only two: color is the color of the specified illuminating, and StregTh specifies the intensity of the illumination, the parameter value from 1 to 255. Let us first look at the effect of the Glow property: How is it, is there a feeling of burning flames.</p>
<p>The code that implements this effect is as follows: <html> <head> <title> filter glow </ title> <style> // * Start setting CSS style * // <! - .leaf {position: absolute; top: 20 Width: 400; Filter: Glow (color = # ff3399, strongth = 15);} // * Set the class LEAF, absolute positioning, GLOW filter properties, luminous color value is # ff3399, the intensity is 15 * // .weny {POSITION: ABSOLUTE; TOP: 70; LEFT: 50; Width: 300; Filter: Glow (color = # 9966cc, strongth = 10);} // * Set class weny, absolute positioning, glow filter properties, glow color value To # 9966CC, the intensity is 15 * // -> </ style> </ head> <body> <div class = "leaf"> // * leaf class style * // <p style = "font-family: Lucida HandWriting; Font-Size: bold; color: # 003366; "> Leaf mylove </ p> // * Set the font name, size, thick, color * // </ div> <div class = "Weny"> // * Weny class * // <p style = "font-family: bailey; font-size: 48pt; font-weight: bold; color: # 99cc66;"> // Set the font name, Size, thickness, color * // weny good! </ P> </ div> </ body> </ html> You can also modify the color value at will, see what other luminous effects is. This section mainly tells the application of the Glow property. The next section will introduce you to the GRAY attribute. 7, the GRAY Properties GRAY property turns a picture into a grayscale map. Its expressive expression is very simple: Filter: Gray actually this property is not good, just add a code in the IMG style you define: {filter: gray} Everything OK. The following two figures represent the result of the resulting gray attribute and adding the Gray property: this is the original picture, click the effect of the effect map that can be enlarged into a gray property, the content is relatively simple, and the next section will introduce you invert Transformation attributes. 9, the Invert property Invert property can turn all the visual properties of the object, including color, saturation, and brightness values.</p>
<p>Its expression is also very simple: Filter: Invert Let's take a look at the image effect changes before and after the invert property (as shown below): the original Invert property renderings (click to enlarge) (Click to enlarge) We see the Invert property In fact, it is a "negative" effect. Try it with your other map. This section describes the Invert property. The next section will introduce you to the Mask property. 10. The Mask property Mask property is an object to establish a film covering the surface. Its expression is also very simple: filter: mask (color = color) has only one color parameter that specifies what color used as a mask. Similarly, let's take a look at the effect before and after the Mask properties (see figure below): The original Mask property effect diagram plus the effect of the MASK property is as if it is in the object with a colored glasses. The code of the above effect is as follows: <html> <head> <title> mask filter </ title> <style> // * Set the CSS style * // <! - div {position: absolute; top: 20; Left : 40; Filter: Mask (Color: # 666699);} // * Define the style of the DIV area, absolute positioning, Mask property of the Mask property specifies what color cover object * // p {font-family: bailey; Font-size: bold; color: # ff9900;} // * Defines the style, font name, size, thickness, foreground color * // -> </ stop> </ head > <Body> <div> <p> Wenyleaf </ p> </ div> </ body> </ html> In fact, even if you go to the code defined in the code, the effect is still the same. Because there is a definition of the Mask property, the setting of the font color under the mask has lost its meaning. There is also a place where you need to pay attention, the Mask property is not enough to support the image file, and it cannot achieve the effect of the effect. This section explains the application of the Mask property, and the next section will introduce you to Shadow properties. 11. Shadow property shadow properties can establish projection of objects in the specified direction. Its expression is like this: filter: shadow (color = color, direction = direction) Here, Shadow has two parameter values: the color parameter is used to specify the color of the projection; the Direction parameter is used to specify the direction of the projection. The direction here is the same as the "direction and angle relationship" mentioned in the second section BLUR attribute.</p>
<p>Maybe you will ask, what is the difference between the Dropshadow property and the shadow attribute? If you say, you may be difficult to understand, let us take a look at what is different from the effects of using these two attributes (see below): Shadow effect Dropshadow effect, it can be clearly seen two Unlike different. The Shadow property can projection shadows at any angle, and the Dropshadow property is actually used to define the shadow with offset. Therefore, it seems that the words and shadows of the left picture are like integrating, and the words on the right are like being separated from the shadow. The code of this example is as follows: <html> <head> <title> shadow </ title> <style> // * Start setting CSS style * // <! - .Shadow {position: absolute; top: 20; width: 300; Filter: shadow (color = # cc66ff, direction = 225);} // * Define the style of shadow class, absolute positioning, shadow properties, shadow color, projection direction * // .dropshadow {position: absolute; top: 180 Width: 300; Filter: Dropshadow (color = # cc66ff, offx = 10, offy = 10, posTIAVE = 1);} // * Set the style of the DROPSHADOW class, the style is similar to the shadow class, and the filter is used. DROPSHADOW attribute, the offset of the X-axis and Y-axis * // -> </ style> </ head> <body> <div class = "shadow"> // * area is shadow class * // < p style = "font-family: bailey; font-size: 48pt; font-weight: bold; color: # ff9900;"> HONGEN Online </ p> // * Define font name, size, thick, foreground color * / / </ Div> <div class = "dropshadow"> // <p style = "font-family: bailey; font-size: 48pt; font-weight: bold; color: # FF9900; "> HONGEN Online </ p> // * Defines the same font style with the shadow class * // </ div> </ body> </ html> this section tells the application of Shadow attributes, the next section You introduce WAVE properties. 12, WAVE attribute Wave property is used to disrupted the object according to the vertical corrugated style.</p>
<p>Its expression is as follows: Filter: Wave (add = true (false), freq = frequency, LightstRength = enhanced light efficiency, phase = offset, strongth = intensity) We see that the expression of WAVE properties is more complicated, It has a total of five parameters. The Add parameter has two parameter values: True representative disrupted the object according to the corrugated style; false represents unscrupulous; the FREQ parameter refers to how many complete ripples are specified on the object. The Lightstregth parameter is to enhance the effect of generated ripples. The parameter value can range from 0 to 100. The Phase parameter is used to set the offset of the sine wave. This value has a common value of 0, and its variable range is from 0 to 100. This value represents the percentage of the offset at the beginning. For example, this value is 25, and the sine wave begins in the direction of 90 degrees (360 * 25%). Say a lot, we still look at an example first.</p>
<p>For example, the picture below (click to enlarge): Below we add a WAVE effect on this page, the code is as follows: <html> <head> <title> Wave CSS </ title> <style> // * Defines the CSS style start * // <! - .leaf {Position: absolute; top: 10; width: 300; filter: Wave (add = true, freq = 3, lightstrength = 100, Phase = 45, strENGTH = 20);} // * Set the style, absolute positioning, Wave property of the Leaf class, generate 3 ripples, the light intensity is 100, the corrugation starts from 162 degrees (360 * 45%), the amplitude is 20 * // img {Position: absolute; Top: 110 Left: 40; Filter: Wave (add = true, freq = 3, LightstRength = 100, Phase = 25, strongth = 5);} // * Set IMG style, absolute positioning, WAVE, 3 ripples, The light intensity is 100, the corrugation starts from 90 degrees, amplitude is 5 * // -> </ style> </ head> <body> <div class = "wave"> // * Defines the WAVE class in the DIV area * // <p style = "font-family: lucida handwriting; font-size = 72pt; font-weight: bold; color: RGB (189, 1, 64);"> Leaf </ p> // * Set font name , Size, thickness, color * // </ div> <p> <img src = "ss01044.jpg"> </ p> // * import picture * // </ body> </ html> This code implementation The effect is as follows: If you do a change in Wave parameters, you will reach a variety of effects. Please see another effect: (as shown below): In fact, this effect is just the value of the freq parameter, decrease Stregth, the value of Lightstregth is OK. You can also try more, change other parameter values, can also reach a lot of different results. This section mainly tells the application of the WAVE attribute. The next section will introduce you to the XRay property. 13. Xray attribute XRAY is the meaning of X-rays. XRay attribute, as the name suggests, the effect of this attribute is to make the object look like an X-ray film feel.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-92169.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="92169" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.043</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'wcgxlHaGeDQ_2F0_2BEDIDNMPaxnwrTRr3Yh7wBLqNLB4289Qpl88xYay7ZjQU50QJzfUzlInRDZixD_2FSHMp';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
