Võib osutuda vajalikuks muuta pilt halliks võimalikult kiiresti ja ilma graafilisi redaktoreid kasutamata. Loomulikult võite kasutada Adobe Photoshopi graafilist redaktorit (saate isegi määrata sügavuse ja tooni). Loomulikult ei saa te selliseid parameetreid brauseris konfigureerida, kuid meie silmad (kui te pole muidugi professionaal) ei märka erinevust.
Käesolevas artiklis vaatleme võimalusi pildi halliks muutmiseks.
1. CSS-filter
Vara kasutamine filter on ehk lihtsaim viis mustvalge pildi loomiseks. IE-s mustvalge pildi loomiseks tuleb kasutada ka omadust filter.
Täna vara filter on osa CSS3 tehnoloogiast, mida toetavad sellised brauserid nagu Firefox, Chrome ja Safari. Webkiti filtrid ei saa luua mitte ainult mustvalget efekti, vaid ka seepia- ja hägususe efekte.
Pildi halliks muutmiseks peate määrama järgmised omadused:
See kood töötab operatsioonisüsteemides IE6-9, Chrome18+, Safari 6.0+ ja Opera15+.
2. Javascript
Ülaltoodud koodi alternatiiviks on Javascript, mis töötab kõigis brauserites, kui see on lubatud, sealhulgas IE6 ja vanemad.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var imgObj = document.getElementById("js-image" ) ;< imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ; |
funktsioon gray(imgObj) ( var canvas = document.createElement ("lõuend") ; var canvasContext = canvas.getContext ( "2d") ; var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage (imgObj, 0, 0) var imgPixels = canvasContext.getImageData (0, 0, imgW, imgH);
Javascripti kasutades saame anda pildile mustvalge efekti, näiteks pildil hõljutades ja klõpsates. Saate jQueryt koos kasutada, et luua sujuvalt halliks tuhmumise efekt. Ainus negatiivne külg on see, et Javascript võib brauseris keelatud olla.
3.SVG
Teine võimalus on kasutada SVG-filtreid.
Kõik, mida pead tegema, on luua SVG-fail ja kasutada allolevat koodi:
| 1 2 3 4 | Saate kogu koodi kirjutada ka otse CSS-i: img ( filter : url ( |
#halltoonid");"
Tulemus saab olema sarnane.
Selle efekti toetamiseks kõigis brauserites on vaja ühendada kõik meetodid. See kood töötab operatsioonisüsteemides Firefox 3.5+, Opera15+, Safari, Chrome ja IE.
| 1 2 3 4 5 6 7 8 | img ( -webkit-filter: grayscale(100%) ; -webkit-filter: grayscale(1) ; filter : grayscale(100% ) ; filter : url ("../img/gray.svg#grayscale" ) : hall ; |
Seda koodi saab kasutada koos Javascriptiga ja kui Javascript on keelatud, siis see kood töötab. Modernizr võib selles aidata.
Modernizr lisab js class for body, kui Javascript on brauseris lubatud, ja registreerib klassi no-js kui Javascript on keelatud. Ja kõik, mis tuleb CSS-is kirjutada, on järgmine:
| 1 2 3 4 5 6 7 8 | .no-js img ( -webkit-filter: grayscale(100%) ; -webkit-filter: grayscale(1) ; filter: grayscale(100%) ; filter: url (../img/gray.svg#grayscale " filter : hall ; |
CSS3 filtrid on SVG väga huvitav järg, mis võimaldab muuta HTML-i elemente ja pilte, rakendades hägusust, heledust ja paljusid muid filtreid. Selles õpetuses vaatame lühidalt, kuidas need täpselt töötavad.
Kuidas see toimib?
Ainult CSS-i kasutades saame luua üsna keerukaid efekte. Neid saab rakendada nii piltidele kui ka HTML-elementidele. Kõikide nende mõjude kontrollimiseks kasutatav omadus on filter.
filter: filter(väärtus) ;
Nagu arvata võis, nõuab see atribuut brauseri prefiksi kasutamist. Aga praegu ainult -veebikomplekt-(Chrome ja Safari) on ainsad seda atribuuti toetavad brauserimootorid.
Webkit-filter: filter(väärtus) ;
-moz-filter: filter(väärtus) ;
-o-filter: filter(väärtus) ;
-ms-filter: filter(väärtus) ;
Filtreerimine
Filtreid on mitmeid, nii et igaühe paremaks mõistmiseks vaatleme neid eraldi. Ühele elemendile saab rakendada mitu filtrit (eraldatuna tühikuga), näiteks heledus Ja hägusus:
filter: blur(5px) heledus(0,5) ;
On mõningaid filtreid, mida allpool ei käsitleta, kuid neid saab hõlpsasti rakendada olemasoleva CSS-iga (läbipaistvus ja varjud). Siin on algne pilt, mida kasutame filtrite töö demonstreerimiseks.
Näitan rakendatud filtriga fotot (esimene foto) ja filtri tulemust staatilise pildi kujul (teine foto), kui kasutate brauserit, mis ei toeta filtreid ja tulemust ei näe.
Hägusus
Kas olete kunagi tahtnud CSS-i kasutades pildile või tekstile Gaussi hägusust teha? Filtrite abil saate seda teha! Hägusust mõõdetakse pikslites, nii et saate teha midagi sellist:
filter: blur(5px) ;
// Brauserispetsiifiline
-veebikomplekti filter: hägu (5px) ;
-moz-filter: blur(5px) ;
-o-filter: blur(5px) ;
-ms-filter: blur(5px) ;
Heledus
Heledust mõõdetakse nullist üheni, 1 on täisheledus (valge) ja 0 algne heledus.
filter: heledus(0,2 ) ;
// Brauserispetsiifiline
-veebikomplekti filter: heledus(0,2);
-moz-filter: heledus(0,2 ) ;
-o-filter: heledus(0,2 ) ;
-ms-filter: heledus(0,2 ) ;
Küllastus
Küllastus mõõdetakse protsentides.
filter: küllastunud (50%) ;
// Brauserispetsiifiline
-veebikomplekti filter: küllastunud (50%) ;
-moz-filter: küllastunud (50%) ;
-o-filter: küllastunud (50%) ;
-ms-filter: küllastunud (50%) ;
Tooni pööramine
See filter võimaldab teil muuta tooni seda pöörates (mõelge värvirattale, mida seejärel pöörate). Seda mõõdetakse kraadides.
filter: toon-pööra (20 kraadi);
// Brauserispetsiifiline
-veebikomplekti filter: toon-pööra (20 kraadi);
-moz-filter: toon-pööra (20 kraadi) ;
-o-filter: toon-pööra (20 kraadi);
-ms-filter: toon-pööra (20 kraadi);
Kontrast
Kontrastsust mõõdetakse jällegi protsentides. Vaikimisi on 100%, 0% loob täiesti musta pildi. Kõik, mis on üle 100%, lisab kontrasti!
filter: kontrast(150%) ;
// Brauserispetsiifiline
-veebikomplekti filter: kontrast (150%) ;
-moz-filter: kontrast(150%) ;
-o-filter: kontrast(150%) ;
-ms-filter: kontrast(150%) ;
Inversioon
Mõõdetud ka protsentides. Saadaolevad väärtused on vahemikus 0% kuni 100%. Kummalisel kombel ei toeta webkit hetkel inversioone, kui need on alla 100%.
filter: invert (100%) ;
// Brauserispetsiifiline
-veebikomplekti filter: invert (100%) ;
-moz-filter: invert (100% ) ;
-o-filter: invert (100% ) ;
-ms-filter: invert (100% ) ;
Pleegitamine
Jällegi sisestage protsent, mille võrra soovite pilti vähendada. Saadaolevad väärtused on vahemikus 0% kuni 100%.
filter: halltoonid (100%) ;
// Brauserispetsiifiline
-veebikomplekti filter: halltoonid (100%);
-moz-filter: halltoonid (100%) ;
-o-filter: halltoonid (100%) ;
-ms-filter: halltoonid (100%) ;
Seepia
Ma arvan, et see on väga kasulik, kui soovite midagi Instagrami postitada. Kuigi ma eeldan ka, et te ei kasuta selleks CSS-i. Igal juhul lisavad need hallid ja negatiivsed toonid pildile seepiat. 100% on täielik seepia, 0% on originaalpilt.
filter: seepia (100%) ;
// Brauserispetsiifiline
-veebikomplekti filter: seepia (100%);
-moz-filter: seepia(100%) ;
-o-filter: seepia (100%);
-ms-filter: seepia (100%) ;
Brauseri tugi
| Veebikomplekt | Mozilla | Kolmhark | Presto | |
| Hägusus | Eksperimentaalne | Ei | Ei | Ei |
| Heledus | ||||
| Küllastus | ||||
| Pöörake toone | ||||
| Kontrast | ||||
| Inversioon | Ainult täielik inversioon |
|||
| Pleegitamine | Eksperimentaalne | |||
| Seepia |
Kui teil on küsimusi, soovitame kasutada meie
CSS3 filtrid reprodutseerida brauseris Photoshopi filtritele sarnaseid visuaalseid efekte. Filtreid saab lisada mitte ainult piltidele, vaid ka kõikidele mittetühjadele elementidele.
Filtrite komplekt ei ole piiratud brauseris eelinstallitud filtritega. Samuti saate kasutada SVG-filtreid, laadides need lingilt alla koos elemendiga svg.
Filtrid loodi algselt SVG spetsifikatsiooni osana. Nende ülesanne oli rakendada vektorgraafikas pikslivõrgupõhiseid efekte. Kuna brauser toetab SVG-d, on nüüd võimalik neid efekte otse brauserites kasutada.
Brauserid töötlevad lehte pikslite kaupa, rakendades määratud efekte ja joonistades tulemuse originaali peale. Seega saate mitut filtrit kasutades saavutada erinevaid efekte. Mida rohkem filtreid, seda kauem võtab brauser lehe renderdamiseks aega.
Saate korraga rakendada mitut filtrit. Klassikaline viis selliste efektide rakendamiseks on elemendi kohal hõljutamine: hõljutage .
Brauseri tugi
IE: ei toeta
Edge: 13.0, välja arvatud url()
Firefox: 35.0
Chrome: 18.0 -veebikomplekt-
Safari: 9.1, 6.0 -veebikomplekt-
Ooper: 40.0, 15.0 -veebikomplekt-
iOS Safari: 9.3, 6.1 -veebikomplekt-
Androidi brauser: 53.0, 4.4 -veebikomplekt-
Chrome Androidile: 55.0, 47.0 -veebikomplekt-
| filter | |
|---|---|
| hägu () | Väärtus määratakse pikkuseühikutes, näiteks px, em. Rakendab algkujutisele Gaussi hägusust. Mida suurem on raadiuse väärtus, seda suurem on hägusus. Kui raadiuse väärtust pole määratud, on vaikeväärtus 0. |
| heledus () | Väärtus määratakse % või kümnendmurdudes. Muudab pildi heledust. Mida suurem väärtus, seda heledam on pilt. Vaikeväärtus on 1. |
| kontrast() | Väärtus määratakse % või kümnendmurdudes. Reguleerib pildi kontrasti, s.t. erinevus pildi/tausta tumedaimate ja heledamate alade vahel. Vaikeväärtus on 100%. Nulli väärtus peidab algse pildi tumehalli tausta alla. Väärtused, mis suurenevad 0-lt 100%-le või 0-le 1-le, avavad algse pildi järk-järgult algsele kuvale ning ülaltoodud väärtused suurendavad eredate ja varjude vahelist kontrasti. |
| vari () | Filter toimib sarnaselt kasti varju ja teksti varju omadustega. Kasutab järgmisi väärtusi: X nihe Y nihe hägususe venitusvarju värv. Filtri eripäraks on see, et elementidele ja selle sisule lisatakse vari nende läbipaistvust, s.o. kui element sisaldab teksti sees, lisab filter varju nii tekstile kui ka ploki nähtavatele ääristele. Erinevalt teistest filtritest on selle filtri jaoks vaja määrata parameetrid (minimaalne on nihke väärtus). |
| halltoonid () | Eraldab pildilt kõik värvid, muutes väljundist mustvalge pildi. Väärtus määratakse % või kümnendmurdudes. Mida suurem väärtus, seda tugevam on efekt. |
| toon-pööra () | Muudab pildi värve sõltuvalt värvirattas määratud pöördenurgast. Väärtus on määratud kraadides vahemikus 0 kuni 360 kraadi. 0deg on vaikeväärtus, mis tähendab, et efekti pole. |
| invert() | Filter muudab pildi negatiivseks. Väärtus on määratud %. 0% ei rakenda filtrit, 100% teisendab värvid täielikult. |
| läbipaistmatus () | Filter töötab sarnaselt läbipaistmatuse omadusega, lisades elemendile läbipaistvust. Eripäraks on see, et brauserid pakuvad filtrile riistvaralist kiirendust, mis parandab jõudlust. Lisaboonuseks on see, et filtrit saab kombineerida samaaegselt teiste filtritega, luues huvitavaid efekte. Väärtuseks on seatud ainult %, 0% muudab elemendi täiesti läbipaistvaks ja 100% ei mõjuta. |
| küllastunud () | Reguleerib värviküllastust, töötades kontrastfiltri põhimõttel. Väärtus 0% eemaldab värvi, samas kui 100% ei mõjuta. Väärtused 0% kuni 100% vähendavad värviküllastust, väärtused üle 100% suurendavad värviküllastust. Väärtuse saab määrata kas % või täisarvuna, 1 võrdub 100% . |
| seepia () | Efekt, mis jäljendab antiiki ja “retrot”. Väärtus 0% ei muuda elemendi välimust ja 100% taasesitab täielikult seepiaefekti. |
| url() | Funktsioon aktsepteerib svg-filtriga välise XML-faili asukohta või praeguses dokumendis asuva filtri ankrut. |
| mitte ühtegi | Vaikeväärtus. Näitab mõju puudumist. |
| esialgne | Määrab selle atribuudi vaikeväärtuse. |
| pärida | Pärib atribuudi väärtuse emaelemendilt. |
CSS-i atribuudid on jõudnud sellisele arengutasemele, et suudavad toime tulla graafiliste redaktorite mõne olulise funktsiooniga. Selle näiteks on CSS-filtrid, millega saab piltidele ilusaid efekte luua.
Kui varem oli seda raske isegi ette kujutada, siis nüüd on kaskaaditabelis rakendatud peaaegu kõik tarkvarafiltrid, alates hägususest kuni kunstiliste värvimudeliteni.
Kuid CSS-filtritel on siiski üks väike puudus – mitte kõik veebibrauserid ei toeta visuaalseid efekte. Muidugi on see ainult aja küsimus. Ja kui saabub tund “x”, peavad arendajad olema valmis. Praegu vaatame, mida on juba rakendatud.
Brauseri tugi CSS-filtritele
Põhimõtteliselt on kõigil populaarsetel brauseritel, Firefox, Chrome, Opera, filtriefektidega "sõbralik" suhe. Sama ei saa öelda IE kohta, mis keeldub täielikult efekte toetamast isegi uusimates versioonides.
| Brauser | Explorer | Chrome | Firefox | Safari | Ooper | Android | iOS |
|---|---|---|---|---|---|---|---|
| Versioon | ei | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| filter | — | (-veebikomplekt-) | + | (-veebikomplekt-) | (-veebikomplekt-) | (-veebikomplekt-) | (-veebikomplekt-) |
CSS-filtrite funktsioonid ja süntaks
Kõigil CSS-i atribuutidel on teatud parameetrid, mis ühendavad väärtuste kirjutamise järjekorra. Filtri atribuut pole erand, nagu teisedki, võib see kasutada ühes rakenduses mitme reegli kombinatsiooni. Näiteks lisage pildile heleduse filter ja pärast tühikut määrake teine - kontrast. Parema mõistmise huvides käsitleme kõike selles artiklis mõne näitega.
Süntaks
Filter: filtri nimi (väärtuse protsent); filter: url(img.svg); filter: hägu (10px); filter: heledus(0,9); filter: kontrast (150%); filter: drop-shadow (5px 5px 10px must); filter: halltoonid (80%); filter: toon-pööra (60 kraadi); filter: invert(80%); filter: läbipaistmatus (50%); filter: küllastunud (50%); filter: seepia (40%); /* Rakenda mitu filtrit */ filter: kontrast (150%) halltoonid (80%);
Filtrite loend
| Filter | Kirjeldus |
|---|---|
| hägu (px) | Filter pildi häguseks muutmiseks. Hägususe aste on näidatud pikslites. Kui numbrit pole määratud, on vaikeväärtus 0. |
| vari () | Vari. Sarnaste parameetrite ja sama kirjutamisjärjekorraga atribuudi box-shadow alternatiiv. Erandiks on neljas väärtus "venitada": peaaegu kõik brauserid ei toeta seda. |
| hall skaala (%) | Filter "Värvitustamine". Rakendab pildile halli varjundeid teie määratud protsendi alusel. Negatiivne väärtus ei ole lubatud ja pildi originaalsus on 0. |
| heledus (%) | Reguleerige pildi heledust. Väärtus 100% näitab heleduse alguspunkti. Korrigeerimine toimub nii negatiivselt (-50%) kui positiivselt (150%). |
| kontrast (%) | Reguleerige pildi kontrasti. Nagu eelmise filtri puhul, näitab väärtus 100% päritolu. Muudatused saab määrata negatiivseks (-20%) või positiivseks (120%). |
| toon-pööra (kraadi) | Rotary värvitoonide ülekate. Sõltuvalt määratud kraadist (0° kuni 360°) kohandatakse kujutist värviliseks, mille määrab värviratas. |
| pööra (%) | Pildi ümberpööramine. Väärtust vahemikus 0 kuni 100% rakendatakse ilma negatiivse parameetrita. |
| küllastunud (%) | Pildi küllastus. Algpositsioon määratakse 100% ja sellel pole negatiivset väärtust. |
| seepia (%) | Seepia efekt. Pildi originaalsus määratakse 0% juures ja on saadaval kuni 100% ilma eitusteta. |
| läbipaistmatus (%) | Pildi läbipaistvus. Teine filter, millel on samade kasutusmeetoditega sarnane läbipaistmatuse omadus. Seade on lubatud vahemikus 0 kuni 100% ilma negatiivse parameetrita. |
| url() | Konkreetse #id-ga CSS-i link SVG-elemendile. |
| esialgne | Määrab atribuudi vaikeväärtuse. |
| pärida | Pärib oma emaelemendi kõik atribuutide väärtused. |
CSS-filtrite näited
Oleme jõudnud artikli huvitava osani, milles käsitleme iga filtrit eraldi koos selle rakenduse näidetega. Selguse huvides kasutatakse kolme pilti. Esimene näitab lähtepunkti, originaalsuse välimust. Teine toimib filtri rakendamise staatilise näitena ja kolmas näitab hõljumise efekti, hõljutades hiirekursorit pildi kohal.
Hägufilter
Graafilistes redaktorites on hägususfilter asendamatu tööriist ja seda kasutatakse sageli töös. See võib hõlpsasti luua uduse pildi, kuid võib luua efekti, et fokusseeritakse konkreetsele elemendile, samal ajal kui ülejäänud kujutis jääb hägususe alla. Ja palju muud.
Veebikujunduses (näiteks hägusust) saab kasutada voodrina, et pildil paiknev tekst paremini loetaks. Tegelikult on hägusus Gaussi järgi väärtusest 0 px, kuni see täielikult kaob.
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efbl1 img(filter: blur(2px); -webkit-filter: blur(2px); ) /*hõljumise efekti jaoks*/ .efbl2 img(üleminek: kõik 0,6 sekundit lihtsustavad 0s; ). :hover img( filter: blur(4px); -webkit-filter: blur(4px); üleminek: kõik 0,6s lihtsus 0s; )
Filtri vari
Variomadus jõudis meile kaskaadtabeli kolmanda versiooniga. Loomulikult on see tuttav kõigile, kes tegelevad veebilehe arendamisega, kuna kastivarjul on disainis oluline roll. Varjufiltrit võib nimetada sarnaste parameetritega halvemaks alternatiiviks ja neid on ainult 5, sisemist varju arvestamata.
Kirjutamise järjekord on järgmine: 5px/-5px (horisontaalne nihe), 5px/-5px (vertikaalne nihe), 15px (varju hägususe raadius), 5px/-5px (varju venitus), must (värviline). Filter toetab kogu süntaksit, välja arvatud venitus- ja sisestusväärtused, samuti mitme komadega eraldatud varju lisamist. Kuid vaatamata sellele on mõned eelised, näiteks võtab filter arvesse pseudoelemente, mis võimaldab kuvada elemendi varju täpset kuju.
Huvitav on ka see, et kui plokil pole tausta, vaid on määratud ainult piirijoon, siis kastivarju kasutamisel kuvatakse vari, võttes arvesse väidetavalt tausta, st tahket. Kusjuures tilkvarju kasutamise korral võtab vari tõmbe kujul ilma tausta arvesse võtmata.
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efdrswd1 img( filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0) , 0,4)) /*hõljumise efekti jaoks*/ .efdrswd2 img( üleminek: kõik 0,6 s lihtsus 0s; ) .efdrswd2:hover img( filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0,4)); -webkit-filter: drop-shadow (6px 7px 3px rgba(0, 0, 0, 0,4));
Värvusetustamise filter
Klassikaline pildistamisstiil igaks ajaks õiges suunas. Filter lubab ainult ühte väärtust – positiivset. Sõltuvalt määratud protsendist asendavad hallid toonid sujuvalt pildi värvi. Samuti võite protsentide asemel kasutada murde kuni täisarvuni (0,01/1).
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efgrays1 img (filter: halltoonid (90%); -veebikomplekti filter: halltoonid (90%); ) /*hõljumise efekti jaoks*/ .efgrays2 img( üleminek: kõik 0,6 sekundit lihtsustavad 0-sid; ) .efgrays2:hover img (filter: halltoonid (90%); -veebikomplekti filter: halltoonid (90%); üleminek: kõik 0,6 sekundit lihtsustavad 0s; )
Heleduse filter
Valguse lisamine pildi "uurimata" mustadesse nurkadesse. Seda kasutatakse sageli fotode töötlemisel, kuna amatöörfotod tehakse tavaliselt halvasti valgustatud kohtades. Filtri heledust saab reguleerida vahemikus 0% (täiesti must pilt) kuni pildi peaaegu täieliku kadumiseni. Algne punkt on defineeritud kui 100% ja väärtuse saab määrata ka murdosana.
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efbrig1 img( filter: heledus(150%); -webkit-filter: heledus(150%); ) /*hõljumise efekti jaoks*/ .efbrig2 img( üleminek: kõik 0,6 sekundit kergendavad 0s; ) .efbrig2:hover img (filter: heledus (150%); -webkit-filter: heledus (150%); üleminek: kõik 0,6 sekundit kergendavad 0s; )
Kontrastsuse filter
Lihtne viis pildi ekspressiivsemaks muutmiseks on katsetada pildi heledamate ja tumedamate osade heleduse seadistusi. Kontrastfilter on valmis selles aitama. Selle parameetrid, nagu paljud teised, välistavad negatiivse väärtuse (-150%) ja algpositsioon on näidatud 100%. Lisaks protsentidele on lubatud ka murrud (1,5).
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efcontr1 img( filter: kontrast(150%); -webkit-filter: kontrast(150%); ) /*hõljumise efekti jaoks*/ .efcontr2 img( üleminek: kõik 0,6 sekundit kergendavad 0s; ) .efcontr2:hover img(filter: kontrast (150%); -webkit-filter: kontrast (150%); üleminek: kõik 0,6 s lihtsus 0s; )
Värvitoonide filter
Suurepärane kujundustehnika pildikujunduses, mis sobib põhiressursi disaini stiiliga. Idee on katta valitud värvi toon originaalpildile. Suhtarvud tulevad välja olenevalt etteantud kraadist, mis näitab värviringi värvipunkti.
Kui väärtus on positiivne (150°), toimub pöörlemine päripäeva. Seega, kui negatiivne, siis vastupäeva. Kahes asendis algab see 0 kraadist 360 kraadini.
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efhrotai1 img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*hõljumise efekti jaoks*/ .efhrotai2 img( üleminek: kõik 0,6 sekundit kergendavad 0s ; ).
Inversioonifilter
Spetsiifiline efekt, mis võimaldab pildi värvi tagurpidi pöörata. Graafilistes toimetajates on sellel teatud roll ja juhtub, et ilma selle osaluseta ei ole soovitud tulemust võimalik saavutada. Pöördfiltri parameeter määratakse ainult positiivses suunas väärtusest 0% kuni 100%.
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*hõljumise efekti jaoks*/ .efinve2 img( üleminek: kõik 0,6 sekundit lihtsustavad 0-sid; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); üleminek: kõik 0,6 s lihtsus 0s; )
Küllastusfilter
Kui pilt kaotab teadmata põhjustel oma loomuliku värvi (miski nagu päikese käes pleegitatud T-särk), võib küllastuse suurendamine koheselt taastada selle esialgse välimuse. Ja kui seda filtrit kasutada koos teiste filtritega, on tulemus väga rahuldav. Seadistamine toimub 0 algvaatest suurtele numbritele.
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efsatut1 img( filter: küllastus (165%); -webkit-filter: küllastus (165%); ) /*hõljumise efekti jaoks*/ .efsatut2 img( üleminek: kõik 0,6 sekundit kergendavad 0s; ) .efsatut2:hover img (filter: küllastunud (165%); -veebikomplekti filter: küllastunud (165%); üleminek: kõik 0,6 sekundit kergendavad 0s; )
Seepia filter
Vanade fotode efekti jäljendamine (kergelt pruun toon). See saavutab retro stiilis pildi, mis on eriti populaarne. Seepiafiltrit saab reguleerida vahemikus 0% (lähteasend) kuni 100%.
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efsepiaa1 img( filter: seepia(100%); -webkit-filter: seepia(100%); ) /*hõljumise efekti jaoks*/ .efsepiaa2 img( üleminek: kõik 0,6 s lihtsus 0s; ) .efsepiaa2:hover img (filter: seepia (100%); -veebikomplekti filter: seepia (100%); üleminek: kõik 0,6 s lihtsus 0s; )
Filtri läbipaistvus
Filter, mis sarnaneb kaskaadtabeli versiooni 3 läbipaistmatuse atribuudiga. Süntaks on sama, kuid läbipaistvuse väärtus on reguleeritav vahemikus 0% kuni 100% (algne asukoht).
Originaal
Filter
Hõljuja efekt
/*staatiline reegel*/ .efopaty1 img( filter: läbipaistmatus(50%); -webkit-filter: läbipaistmatus(50%); ) /*hõljumise efekti jaoks*/ .efopaty2 img( üleminek: kõik 0,6 sekundit kergendavad 0s; ) .efopaty2:hover img (filter: läbipaistmatus (50%); -webkit-filter: läbipaistmatus (50%); üleminek: kõik 0,6 sekundit lihtsustavad 0s; )
Filtreeri link
Konkreetse identifikaatoriga SVG elementide põhjal luuakse kohandatud filter, mida saab seejärel lingifiltri kaudu CSS-is kasutada. Efektid võivad tavafiltritest väga erineda, alates kattemaskidest kuni banaalse läbipaistvuseni.
CSS filtrite generaator
Pikka aega on olnud tavaks luua erinevate CSS-i omaduste generaatoreid. , ja palju-palju muud. Need toimivad töö hõlbustamise vahendina. Ja algajatele veebimeistritele võivad need olla kahekordsed. Neid on väga lihtne kasutada: liigutage liugureid ja näete kohe tulemusi. Ja kui see on lõpetatud, jääb üle vaid loodud kood kopeerida. Sama kehtib ka CSS-filtrite generaatorite kohta. Siin on teile viitamiseks kaks neist:
Järeldus
Ülevaade osutus üsna mahukaks, kuid loodan, et sellest on praktikas kellelegi kasu. Samuti ärge unustage filtreid kombineerida, üks on hea, kuid teatud juhtudel on kaks paremad.
Tere. Täna ei üllata te kedagi ilusate efektidega veebisaitidel. Mõned on seda Flashis teinud viimased 10 aastat, teised pole veel Javascriptis seda tegemast lõpetanud, kuid kõige arenenumad on CSS3 kasutanud juba pikka aega. Seda me täna teeme.
Õpime CSS-pildi (hallitoonis kujutise css) värvi muutma ja teeme seda kaunilt
Niisiis, alustame millegi lihtsaga, vajame ilusaid fotosid, võtame selle:
Peame selle desatureerima (CSS-pildi desaturatsioon - eemaldage värvid, muutke pilt mustvalgeks). Selleks (ja üldiselt graafikaga töötamiseks) on CSS3-l spetsiaalne filtritööriist.
Seda me kasutamegi.
Lahendus: muutke pildi CSS-i värvi
Esmalt paneme paika pildi ise:
Seejärel lisame pildile stiili:
Img ( -webkit-filter: halltoonid (100%); -moz-filter: halltoonid (100%); -ms-filter: halltoonid (100%); -o-filter: halltoonid (100%); filter: halltoonid ( 100% filter: hall /* IE 6-9 */ )
Nüüd muutub meie pilt must-valgeks.
Sellega võib muidugi ka peatuda, aga palju huvitavam on, kui pilt reageerib ka kasutaja tegevusele.
Teen ettepaneku teha see nii, et kui liigutate kursorit pildi kohal, muutub see järk-järgult värviliseks.
Tegelikult pole seda üldse raske teha ja te ei pea üldse Javascripti teadma.
CSS-i värvimuutuse kujutise animeerimine
Täiendame veidi oma eelmist stiili:
Img ( -webkit-filter: halltoonid (100%); -moz-filter: halltoonid (100%); -ms-filter: halltoonid (100%); -o-filter: halltoonid (100%); filter: halltoonid ( 100%); filter: hall : puudub filter: puudub /* IE 6-9 */ )
See võimaldab pildil muutuda värviliseks, kui hõljutate hiirega selle kohal. Kasutame värvimuutusprotsessi animeerimiseks ka CSS3 üleminekut:
Img ( -webkit-filter: halltoonid (100%); -moz-filter: halltoonid (100%); -ms-filter: halltoonid (100%); -o-filter: halltoonid (100%); filter: halltoonid ( 100% filter: hall /* IE 6-9 */ /*Lisa see kood*/ -moz-üleminek: kõik 1-d; */ ) img:hover ( -webkit-filter: puudub; -moz-filter: puudub; -ms-filter: puudub; -o-filter: puudub; filter: pole; filter: pole; /* IE 6-9 * / )
Ülemineku parameeter kõik ütleb, et reegel töötab kõigi stiilide puhul ja teine parameeter on animatsiooni aeg.
Esimeses parameetris saate määrata teatud atribuudi (näiteks kõrguse, et animeerida ainult kõrgust) ja teises parameetris aja sekundites (võib olla kümnendmurdudes - 0,1 s).
