Bruke CSS3-filtereffekter på grafiske elementer

Filtereffekter er en grafisk handling som når den brukes på et element, for eksempel en skalerbar vektorgrafikk (SVG) -fil, vil endre sluttresultatet der hver filtereffekt er definert av tilhørende filterelementer. Du er sannsynligvis mer kjent med programvare for fotoredigering og de forskjellige filtereffektene de gir, for eksempel uskarphet, forvrengning, skjerping, strekk, tekstur og andre. Hvert filter har et vesentlig formål å påføre effekten på et grafikkelement eller beholderelement, der hvert filterelement inneholder et sett med filterprimitiver som sine barn. Hver filter primitiv representerer en form for bildebehandlingsoperasjon, typisk en enkel grunnleggende effekt - for eksempel uskarphet - som kan ha en avvikseffekt på en eller flere innganger, og gi et grafisk resultat. Dette var de originale filtereffektene som bruker XML for å analysere og gi de assorterte resultatene.

Ved å tilpasse bruken av SVG-filtre og ta det et skritt videre, leverer en gruppe forfattere fra en trio av organisasjoner inkludert Adobe Systems, Apple Inc. og Opera Software på W3C Editors Working Draft-utgave av W3C CSS og SVG Working Groups 'Filter Effects 1.0, som er en del av det nåværende arbeidet med W3C-standarder for webdesign og applikasjoner. I dette stykke vil jeg gå gjennom de forhåndsdefinerte CSS3-filtereffektene, vise eksempler på hver av dem, inkludert HTML og CSS-kodebiter, for hver av effektene. Jeg vil også se gjennom nettleserstøtten for CSS3-filtereffekter. Merk at denne egenskapen er vesentlig forskjellig fra og uforenlig med Microsofts eldre "filter" -egenskap.

I følge spesifikasjonsabstraktet, er kjernen i CSS3-filtereffektene en måte for webutviklere å spesifisere styling for elementer før de blir gjengitt i websidedokumentet. Normalt kan et element gjengitt i CSS eller SVG teoretisk beskrives som om elementet og dets barn blir trukket inn i en buffer og deretter blir bufferen sammensatt i overordnede elementer; CSS-filtereffektene blir imidlertid brukt før komposittstadiet. CSS-filtre er nærmere beskrevet på en måte som gjør at de kan style innhold som HTML og SVG-elementer inkludert en CSS-verdi. CSS3-filtereffektene kan brukes på DOM-elementer som bilder, tekst og flere HTML5-elementer som artikkel, til side, seksjon, lerret og video.

Uklarhet

Uklarhetsfilteret lar deg stille radius for forvrengning og fuzziness etter piksel. CSS-kodebiten vises nedenfor:

 / * CSS3 uskarphet filtereffekt * / 
 .uklarhet { 
 -webkit-filter: uskarphet (1px); 
 } 

Kalt fra HTML-kodebiten:

 De to bildene for sammenligning av bilder ved siden av siden vises i figur B nedenfor som er tatt fra Google Chrome versjon 22.0.1229.94 m: 

Figur B

Å leke med pikselinnstillingen på 15px gir følgende resultat på høyre side:

Figur C

Du kan også bruke uskarphetsfilteret på avsnitt

som vist nedenfor med følgende CSS- og HTML-kodebiter og de korte paragraf-sammenligningene som vist i figur D som vist i Google Chrome versjon 22.0.1229.94 m:

 .uklarhet { 
 -webkit-filter: uskarphet (1px); 
 } 

Et normalt avsnitt

Et avsnitt med uskarphet-effekt satt til 1px.

Figur D

lysstyrke

Lysstyrkefilteret lar deg stille inn belysning og intensitet i prosent. Eksemplet er demonstrert nedenfor med følgende CSS-kodebiter og sammenligninger av bilder ved siden av siden som vist i figur E og F som vist i Google Chrome versjon 22.0.1229.94 m.

Angi lysstyrken til tjue prosent:

 / * Effekt av lysstyrkefilter * / 
 .brightness { 
 -webkit-filter: lysstyrke (20%); 
 } 

Figur E

Hvis du setter lysstyrken til minus tjue prosent, blir elementet mørkere som vist nedenfor:

 / * Effekt av lysstyrkefilter * / 
 .brightness { 
 -webkit-filter: lysstyrke (-20%); 
 } 

Figur F

Kontrast

Kontrastfilteret lar deg stille forskjellen i lysstyrke og / eller farge i prosent. Eksemplet er demonstrert nedenfor med følgende CSS-kodebiter og sammenligninger av bilder ved siden av siden som vist i figur G og H som vist i Google Chrome versjon 22.0.1229.94 m.

Kontrast satt til seksti prosent:

/ * Kontrastfiltereffekt * /

 .kontrast { 
 -webkit-filter: kontrast (60%); 
 } 

Figur G

Kontrast satt til tretti prosent:

 / * Kontrastfiltereffekt * / 
 .kontrast { 
 -webkit-filter: kontrast (30%); 
 } 

Figur H

Dråpe skygge

Dråpe-skygge-filtereffekten er en liten avgang fra boksens skyggeegenskapseffekt ved at dråpsskyggefiltereffekten har fordelen av å erkjenne omrissets og gjennomsiktigheten til et element. Dråpeskyggefilteret har en lignende syntaks som boksens skyggeegenskap, med unntak av at innfelte drop-skygger og spredningslengdeverdiene ikke støttes ennå.

Syntaks for CSS3 drop effect filter er skrevet i formen:

drop-skygge: Xpx Ypx Bpx #abc

Xpx = x-akset horisontal forskyvning

Ypx = y-aksen vertikal forskyvning

Bpx = uskarphet effekt

#abc = farge

Følgende eksempler demonstrerer dråpsskyggefiltereffektene for solid bilde, slik som kysteksemplet tidligere brukt, samt et png-bilde av en blomst med transparent bakgrunn. Eksemplet er demonstrert nedenfor med følgende CSS-kodebit og sammenligninger av bilder ved siden av siden som vist i figur I og J som vist i Google Chrome versjon 22.0.1229.94 m.

Slipp skygge satt til følgende:

 / * Drop Shadow Filter Effect * / 
 .dropshadow { 
 -webkit-filter: drop-skygge (5 px 5 px 5 px rgba (0, 0, 0, 0, 5)); 
 } 

Kystbildet med sammenligning side om side:

Figur I

Blomsten med en gjennomsiktig bakgrunn lagret som et png-bilde med sammenligningen side om side:

Figur J

Legg merke til fallskyggen følger gjennomsiktigheten til blomsterbildet.

Det andre innlegget i denne serien om CSS3-filtereffekter vil gjennomgå gråtoner, fargetone, invert, opacitet, metning, sepia og kombinerte effekter, som inkluderer en demonstrasjon av svart og hvitt gjengivelse av elementer. Jeg vil også gå gjennom den nåværende nettleserstøtten for CSS3-filtereffekter, samt gi en nedlasting av HTML- og CSS-filene som ble brukt til demonstrasjonene.

Kan du tenke på andre nettbaserte implementeringer enn prøveelementene som jeg har presentert i dag, som kan bruke CSS3-filterelementene på passende måte?

© Copyright 2020 | mobilegn.com