CSS3-suodatustehosteiden käyttäminen graafisiin elementteihin

Suodatintehosteet ovat graafinen toimenpide, joka sovellettaessa elementtiin, kuten Scalable Vector Graphics (SVG) -tiedosto, muuttaa lopputulosta, jossa jokainen suodatustehoste määritetään siihen liittyvillä suodatinelementeillä. Olet todennäköisesti perehtynyt valokuvien muokkausohjelmiin ja niiden tarjoamiin suodatustehosteisiin, kuten hämärtymiseen, vääristämiseen, terävöittämiseen, venyttämiseen, tekstuuriin ja muihin. Jokaisella suodattimella on olennainen tarkoitus soveltaa efektiä grafiikkaelementtiin tai säilöelementtiin, jolloin jokainen suodatinelementti sisältää lapsinaan joukon suodatusalkeita. Jokainen suodatinprimatiivi edustaa jotakin kuvankäsittelyoperaation muotoa, tyypillisesti yhtä perustavanlaatuista vaikutusta - esimerkiksi epäterävyyttä - jolla voi olla poikkeamavaikutus yhteen tai useampaan tuloon, jolloin saadaan graafinen tulos. Nämä olivat alkuperäisiä suodatustehosteita, jotka käyttävät XML: ää jäsentämään ja esittämään valikoidut tulokset.

Sopeuttamalla SVG-suodattimien käyttöä ja ottamalla se askeleen pidemmälle, ryhmä kirjailijoita organisaatioiden kolmesta, mukaan lukien Adobe Systems, Apple Inc. ja Opera Software, toimittavat W3C Editorin työluonnoksessa W3C CSS- ja SVG-työryhmiä. 'Suodatintehosteet 1.0, joka on osa W3C: n verkkosivujen suunnittelun ja sovellusten standardien nykyistä työtä. Tässä kappaleessa tarkastelen ennalta määritettyjä CSS3-suodatustehosteita, esittelen esimerkkejä jokaisesta, mukaan lukien HTML- ja CSS-koodauspätkät, jokaiselle vaikutukselle. Tarkastelen myös CSS3-suodatustehosteiden selaimen tukea. Huomaa, että tämä ominaisuus eroaa huomattavasti Microsoftin vanhemmasta "suodatin" -ominaisuudesta ja ei sovellu siihen.

Eritelmän abstraktin mukaan CSS3-suodatustehosteet ovat ydin, jonka avulla web-kehittäjät voivat määritellä elementtien muotoilun ennen niiden esittämistä verkkosivudokumentissa. Normaalisti CSS: ssä tai SVG: ssä hahmoteltu elementti voidaan teoreettisesti kuvailla ikään kuin elementti ja sen lapset vedetään puskuriin ja sitten puskuri yhdistetään vanhempiin elementteihin; CSS-suodatustehosteet otetaan kuitenkin käyttöön ennen yhdistämisvaihetta. CSS-suodattimet kuvataan edelleen tavalla, joka sallii niiden muotoilla sisältöä, kuten HTML- ja SVG-elementtejä, mukaan lukien CSS-arvo. CSS3-suodatustehosteita voidaan käyttää DOM-elementteihin, kuten kuviin, tekstiin ja useisiin HTML5-elementteihin, kuten artikkeli, sivu, osa, kangas ja video.

Hämärtää

Sumennussuodattimen avulla voit asettaa vääristymän säteen ja sumun pikselillä. CSS-katkelma näkyy alla:

 / * CSS3-epäterävyyden suodatustehoste * / 
 .hämärtää { 
 -Webkit-suodatin: hämärtää (1px); 
 } 

Soitetaan HTML-koodinpätkästä:

 Kaksi kuvaa vierekkäin tapahtuvan kuvan vertailemiseksi esitetään alla olevassa kuvassa B Google Chromen versiosta 22.0.1229.94 m kaapattuina: 

Kuvio B

Pelaaminen pikseli-asetuksella 15px tuottaa seuraavan tuloksen oikealla puolella olevassa kuvassa:

Kuvio C

Voit käyttää myös epäterävyyssuodatinta kappaleissa

samoin, kuten alla esitetään seuraavilla CSS- ja HTML-koodinpätkillä ja lyhyillä kappalevertailuilla, kuten kuvassa D esitetään, kuten Google Chromen versiossa 22.0.1229.94 m esitetään:

 .hämärtää { 
 -Webkit-suodatin: hämärtää (1px); 
 } 

Normaali kappale

Kappale, jonka epäterävyys on 1 pikseli.

Kuvio D

Kirkkaus

Kirkkaussuodattimen avulla voit asettaa valaistuksen ja voimakkuuden prosenttimäärällä. Esimerkki esitetään alla seuraavilla CSS-koodinpätkillä ja vierekkäin kuvavertailuilla, kuten kuvissa E ja F esitetään, kuten Google Chromen versiossa 22.0.1229.94 m esitetään.

Asettamalla kirkkaus 20 prosenttiin:

 / * Kirkkaussuodatintehoste * / 
 .brightness { 
 -Webkit-suodatin: kirkkaus (20%); 
 } 

Kuvio E

Asettamalla kirkkaus miinus kaksikymmentä prosenttia tummentaa elementtiä alla esitetyllä tavalla:

 / * Kirkkaussuodatintehoste * / 
 .brightness { 
 -Webkit-suodatin: kirkkaus (-20%); 
 } 

Kuvio F

Kontrasti

Kontrastisuodattimen avulla voit asettaa kirkkauden ja / tai värin eron prosentuaalisesti. Esimerkki esitetään alla seuraavilla CSS-koodinpätkillä ja vierekkäin tapahtuvilla kuvien vertailuilla, kuten esitetään kuvissa G ja H, kuten Google Chromen versiossa 22.0.1229.94 m esitetään.

Kontrasti asetettu kuusikymmentä prosenttia:

/ * Kontrastisuodattimen vaikutus * /

 .kontrast { 
 -Webkit-suodatin: kontrasti (60%); 
 } 

Kuvio G

Kontrastiksi asetettu kolmekymmentä prosenttia:

 / * Kontrastisuodattimen vaikutus * / 
 .kontrast { 
 -Webkit-suodatin: kontrasti (30%); 
 } 

Kuvio H

Pudota varjo

Pisara-varjosuodatinvaikutus on pieni ero laatikon varjo-ominaisuusvaikutuksesta siinä mielessä, että varjosuodatinvaikutuksella on se etu, että se tunnustaa elementin ääriviivat ja läpinäkyvyyden. Pisara-varjosuodattimella on samanlainen syntaksi kuin laatikon varjo-ominaisuudella, paitsi että upotettuja varjoja ja hajotuspituuden arvoja ei tueta vielä.

CSS3-varjosuodatintehosteen syntaksi kirjoitetaan muodossa:

pudotusvarjo: Xpx Ypx Bpx #abc

Xpx = x-akselin vaakapoikkeama

Ypx = y-akselin pystysuuntainen siirtymä

Bpx = epäterävyys

#abc = väri

Seuraavat esimerkit havainnollistavat varjojen suodatustehosteita kiinteälle kuvalle, kuten aikaisemmin käytetty rannikkoesimerkki, samoin kuin png-kuva kukasta, jolla on läpinäkyvä tausta. Esimerkki esitetään alla seuraavilla CSS-koodinpätkillä ja vierekkäin tapahtuvilla kuvien vertailuilla, kuten kuvissa I ja J esitetään Google Chromen versiossa 22.0.1229.94 m.

Pudotusvarjo asetettu seuraavaan:

 / * Pudota varjosuodatintehoste * / 
 .dropshadow { 
 -Webkit-suodatin: pisaravarjo (5x5xx5xxgg (0, 0, 0, 0, 5)); 
 } 

Rannikkokuva vertaamalla toisiaan:

Kuvio I

Kukka läpinäkyvällä taustalla tallennettiin png-kuvana vertaamalla vierekkäin:

Kuvio J

Huomaa, että varjo noudattaa kukkakuvan läpinäkyvyyttä.

Tämän sarjan toinen viesti CSS3-suodatintehosteista tarkastelee harmaasävyjä, värisävytään kääntymistä, opasiteettiä, kylläisyyttä, seepiaa ja yhdistettyjä efektejä, joihin sisältyy elementtien mustan ja valkoisen renderoinnin esittely. Tarkastelen myös CSS3-suodatustehosteiden nykyistä selainohjelmaa ja lataan esittelyihin käytetyt HTML- ja CSS-tiedostot.

Voitteko ajatella muita web-pohjaisia ​​toteutuksia kuin tänään esittämäni näyteelementtejä, jotka voisivat hyödyntää CSS3-suodatinelementtejä asianmukaisesti?

© Copyright 2020 | mobilegn.com