Secțiuni de site
Alegerea editorului:
- Cum să adăugați un nou cadran de ceas pe ceasurile inteligente Android Wear
- Cel mai profitabil plan tarifar Life
- Cum să transferați date de la Samsung la contactele Google Xiaomi Miui
- Filtre de imagine CSS Funcțiile și sintaxa filtrelor CSS
- Toate culorile carcasei Galaxy S8 și care este mai bine să o cumperi?
- Mikrotik hAP AC - Un router pentru toate ocaziile Înainte de a începe testarea
- Cum să calculezi cel mai bine reflexul de bas pentru un sistem acustic
- Resetarea din fabrică pentru ZTE Blade X3
- Cum să deblochezi parola Honor dacă ai uitat-o pe smartphone?
- Tehnologia Thunderbolt: cum funcționează și care sunt avantajele acesteia
Publicitate
Creați imagini alb-negru din culoare folosind CSS. Filtre de imagine CSS Funcțiile și sintaxa filtrelor CSS |
Proprietățile CSS au atins un astfel de nivel de dezvoltare încât sunt capabile să facă față unor funcții importante ale editorilor grafici. Un exemplu în acest sens sunt filtrele CSS, cu ajutorul cărora puteți crea efecte frumoase pentru imagini. Dacă mai devreme era greu de imaginat, acum aproape toate filtrele software sunt implementate în tabelul în cascadă, de la modele de estompare la modele de culoare artistice. Dar există încă un mic dezavantaj al filtrelor CSS - nu toate browserele web acceptă efecte vizuale. Desigur, este doar o chestiune de timp. Și când sosește ora „x”, dezvoltatorii trebuie să fie pregătiți. Deocamdată, să ne uităm la ceea ce a fost deja implementat până acum. Suport pentru browser pentru filtre CSSPractic, toate browserele populare, Firefox, Chrome, Opera, au o relație „prietenoasă” cu efectele de filtrare. Nu același lucru se poate spune despre IE, care refuză complet să suporte efecte, chiar și în cele mai recente versiuni.
Funcțiile și sintaxa filtrelor CSSToate proprietățile CSS au anumiți parametri care combină ordinea în care sunt scrise valorile. Proprietatea de filtru nu face excepție, ca și altele, poate folosi o combinație de mai multe reguli într-o singură aplicație. De exemplu, adăugați un filtru de luminozitate pentru o imagine, iar după un spațiu specificați altul - contrast. Vom acoperi totul în acest articol cu câteva exemple pentru o mai bună înțelegere. Sintaxă Filtru: numele filtrului (procent din valoare); filtru: url(img.svg); filtru: blur(10px); filtru: luminozitate (0,9); filtru: contrast(150%); filtru: drop-shadow(5px 5px 10px negru); filtru: tonuri de gri(80%); filtru: nuanță-rotire (60deg); filtru: invers (80%); filtru: opacitate(50%); filtru: saturat(50%); filtru: sepia(40%); /* Aplică mai multe filtre */ filtru: contrast (150%) tonuri de gri (80%); Lista filtrelor
Exemple de filtre CSSAm ajuns la o parte interesantă a articolului, în care vom lua în considerare fiecare filtru separat cu exemple de aplicare a acestuia. Pentru claritate, vor fi folosite trei imagini. Primul va arăta punctul de plecare, aspectul originalității. Al doilea va servi ca exemplu static de aplicare a unui filtru, iar al treilea va afișa efectul de hover, trecând cursorul mouse-ului peste imagine. Filtru de estompareÎn editorii grafici, filtrul de estompare este un instrument indispensabil și este adesea folosit în muncă. Poate crea cu ușurință o imagine neclară, dar poate crea efectul de focalizare pe un anumit element, în timp ce restul imaginii se încadrează în neclaritate. Și multe altele. În designul site-ului web (de exemplu, estomparea) poate fi folosită ca linie pentru o mai bună lizibilitate a textului din imagine. De fapt, estomparea este gaussiană de la o valoare de 0 px până când dispare complet. Original Filtra Efect de hover /*regulă statică*/ .efbl1 img( filtru: blur(2px); -webkit-filter: blur(2px); ) /*pentru efectul hover*/ .efbl2 img( tranziție: toate 0,6 s ease 0s; ) :hover img( filtru: blur(4px); -webkit-filter: blur(4px); tranziție: toate 0.6s ease 0s; ) Filtrează umbrăProprietatea umbră a venit la noi cu cea de-a treia versiune a tabelului în cascadă. Desigur, este familiar tuturor celor implicați în dezvoltarea site-ului web, deoarece box-shadow joacă un rol important în design. Filtrul de umbră poate fi numit o alternativă inferioară cu parametri similari și sunt doar 5 dintre ei, fără a lua în calcul umbra interioară. Ordinea scrierii este următoarea: 5px/-5px (offset orizontal), 5px/-5px (offset vertical), 15px (raza de estompare a umbrei), 5px/-5px (întindere a umbrei), negru (culoare). Filtrul acceptă toată sintaxa, cu excepția valorilor de întindere și inserare, precum și adăugarea mai multor umbre separate prin virgule. Dar, în ciuda tuturor acestora, există câteva avantaje, de exemplu, filtrul ia în considerare pseudo-elemente, ceea ce vă permite să afișați forma exactă a umbrei elementului. De asemenea, interesant este că atunci când blocul nu are un fundal, ci este specificat doar o chenar, atunci când se folosește box-shadow va fi afișată o umbră, presupus ținând cont de fundal, adică unul solid. Iar în cazul utilizării drop-shadow, umbra ia forma unui accident vascular cerebral fără a ține cont de fundal. Original Filtra Efect de hover /*regula statica*/ .efdrswd1 img( filtru: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0) , 0.4)); ) /*pentru efectul hover*/ .efdrswd2 img( tranziție: toate 0.6s ease 0s; ) .efdrswd2:hover img( filtru: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); Filtru de decolorareStilul clasic de fotografie pentru toate timpurile în direcția corectă. Filtrul permite o singură valoare - pozitivă. În funcție de procentul specificat, nuanțele de gri vor înlocui fără probleme culoarea imaginii. De asemenea, în loc de procente, puteți folosi fracții până la un număr întreg (0,01/1). Original Filtra Efect de hover /*regulă statică*/ .efgrays1 img( filtru: tonuri de gri (90%); -webkit-filter: tonuri de gri (90%); ) /*pentru efectul hover*/ .efgrays2 img( tranziție: toate 0.6s ease 0s; ) .efgrays2:hover img( filtru: tonuri de gri (90%); -webkit-filter: tonuri de gri (90%); tranziție: toate 0,6 secunde eșuează 0; ) Filtru de luminozitateAdăugarea de lumină colțurilor negre „neexplorate” ale imaginii. Este adesea folosit în procesarea fotografiilor, deoarece fotografiile de amatori sunt de obicei realizate în locuri slab iluminate. Luminozitatea filtrului este reglabilă de la 0% (o imagine complet neagră) până la dispariția aproape completă a imaginii. Punctul inițial este definit ca 100%, iar valoarea poate fi specificată și ca fracție. Original Filtra Efect de hover /*regulă statică*/ .efbrig1 img( filtru: luminozitate (150%); -webkit-filter: luminozitate (150%); ) /*pentru efectul hover*/ .efbrig2 img( tranziție: toate 0,6s ease 0s; ) .efbrig2:hover img( filtru: luminozitate (150%); -webkit-filter: luminozitate (150%); tranziție: toate 0,6 s ușurință 0; ) Filtru de contrastO modalitate simplă de a face o imagine mai expresivă este prin experimentarea cu setările de luminozitate ale celor mai luminoase și mai întunecate părți ale imaginii. Filtrul de contrast este gata să ajute în acest sens. Parametrii săi, ca mulți alții, exclud o valoare negativă (-150%), iar poziția inițială este indicată la 100%. Pe lângă procente, sunt permise și fracțiile (1,5). Original Filtra Efect de hover /*regula statica*/ .efcontr1 img( filtru: contrast(150%); -webkit-filter: contrast(150%); ) /*pentru efectul hover*/ .efcontr2 img( tranzitie: toate 0.6s ease 0s; ) .efcontr2:hover img( filtru: contrast(150%); -webkit-filter: contrast(150%); tranziție: toate 0.6s ease 0s; ) Filtru de tonuri de culoareO tehnică excelentă de design în designul imaginii, care se potrivește cu stilul designului principal al resursei. Ideea este să suprapuneți o nuanță a culorii selectate pe imaginea originală. Rapoartele ies în funcție de gradul dat, care indică punctul de culoare de pe roata culorilor. Dacă valoarea este pozitivă (150deg), atunci rotația are loc în sensul acelor de ceasornic. În consecință, dacă este negativ, atunci în sens invers acelor de ceasornic. În două poziții pornește de la 0° la 360°. Original Filtra Efect de hover /*regulă statică*/ .efhrotai1 img( filtru: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*pentru efectul hover*/ .efhrotai2 img( tranziție: toate 0,6 s ease 0s ; ) .efhrotai2:hover img( filtru: hue-rotate (180deg); -webkit-filter: hue-rotate (180deg); tranziție: toate 0,6 s ease 0s; ) Filtru de inversareUn efect specific care vă permite să întoarceți culoarea unei imagini cu susul în jos. În editorii grafici are un anumit rol și se întâmplă că fără participarea sa nu se poate obține rezultatul dorit. Parametrul filtru invers este specificat numai în direcția pozitivă de la o valoare de 0% la 100%. Original Filtra Efect de hover /*regula statica*/ .efinve1 img( filtru: inversat(100%); -webkit-filter: inversat(100%); ) /*pentru efectul de trecere cu mouse-ul*/ .efinve2 img( tranzitie: toate 0,6 secunde ease 0; ) .efinve2:hover img( filtru: inversare (100%); -webkit-filter: inversare (100%); tranziție: toate 0,6 secunde ușurează 0; ) Filtru de saturațieAtunci când o imagine își pierde culoarea naturală din motive necunoscute (ceva ca un tricou albit de soare), creșterea saturației îi poate restabili instantaneu aspectul original. Și dacă acest filtru este folosit în combinație cu alte filtre, rezultatul va fi foarte satisfăcător. Setarea se face de la 0 vizualizare inițială la numere mari. Original Filtra Efect de hover /*regula statica*/ .efsatut1 img( filtru: saturate(165%); -webkit-filter: saturate(165%); ) /*pentru efectul hover*/ .efsatut2 img( tranzitie: toate 0.6s ease 0s; ) .efsatut2:hover img( filtru: saturate(165%); -webkit-filter: saturate(165%); tranziție: toate 0.6s ease 0s; ) filtru sepiaImitație a efectului fotografiilor vechi (nuanță ușor maro). Acest lucru realizează un stil retro de imagine, care este deosebit de popular. Filtrul sepia este reglabil de la 0% (poziție acasă) la 100%. Original Filtra Efect de hover /*regula statica*/ .efsepiaa1 img( filtru: sepia(100%); -webkit-filter: sepia(100%); ) /*pentru efectul hover*/ .efsepiaa2 img( tranzitie: toate 0.6s ease 0s; ) .efsepiaa2:hover img( filtru: sepia(100%); -webkit-filter: sepia(100%); tranziție: toate 0.6s ease 0s; ) Transparența filtruluiUn filtru similar cu proprietatea de opacitate din tabelul în cascadă versiunea 3. Sintaxa este aceeași, dar valoarea transparenței este ajustabilă de la 0% la 100% (poziția originală). Original Filtra Efect de hover /*regula statica*/ .efopaty1 img( filtru: opacitate(50%); -webkit-filter: opacitate(50%); ) /*pentru efectul hover*/ .efopaty2 img( tranzitie: toate 0,6 secunde ease 0; ) .efopaty2:hover img( filtru: opacitate (50%); -webkit-filter: opacitate (50%); tranziție: toate 0,6 secunde ușurează 0; ) Legătura de filtrareUn filtru personalizat este creat pe baza elementelor SVG cu un identificator specific, care poate fi utilizat ulterior în CSS printr-un filtru de link. Efectele pot fi foarte diferite de filtrele standard, de la măști de suprapunere la transparența banală. Generator de filtre CSSDe mult timp a fost obiceiul de a crea generatoare de diferite proprietăți CSS. , și mult, mult mai mult. Ele servesc ca un instrument pentru a ușura munca. Și pentru webmasterii începători pot avea beneficii duble. Sunt foarte ușor de utilizat: mișcă glisoarele și poți vedea imediat rezultatele. Și când ați terminat, tot ce rămâne este să copiați codul generat. Același lucru este valabil și pentru generatoarele de filtre CSS. Iată două dintre ele pentru referință: Concluzie Recenzia s-a dovedit a fi destul de mare, dar sper că va fi de folos cuiva în practică. De asemenea, nu uitați să combinați filtre, unul este bun, dar două vor fi mai bune în anumite cazuri. Filtrele CSS3 sunt o ramură foarte interesantă a SVG, permițându-vă să modificați elemente și imagini HTML prin aplicarea de estompare, luminozitate și multe alte filtre. În acest tutorial vom arunca o privire rapidă asupra modului exact în care funcționează. Cum funcţionează asta?Folosind doar CSS putem crea niște efecte destul de complexe. Ele pot fi aplicate atât imaginilor, cât și elementelor HTML. Proprietatea care este folosită pentru a controla toate aceste efecte este filtra. filtru: filtru(valoare) ; După cum v-ați putea aștepta, această proprietate necesită utilizarea unui prefix de browser. Dar deocamdată, numai -webkit-(Chrome și Safari) sunt singurele motoare de browser care acceptă această proprietate. Webkit-filter: filtru(valoare) ; FiltrareExistă o serie de filtre, așa că pentru a înțelege mai bine fiecare dintre ele, să le analizăm individual. Se pot aplica mai multe filtre unui element (separate printr-un spațiu), de exemplu, luminozitateaŞi estompa: filtru: estompare(5px) luminozitate(0,5); Există câteva filtre care nu vor fi acoperite mai jos, dar pot fi implementate cu ușurință cu CSS existent (transparență și umbre). Iată imaginea originală pe care o vom folosi pentru a demonstra cum funcționează filtrele: Voi afișa o fotografie cu filtrul aplicat (prima fotografie) și rezultatul filtrului sub forma unei imagini statice (a doua fotografie), dacă utilizați un browser care nu acceptă filtre și nu poate vedea rezultatul. EstompaAi vrut vreodată să faci o estompare gaussiană pe o imagine sau text folosind doar CSS? Cu filtre o poți face! Neclaritatea este măsurată în pixeli, așa că ați putea face ceva de genul acesta: filtru: blur(5px ); LuminozitateLuminozitatea este măsurată de la zero la unu, 1 fiind luminozitatea completă (alb) și 0 fiind luminozitatea originală. filtru: luminozitate(0,2); SaturaţieSaturația este măsurată ca procent. filtru: saturat(50%) ; Rotația tonului
Acest filtru vă permite să schimbați tonul prin rotirea acestuia (gândiți-vă la o roată de culori pe care apoi o rotiți). Se măsoară în grade. filtru: hue-rotate(20deg); ContrastContrastul, din nou, este măsurat ca procent. 100% este valoarea implicită, 0% va crea o imagine complet neagră. Orice lucru mai mare de 100% adaugă contrast! filtru: contrast(150% ); InversiuneaMăsurată și ca procent. Valorile disponibile variază de la 0% la 100%. Destul de ciudat, în acest moment, webkit-ul nu acceptă inversiuni dacă acestea sunt mai mici de 100%. filtru: invers (100%) ; AlbireDin nou, introduceți procentul după care doriți să desaturați imaginea. Valorile disponibile variază de la 0% la 100%. filtru: tonuri de gri(100%); SepiaPresupun că este foarte util dacă vrei să postezi ceva pe Instagram. Deși presupun că nu vei folosi CSS pentru asta. În orice caz, aceste nuanțe de gri și negative se vor adăuga pentru a adăuga sepia imaginii. 100% va fi o sepia completă, 0% va fi imaginea originală. filtru: sepia(100% ); Suport pentru browser
Dacă aveți întrebări, vă recomandăm să utilizați Buna ziua. Astăzi nu vei surprinde pe nimeni cu efecte frumoase pe site-uri web. Unii fac acest lucru în Flash în ultimii 10 ani, alții nu s-au oprit încă să o facă în Javascript, dar cei mai avansați folosesc CSS3 de mult timp. Aceasta este ceea ce vom face astăzi.
Deci, să începem cu ceva simplu, avem nevoie de fotografii frumoase, să luăm asta: Trebuie să o desaturam (desaturați imaginea CSS - eliminați culorile, faceți imaginea alb-negru). Pentru aceasta (și pentru lucrul cu grafica în general) CSS3 are un instrument special de filtrare. Acesta este ceea ce vom folosi. Soluție: Decolorați imaginea CSSMai întâi, să așezăm imaginea în sine: Apoi vom seta un stil pentru imagine: Img ( -webkit-filter: tonuri de gri (100%); -moz-filtru: tonuri de gri (100%); -ms-filtru: tonuri de gri (100%); -o-filtru: tonuri de gri (100%); filtru: tonuri de gri( 100%); filtru: gri /* IE 6-9 */ ) Acum imaginea noastră va deveni alb-negru. Puteți, desigur, să vă opriți aici, dar este mult mai interesant când imaginea răspunde și la acțiunile utilizatorului. Vă propun să o faceți astfel încât atunci când treceți cu mouse-ul peste poză, aceasta să devină treptat colorată. De fapt, acest lucru nu este deloc dificil de făcut și nu trebuie să cunoașteți Javascript deloc. Animați imaginea decolorată CSSSă adăugăm puțin stilului nostru anterior: Img ( -webkit-filter: tonuri de gri (100%); -moz-filtru: tonuri de gri (100%); -ms-filtru: tonuri de gri (100%); -o-filtru: tonuri de gri (100%); filtru: tonuri de gri( 100%); filtru: gri /* IE 6-9 */ ) img:hover ( -webkit-filter: niciunul; -ms-filter: niciunul; -o-filter: niciunul; filtru : nici un filtru: nici unul; Acest lucru va permite ca imaginea să devină colorată atunci când treceți cu mouse-ul peste ea. Să folosim și tranziția CSS3 pentru a anima procesul de decolorare: Img ( -webkit-filter: tonuri de gri (100%); -moz-filtru: tonuri de gri (100%); -ms-filtru: tonuri de gri (100%); -o-filtru: tonuri de gri (100%); filtru: tonuri de gri( 100%); */ ) img:hover ( -webkit-filter: niciunul; -moz-filter: niciunul; -ms-filter: niciunul; -o-filter: niciunul; filtrul: niciunul; filtrul: niciunul; /* IE 6-9 * / ) Parametrul all în tranziție spune că regula va funcționa pentru toate stilurile, iar al doilea parametru este timpul de animație. Poate fi necesar să faceți o imagine gri cât mai repede posibil și fără a utiliza editori grafici. Desigur, puteți folosi editorul grafic Adobe Photoshop (puteți seta chiar și adâncimea și tonul). Desigur, nu puteți configura astfel de parametri în browser, dar ochii noștri (cu excepția cazului în care, desigur, sunteți un profesionist) cu greu vor observa diferența. În acest articol vom analiza modalități de a face o imagine gri. 1. Filtru CSSFolosind proprietatea filtra este poate cel mai simplu mod de a crea o imagine alb-negru. Pentru a crea o imagine alb-negru în IE, trebuie să utilizați și proprietatea filtra. Astăzi, proprietate filtra face parte din tehnologia CSS3, care este acceptată de browsere precum Firefox, Chrome și Safari. Filtrele Webkit nu numai că pot crea un efect alb-negru, dar pot oferi și efecte sepia și estompare. Pentru a face imaginea gri, trebuie să setați următoarele proprietăți: Acest cod va funcționa în IE6-9, Chrome18+, Safari 6.0+ și Opera15+. 2. JavascriptO alternativă la codul de mai sus este Javascript, care funcționează în toate browserele dacă este activat, inclusiv IE6 și mai jos.
function grey(imgObj) ( var canvas = document.createElement ("canvas" ) ; 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 ); Folosind Javascript, putem da unei imagini un efect alb-negru, de exemplu, când trecem cu mouse-ul și facem clic pe imagine. Puteți folosi jQuery împreună pentru a crea un efect de estompare în gri. Singurul dezavantaj este că Javascript poate fi dezactivat în browser.3.SVG O altă modalitate este să utilizați filtre SVG. Tot ce trebuie să faceți este să creați un fișier SVG și să utilizați codul de mai jos:
#scale de gri");" Rezultatul va fi similar.Concluzie
img ( -webkit-filter: grayscale(100%) ; -webkit-filter: grayscale(1 ) ; filtru : grayscale(100% ) ; filtru: url ("../img/gray.svg#grayscale" ) ; filtru : gri ; Acest cod poate fi folosit împreună cu Javascript, iar dacă Javascript este dezactivat, acest cod va funcționa. Modernizr poate ajuta în acest sens. Modernizr adaugă js clasă pentru corp, dacă Javascript este activat în browser și va înregistra clasa nu-js
.no-js img ( -webkit-filter: grayscale(100%) ; -webkit-filter: grayscale(1) ; filtru: grayscale(100%) ; filtru: url (../img/gray.svg#grayscale " ) filtru : gri ; filtre CSS3 reproduce efecte vizuale în browser similar filtrelor Photoshop. Filtrele pot fi adăugate nu numai imaginilor, ci și oricăror elemente care nu sunt goale. Setul de filtre nu se limitează la cele preinstalate în browser. De asemenea, puteți utiliza filtre SVG descărcându-le din link împreună cu elementul svg. Browserele procesează pagina pixel cu pixel, aplicând efectele specificate și desenând rezultatul deasupra originalului. Astfel, prin utilizarea mai multor filtre puteți obține efecte diferite, acestea par să se suprapună. Cu cât sunt mai multe filtre, cu atât mai mult îi ia browserului să redea pagina. Puteți aplica mai multe filtre în același timp. Modul clasic de a aplica astfel de efecte este atunci când treceți cu mouse-ul peste un element: hover . Suport pentru browser
|
Popular:
Nou
- Cel mai profitabil plan tarifar Life
- Cum să transferați date de la Samsung la contactele Google Xiaomi Miui
- Filtre de imagine CSS Funcțiile și sintaxa filtrelor CSS
- Toate culorile carcasei Galaxy S8 și care este mai bine să o cumperi?
- Mikrotik hAP AC - Un router pentru toate ocaziile Înainte de a începe testarea
- Cum să calculezi cel mai bine reflexul de bas pentru un sistem acustic
- Resetarea din fabrică pentru ZTE Blade X3
- Cum să deblochezi parola Honor dacă ai uitat-o pe smartphone?
- Tehnologia Thunderbolt: cum funcționează și care sunt avantajele acesteia
- Cum să crești TIC și PR Cum să crești singur TIC Yandex