1. Location:
  2. / Computer learning >> Computer læring >> Kendskab til programmering >> Programmeringssprog >> htmlcss >>

css filtre tekst og billede virkninger

, du kan bruge css filtre til at tilføje særlige virkninger for tekst, billeder og andre aspekter af et websted, uden at bruge billeder eller andre figurer.filtre virker kun på internet explorer, 0 +,,.hvis du udvikler deres hjemmeside for multi - browsere, så kan det ikke være en god idé at bruge css filtre, fordi der er en mulighed for, at det ikke ville give nogen fordel. i dette kapitel vil vi se de detaljerede oplysninger om hver enkelt css filter.disse filtre kan ikke arbejde i din browser, alfa - kanal, alfa - filter ændrer opaciteten af den genstand, som gør, at det falder i baggrunden.følgende parametre kan anvendes i dette filter − parameter beskrivelse opacitet niveau af opacitet.0 er fuldstændig gennemsigtig 100 er fuldstændig uigennemsigtig.finishopacity niveau af uklarhed i den anden ende af objektet.stil, form af opacitet gradient., 0 = ensartet, 1 = lineære, 2 = radialdæk, 3 = rektangulær, startx x samordne for uklarhed gradient skal begynde.starty y koordinere for uklarhed gradient skal begynde.finishx x samordne for uklarhed gradient til ende.finishy y koordinere for uklarhed gradient til ende.,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" /> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div> </body> </html> ,It will produce the following resultat −,, bevægelse sløret, forslag sløret er brugt til at skabe flydende billeder eller tekst med retning og styrke.følgende parametre kan anvendes i dette filter − parameter beskrivelse tilføje sandt eller falsk.hvis det er sandt, at billedet er tilføjet til sløret billede, og hvis falske, er billedet ikke tilsættes til blurred image.retning, i retning af tåge, der går med uret, afrundes til 45 - graders forhøjelser.standardværdien er 270 (til venstre),., 0 = top, 45 = øverst til højre, 90 = ret, 135 = nederste højre, 180 = bunden, 225 = nederst til venstre, 270 = venstre, 315 = øverst til venstre, styrke det antal pixels den tåge vil udvide.misligholdelse er 5 pixels.,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div> </body> </html> ,It will produce the following result −, ,Chroma Filter,Chroma Filter is used to make any particular color transparent and usually it is used with images. du kan tage det med scrollbars også.følgende parametre kan anvendes i dette filter − parameter beskrivelse farve den farve, du vil gerne være gennemsigtige.,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)"> <p>,Text Example:,</p> <div style="width: 580; height: 50; font-size: 30pt; font-family: Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">CSS Tutorials</div> </body> </html> ,It will produce the following result −, ,Drop Shadow Effect,Drop Shadow is used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.,The following parameterkan anvendes i dette filter − parameter beskrivelse farve den farve, i&#rrggbb format af de dropshadow.offx antal pixel faldet skygge opvejes af visuelle objekt med x - aksen.positive tal - drop shadow til højre, negative tal - drop shadow til venstre.offy antal pixel faldet skygge opvejes af visuelle objekt, på y - aksen.positive tal - drop shadow, negative tal - drop shadow.positiv, hvis det er sandt, alle uigennemsigtig pixel i den genstand, en dropshadow.hvis det er en falsk, gennemsigtig dropshadow.misligholdelse, er sandt.,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Chroma(Color = #000000) DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)"> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)">CSS Tutorials</div> </body> </html> ,It will produce the following result −, ,Flip Effect,Flip effect is used to crespiste et spejlbillede af objektet.The following parameters can be used in this filter −, Parameter Description FlipH Creates a horizontal mirror image FlipV Creates a vertical mirror image ,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: FlipH"> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: FlipV"> <p>,Text Example:,</p> <div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipV">CSS Tutorials</div> </body> < /html > det giver følgende resultat −,, glød virkning, glød virkning, der anvendes til at skabe en glød omkring målet.hvis det er et gennemsigtigt billede, så skær, er skabt omkring den uigennemsigtige pixel i det.følgende parametre kan anvendes i dette filter − parameter beskrivelse farve den farve, du ønsker at være selvlysende.styrke intensiteten af den glød (fra 1 til 255).,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div> </body> </html> ,It will produce the following result −, ,Grayscale Effect,Grayscale effect is used to convert the colors of the object to 256 shades of gray. følgende parametre anvendes i dette filter − parameter beskrivelse grå omdanner de farver af objektet - 256 gråtoner.,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Gray"> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Gray">CSS Tutorials</div> </body> </html> ,It will produce the following result −, ,Invert Effect,Invert effect is used to map the colors of the object to their opposite values in the color spectrum, i.e., to create a negative image. følgende parametre anvendes i dette filter − parameter beskrivelse flydende kort farverne på imod deres modsatte værdi i farven spektrum.f.eks. < html > < head > < /head > < krop > < p > et eksempel:, < /p > < img src = "/images /ccs. gif" alat = "css logo" stil = "filter": beregnet > < p >, tekst, f.eks.:, < /p > < div stil = "bredde: 357. højde: 50; skriftstørrelsen: 30pt; skrifttype familie: arial sort; farve: rød; filter: vend" > css tutorials < /div > < /organ > < /html > det giver følgende resultat −,, maske, maske virkning, anvendes til at gøre gennemsigtigt pixels til en bestemt farve og gør uigennemsigtig pixels gennemsigtig.følgende parametre anvendes i dette filter − parameter beskrivelse farve farven, at gennemsigtige områder vil blive.,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)"> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">CSS Tutorials</div> </body> </html> ,It will produce the following result −, ,Shadow Filter,Shadow filter is used to create an attenuated shadow in the direction and color specified. det er et filter, der ligger på mellem dropshadow og glød.følgende parametre kan anvendes i dette filter − parameter beskrivelse farve, den farve, du ønsker at være skygge., retning, i retning af den tåge, der går med uret, afrundes til 45 - graders forhøjelser.The default value is 270 (left).,0 = Top,45 = Top right,90 = Right,135 = Bottom right,180 = Bottom,225 = Bottom left,270 = Left,315 = Top left, ,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div> </body> </html> det giver følgende resultat −,, bølge effekt, bølge effekt bruges til at give den genstand, en sinusbølge forvridning, for at få det til at se bølgede.følgende parametre kan anvendes i dette filter − parameter beskrivelse tilføje en værdi på 1 tilføjer originalen til vinkede image, 0 ikke.nf antallet af bølger.lys på baggrund af den bølge (fra 0 til 100).fase i hvor høj grad sinusbølge bør starte (fra 0 til 100).styrke intensiteten af den bølge effekt.,Example, <html> <head> </head> <body> <p>,Image Example:,</p> <img src="/css/images/logo.png" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"> <p>,Text Example:,</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div> </body> </html> ,It will produce the following result −, ,X-Ray Effect,X-Ray effect grayscales and flattens farven dybde.følgende parametre anvendes i dette filter: parameter beskrivelse røntgen - grayscales og flader farven dybde.f.eks. < html > < head > < /head > < krop > < p > et eksempel:, < /p > < img src = "/css /images /logo. men heller ikke dér er menneskene sikre" alat = "css logo" stil = "filter: røntgen" > < p >, tekst, f.eks.:, < /p > < div stil = "bredde: 357. højde: 50; skriftstørrelsen: 30pt; skrifttype familie: ariel sort farve: rød; - =" filter: røntgen "> css tutorials < /div > < /organ > < /html > det giver følgende resultat &minus,,,



Previous:
Next Page: