1 Overview
Ok, let's go into the most exciting part of CSS - filter, which will bring us into a beautiful 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)
how about it? 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 a filter operation, you must first define the filter; filter is a filter attribute name, including Alpha, Blur, Chroma, etc. A variety of properties, please see the table below:
Parameters in the Filter Expression in the above FILTER expression are parameters indicating the individual filter properties, but also these parameters determine how the filter will appear. 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 an example (see below):
The code that implements the above effect is as follows:
alpha </ title> <style> // * Defines CSS style * // <! - div {position: absolute; left: 50; top: 70; width: 150;} / / * Define the style in the DIV area (where you are absolutely positioning, Left, Top, Width coordinate) * // img {position: absolute; top: 20; Left: 40; filter: alpha (Opacity = 80)} // * Define the style, absolute positioning, filter properties are transparency 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 change it in the code above, there will be additional effects. We only modify the IMG style properties, change the IMG style property code in Head as follows:</p>
<p>Imsolute; 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, terminate gradient coordinates, and set transparent style values (Style = 1) is linear * //</p>
<p>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 values 2 and 3, respectively, and click the thumbnail to enlarge.</p>
<p>Style = 1 style = 2 style = 3</p>
<p>The above is the application of CSS's alpha filter properties, and specific applications also need to find an example to practice one. In the next section we will introduce the blur (blur) attribute.</p>
<p>3, blur attribute</p>
<p>If you use your hand to quickly scribble on an oil painting that hasn't 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 the blur attribute:</p>
<p>Filter: blur (add = add, direction, stregth = strength)</p>
<p>We see that the blur attribute has three parameters: add, direction, stregth. 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 the effect</p>
<p>It seems that it is a little like a kaleidoscope. In this example, some JavaScript's statement is added, the code is as follows:</p>
<p><html> <head> <title> BLUR CSS </ TITLE> <Script> Function Handlechange (OBJ) / / * Set a loop function Handlechange, the object is Obj * // {with (Obj.Filters (0)) //// * OBJ's filter attribute * // {if (Strength <255) // * Settings a loop condition * // {strength = 1; Direction = 45;} // * Each cycle is streamth plus 1, Direction plus 45 Degree * //}} </ script> </ head> <body> <p> <img id = "IMG1" src = "ss01087.jpg" style = "filter: blug (strENGTH = 1)" onfilterchange = "Handlechange (this) "> // * Import a picture, the initial blur attribute strongth is equal to 1, simultaneously call the onfilterchange function * // </ p> </ body> </ html></p>
<p>Note: The blur attribute in JavaScript is defined: [oblurfilter =] Object.filters.blur</p>
<p>This example is a more complicated example of the blur property. The next section I will introduce you to two simpler blur properties.</p>
<p>4, chroma attribute</p>
<p>The Chroma property can set the color specified in an object to transparent color, its expression is as follows:</p>
<p>FILTER: Chroma (Color = Color)</p>
<p>The expression of this property is not very simple, it has only one parameter. Just set up the color of the transparent color with the Color parameter. For example, the following picture:</p>
<p>There are two fonts, two colors, and we now add a Chroma property to the "Leaves" font to transparency. code show as below:</p>
<p><html> <head> <title> chroma filter </ title> <style> <! - div {position: absolute; top: 70; width: 200; filter: chroma (color = green)} // * Define DIV In the range, green is transparent, and the location of the DIV is set * // p {font-family: bailey; font-size: 48; font-weight: bold; color: green} // * Set the font name, size, Rough, color * // em {font-family: lucida handwriting italic; font-size: 48; font-weight: bold; color: RGB (255, 51, 153)} // * Setting the font name, size, thickness of the EM, Color * // -> </ style> </ head> <body> <div> <p> Leaves <em> love </ em> </ p> </ div> </ body> </ html> pass In the above code, the property settings of Chroma are transparent. The display effect is as follows:</p>
<p>We saw green Leaves fonts, which actually transparent, click on its area under IE, it will still be displayed (see below):</p>
<p>In addition, it should be noted that the Chroma property is not very suitable for the image file. Because many pictures are treated and compressed (such as JPG, GIF format formats), they have few fixed locations that can be set to transparent.</p>
<p>This section describes the application of the Chroma property. The next section will introduce you to the DROPSHADOW attribute.</p>
<p>5, DROPSHADOW attribute</p>
<p>The 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:</p>
<p>FILTER: DROPSHADOW (Color = Color, Offx = Offx, OFFY = Offy, Positive = POSTIVE)</p>
<p>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 first look at an example (see below):</p>
<p>Look, the text in the figure is like flying from the page, and left a faint shadow. In fact, it is applied here that CSS's DROPSHADOW attribute, let's take a look at its code:</p>
<p><html> <head> <title> DROPSHADOW </ Title> <style> // * Defines CSS style * // <! - div {position: absolute; top: 20; width: 300; filter: Dropshadow (Color = # FFCCFF, OFFX = 15, OFFY = 10, POSTIVE = 1);} -> // * Define the style in the DIV range, absolute positioning, projected color to #ffccff, projected coordinates to offset 15 pixels Down 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, Dropshadow property is image Support is not good, 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.</p>
<p>This section describes the application of the DROPSHADOW attribute. The next section will introduce you to the properties of FLIPH, FLIPV.</p>
<p>6, Fliph, FLIPV attribute</p>
<p>FLIP is the flip properties of the CSS filter, and the fliph represents horizontally, and FLIPV represents vertical flipping. Their expressions are very simple, namely:</p>
<p>Filter: fliph</p>
<p>Filter: Flipv</p>
<p>Let's first see a picture:</p>
<p>Below we have a horizontal flipping and vertical flipping, and a text above the image also has flipped. code show as below:</p>
<p><html> <head> <title> flip css </ title> <style> // * Set the CSS style start * // <! - div {position: absolute; top: 20; width: 300; Filter: fliph FLIPV);} // * Define the style in the DIV range, absolute positioning, flip to horizontally 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. * // -> </ 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 Image * // </ body> </ html> The two effects generated by the code are shown below:</p>
<p>Horizontal flipping vertical flipping</p>
<p>Flip attribute applications are not very simple. I will introduce you to the glow properties.</p>
<p>7, the Glow property When using the "Glow" property for an object, the edge of this object produces a similar illuminating effect. 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. 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.</p>
<p>8, the Gray property GRAY property turns a picture into a grayscale. 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 unaptive Gray property and the Gray property: Effect after the Gray property, the contents of the Gray property are relatively simple, and the next section will introduce you to the invert conversion attribute. 9, the Invert property Invert property can turn all the visual properties of the object, including color, saturation, and brightness values. 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 effect picture We see that the Invert property is actually achieved 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.</p>
<p>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. 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.</p>
<p>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. 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.</p>
<p>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. For example, the following picture: Below we add a WAVE effect on this page, the code is as follows: <html> <head> <title> Wave CSS </ title> <style> // * Define the CSS style start * // <! - .leaf {Position: Absolute; Top: 10; Width: 300; Filter: Wave (add = true, freq = 3, lightstRength = 100, Phase = 45, strENGTH = 20);} // * Setting Leaf class Style, absolute positioning, WAVE attribute, generates 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 attribute, 3 ripples, light intensity is 100, The corrugation starts from 90 degrees, amplitude is 5 * // -> </ style> </ head> <body> <div class = "wave"> // * Defines the WAVE "* // <p style in the DIV area = "Font-family: lucida handwriting; font-size = 72pt; font-weight: bold; color: RGB (189, 1, 64);"> Leaf </ p> // * Set the font name, size, thick, Color * // </ div> <p> <img src = "ss01044.jpg"> </ p> // * Import image * // </ body> </ html> This code is achieved as shown below: 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 only increases the value of the freq parameter, reduces the value of Stregth, LightstRength Yes. 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 property</p>
<p>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. Its expression is simple:</p>
<p>FILTER: XRAY</p>
<p>Let's first look at a page (as shown below):</p>
<p>If you add a xray attribute in the above page, that is, in <style> of <head>, add this sentence: Filter: xray</p>
<p>You will look at this page again, it will be another effect: (as shown below)</p>
<p>Look, is it just like a X-ray film.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-98648.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="98648" 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.041</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 = 'tmwcDteWrKy5hSgzcNutqeyyTwM5i_2F5ocAp8AEFoI82VmJbBjrH1b_2Fxk5tapmotGTILz_2Fhh38xYRqzZ3NVvK_2BQ_3D_3D';
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>
