CSS3 filteri: mijenjanje slika pomoću stilova. CSS: Kako napraviti kontrastnu boju za tekst koji leži na raznobojnoj pozadini Funkcije i sintaksa CSS filtera

CSS3 filtri vrlo su zanimljiv izdanak SVG-a, omogućujući vam izmjenu HTML elemenata i slika primjenom zamućenja, svjetline i mnogih drugih filtara. U ovom vodiču ćemo brzo pogledati kako točno rade.

Kako ovo radi?

Koristeći samo CSS možemo stvoriti neke prilično složene efekte. Mogu se primijeniti i na slike i na HTML elemente. Svojstvo koje se koristi za kontrolu svih ovih učinaka je filter.

filter: filter(vrijednost) ;

Kao što možete očekivati, ovo svojstvo zahtijeva upotrebu prefiksa preglednika. Ali na u trenutku, samo -webkit-(Chrome i Safari) jedini su motori preglednika koji podržavaju ovo svojstvo.

Webkit-filter: filter(vrijednost) ;
-moz-filter: filter(vrijednost) ;
-o-filter: filter(vrijednost) ;
-ms-filter: filter(vrijednost);

Filtriranje

Postoji niz filtara, pa da bismo bolje razumjeli svaki od njih, pogledajmo ih pojedinačno. Na jedan element (odvojen razmakom) može se primijeniti više filtera, na primjer, svjetlina I zamutiti:

filter: zamućenje(5px ) svjetlina(0.5 ) ;

Postoji nekoliko filtara koji neće biti obrađeni u nastavku, ali se mogu jednostavno implementirati s postojećim CSS-om (transparentnost i sjene). Ovo je originalna slika koju ćemo koristiti da pokažemo kako filtri rade:

U obrascu ću dostaviti fotografiju s primijenjenim filtrom (prva fotografija) i rezultat filtra statična slika(druga fotografija) ako koristite preglednik koji ne podržava filtere i ne možete vidjeti rezultat.

Zamutiti

Jeste li ikada željeli napraviti Gaussovo zamućenje na slici ili tekstu koristeći samo CSS? S filterima možete to učiniti! Zamućenje se mjeri u pikselima, pa možete učiniti nešto poput ovoga:

filtar: zamućenje(5px ) ;
// Specifično za preglednik
-webkit-filter: blur(5px) ;
-moz-filter: zamućenje(5px ) ;
-o-filtar: zamućenje(5px ) ;
-ms-filter: zamućenje(5px) ;

Svjetlina

Svjetlina se mjeri od nula do jedan, 1 je puna svjetlina (bijela), a 0 je izvorna svjetlina.

filter: svjetlina(0,2 ) ;
// Specifično za preglednik
-webkit-filter: svjetlina(0,2 ) ;
-moz-filter: svjetlina(0,2 ) ;
-o-filtar: svjetlina(0,2 ) ;
-ms-filtar: svjetlina(0,2 ) ;

Zasićenost

Zasićenost se mjeri u postocima.

filtar: zasićen (50% ) ;
// Specifično za preglednik
-webkit-filter: zasićen(50% ) ;
-moz-filtar: zasićeno(50% ) ;
-o-filtar: zasićeno(50% ) ;
-ms-filtar: zasićen(50% ) ;

Tonska rotacija

Ovaj filtar vam omogućuje da promijenite ton rotiranjem (zamislite kotač boja koji zatim rotirate). Mjeri se u stupnjevima.

filter: hue-rotate(20deg) ;
// Specifično za preglednik
-webkit-filter: hue-rotate(20deg) ;
-moz-filtar: hue-rotate(20deg) ;
-o-filtar: hue-rotate(20deg) ;
-ms-filtar: hue-rotate(20deg) ;

Kontrast

Kontrast se, opet, mjeri kao postotak. 100% je zadana vrijednost, 0% će stvoriti potpuno crna slika. Sve više od 100% dodaje kontrast!

filter: kontrast(150% ) ;
// Specifično za preglednik
-webkit-filter: kontrast(150% ) ;
-moz-filtar: kontrast(150% ) ;
-o-filtar: kontrast(150% ) ;
-ms-filtar: kontrast(150% ) ;

Inverzija

Također se mjeri kao postotak. Dostupne vrijednosti u rasponu od 0% do 100%. Čudno je da trenutno webkit ne podržava inverzije ako su manje od 100%.

filter: obrnuti (100%) ;
// Specifično za preglednik
-webkit-filter: invertiraj (100%) ;
-moz-filtar: preokrenuti (100% ) ;
-o-filtar: preokrenuti (100% ) ;
-ms-filter: preokrenuti (100% ) ;

Izbjeljivanje

Opet unesite postotak za koji želite smanjiti zasićenost slike. Dostupne vrijednosti u rasponu od 0% do 100%.

filter: sivi tonovi (100% ) ;
// Specifično za preglednik
-webkit-filter: sivi tonovi(100% ) ;
-moz-filter: sivi tonovi(100% ) ;
-o-filtar: sivi tonovi (100% ) ;
-ms-filtar: sivi tonovi (100% ) ;

Sepija

Pretpostavljam da je ovo vrlo korisno ako želite nešto objaviti na Instagramu. Iako također pretpostavljam da za ovo nećete koristiti CSS. Ako ništa drugo, ove nijanse sive i negativ će dodati sepiju vašoj slici. 100% će biti potpuna sepija, 0% će biti izvorna slika.

filter: sepija(100% ) ;
// Specifično za preglednik
-webkit-filter: sepia(100% ) ;
-moz-filtar: sepija(100% ) ;
-o-filtar: sepija(100% ) ;
-ms-filtar: sepija(100% ) ;

Podrška za preglednik

Ako imate bilo kakvih pitanja, preporučujemo korištenje našeg

Funkcija invert() invertira boje na slici. Njegov učinak sličan je pretvaranju fotografije u negativ.

Sintaksa

filter: preokrenuti(<значение>);

To se može učiniti pomoću CSS-a bez ikakvih skripti ili prethodne obrade. Da, tehnologija ne stoji na mjestu :) Implementacija je vrlo jednostavna i čak ne zahtijeva korištenje bilo kojeg oblika SVG-a, koji je danas popularan.

Kako promijeniti boju fonta na fotografiji

Ako pažljivo čitate MDN, možete otprilike razumjeti načine miješanja i vidjeti razlike među njima, iako su gotovo svi isti. Bijeli tekst iznad slike daje nam rezultat koji je obrnuta slika, gdje se tekst preklapa. Za jednostavne crno-bijele slike, crna na originalnoj slici postaje bijela tamo gdje imamo bijeli tekst iznad nje, a bijela na originalnoj slici postaje crna kada imamo bijeli tekst iznad nje.

Na primjer, uzmimo primitivni HTML kod:

I tome dodajte malo primitivnijeg CSS-a:

Pozadina ( background: url(super_cat.jpg); width:800px; height:450px; ) h2 (color: #FFF; mix-blend-mode: razlika; font: 900 120px/120px Arial; text-align: center) span ( display:block; font-size:80px )

I bez toga je ispalo super Photoshop programi! I tekst i slika mogu se mijenjati, a učinak je sačuvan bez potrebe za JavaScriptom ili bilo kakvim promjenama CSS ili SV maski. Ali ovo je prikladno za jednostavne slike. Kod složenijih potrebno je primijeniti dodatne filtere i miješati ih.

Na primjer, možemo dodati sljedeći CSS filtar našoj h2 oznaci kao pomoć:

H2 ( filtar: invertiraj(1) sivi tonovi(1) kontrast(9) )

Mogućnosti dijeljenje filtri su ograničeni samo vašom maštom i ukusom za stil.

CSS svojstva su dosegla takav stupanj razvoja da se mogu nositi s nekim važnim funkcijama grafičkih urednika. Primjer za to su CSS filteri, s kojima možete stvoriti prekrasne efekte za slike.

Ako je ranije bilo teško čak i zamisliti, sada su gotovo svi softverski filtri implementirani u kaskadnu tablicu, od zamućenja do umjetničkih modela boja.

No ipak, CSS filtri imaju jedan mali nedostatak - ne podržavaju ga svi web preglednici vizualni efekti. Naravno, samo je pitanje vremena. A kada dođe sat "x", programeri moraju biti spremni. Za sada pogledajmo što je do sada već implementirano.

Podrška preglednika za CSS filtere

Uglavnom, svi popularni preglednici, Firefox, Chrome, Opera, imaju "prijateljski" odnos s efektima filtera. Isto se ne može reći za IE, koji u potpunosti odbija podržavati efekte, čak iu najnovijim verzijama.

Funkcije i sintaksa CSS filtera

Sva CSS svojstva imaju određene parametre koji kombiniraju redoslijed kojim su vrijednosti napisane. Svojstvo filtera nije iznimka, kao i drugi, može koristiti kombinaciju nekoliko pravila u jednoj aplikaciji. Na primjer, dodajte filtar svjetline za sliku, a nakon razmaka navedite još jedan - kontrast. Obradit ćemo sve u ovom članku s nekoliko primjera za bolje razumijevanje.

Sintaksa

Filter: naziv filtera (postotak vrijednosti); filter: url(img.svg); filter: zamućenje (10px); filter: svjetlina(0,9); filter: kontrast(150%); filter: drop-shadow (5px 5px 10px crno); filter: sivi tonovi (80%); filter: hue-rotate(60deg); filter: obrnuti (80%); filter: neprozirnost (50%); filter: zasićen (50%); filter: sepija (40%); /* Primijeni više filtera */ filter: kontrast(150%) u sivim tonovima (80%);

Popis filtara

Primjeri CSS filtera

Došli smo do zanimljivog dijela članka, u kojem ćemo svaki filtar zasebno razmotriti s primjerima njegove primjene. Radi jasnoće koristit će se tri slike. Prvi će pokazati polazište, izgled originalnosti. Drugi će poslužiti kao statični primjer primjene filtra, a treći će pokazati efekt lebdenja, lebdeći kursor miša iznad slike.

Filter zamućenja

U grafički urednici filter zamućenja je nezamjenjiv alat i često se koristi u radu. Može lako stvoriti mutnu sliku, ali može stvoriti učinak fokusiranja na određeni element dok ostatak slike potpada pod zamućenje. I mnogo više.

U dizajnu web stranica (na primjer, zamućenje) može se koristiti kao podstava za bolju čitljivost teksta koji se nalazi na slici. Zapravo, zamućenje je Gaussovo od vrijednosti od 0 px dok potpuno ne nestane.

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efbl1 img( filtar: zamućenje(2px); -webkit-filter: zamućenje(2px); ) /*za efekt lebdenja*/ .efbl2 img(prijelaz: svih 0,6s ease 0s; ) efbl2 :hover img( filter: blur(4px); -webkit-filter: blur(4px); prijelaz: sve 0,6s lagano 0s; )

Sjena filtra

Svojstvo sjene došlo nam je s trećom verzijom kaskadnog stola. Naravno, poznat je svima koji se bave razvojem web stranica, jer box-shadow igra važnu ulogu u dizajnu. Filtar padajuće sjene može se nazvati inferiornom alternativom sa sličnim parametrima, a ima ih samo 5, ne računajući unutarnju sjenu.

Redoslijed pisanja je sljedeći: 5px/-5px (horizontalni pomak), 5px/-5px (vertikalni pomak), 15px (radijus zamućenja sjene), 5px/-5px (razvlačenje sjene), crna (u boji). Filtar podržava svu sintaksu osim razvlačenja i umetnutih vrijednosti, kao i dodavanje višestrukih sjena odvojenih zarezima. Ali unatoč svemu tome, postoje neke prednosti, na primjer, filtar uzima u obzir pseudoelemente, što vam omogućuje prikaz točnog oblika sjene elementa.

Također je zanimljivo da kada blok nema pozadinu, već je naveden samo rubni potez, tada će se pri korištenju box-shadow prikazati sjena, navodno uzimajući u obzir pozadinu, odnosno čvrstu. A u slučaju korištenja padajuće sjene, sjena poprima oblik poteza bez uzimanja u obzir pozadine.

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .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)); 0.4)); drop-shadow(6px 7px rgba(0, 0, 0, 0.4));

Filter za dekolorizaciju

Klasičan stil fotografije za sva vremena u pravom smjeru. Filter dopušta samo jednu vrijednost - pozitivnu. Ovisno o navedenom postotku, nijanse sive glatko će zamijeniti boju slike. Također, umjesto postotaka, možete koristiti razlomke do cijelog broja (0,01/1).

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efgrays1 img( filtar: sivi tonovi(90%); -webkit-filter: sivi tonovi(90%); ) /*za efekt lebdenja*/ .efgrays2 img( prijelaz: svih 0,6s lagano 0s; ) .efgrays2:hover img( filter: sivi tonovi (90%); -webkit-filter: sivi tonovi (90%); prijelaz: svih 0,6 s lagano 0 s; )

Filtar svjetline

Dodavanje svjetla u "neistražene" crne kutove slike. Često se koristi u obradi fotografija, budući da se amaterske fotografije obično snimaju na slabo osvijetljenim mjestima. Svjetlina filtra je podesiva od 0% (potpuno crna slika) do gotovo potpunog nestanka slike. Izvorna točka je definirana kao 100%, a vrijednost se također može navesti kao razlomak.

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efbrig1 img( filtar: svjetlina(150%); -webkit-filter: svjetlina(150%); ) /*za efekt lebdenja*/ .efbrig2 img(prijelaz: svih 0,6s lagano 0s; ) .efbrig2:hover img( filter: svjetlina (150%); -webkit-filter: svjetlina (150%); prijelaz: svih 0,6 s lagano 0 s; )

Kontrastni filter

Jednostavan način da sliku učinite izražajnijom jest eksperimentiranje s postavkama svjetline najsvjetlijih i najtamnijih dijelova slike. Kontrastni filtar spreman je pomoći u tome. Njegovi parametri, kao i mnogi drugi, isključuju negativnu vrijednost (-150%) i početni položaj naznačeno na 100%. Osim postotaka dopušteni su i razlomci (1,5).

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efcontr1 img( filtar: kontrast(150%); -webkit-filter: kontrast(150%); ) /*za efekt lebdenja*/ .efcontr2 img( prijelaz: svih 0,6s lagano 0s; ) .efcontr2:hover img( filter: kontrast(150%); -webkit-filter: kontrast(150%); prijelaz: svih 0,6s lagano 0s; )

Filter tonova boje

Izvrsna tehnika dizajna u dizajnu slika koja odgovara stilu dizajna glavnog resursa. Ideja je prekriti nijansu odabrane boje na originalnu sliku. Omjeri se pojavljuju ovisno o zadanom stupnju, koji označava točku boje na kotaču boja.

Ako je vrijednost pozitivna (150 stupnjeva), tada se rotacija odvija u smjeru kazaljke na satu. Prema tome, ako je negativan, onda u smjeru suprotnom od kazaljke na satu. U dva položaja počinje od 0° do 360°.

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efhrotai1 img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*za efekt lebdenja*/ .efhrotai2 img( prijelaz: svih 0,6s lagano 0s ; ).

Inverzijski filtar

Specifičan efekt koji vam omogućuje da boju slike okrenete naglavačke. U grafičkim urednicima ima određenu ulogu i događa se da se bez njegova sudjelovanja ne može postići željeni rezultat. Parametar invertnog filtra specificiran je samo u pozitivnom smjeru od vrijednosti od 0% do 100%.

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*za efekt lebdenja*/ .efinve2 img( prijelaz: svih 0,6 s olakšanje 0s; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); prijelaz: svih 0,6 s lagano 0s; )

Filter zasićenja

Kada slika izgubi svoju prirodnu boju iz nepoznatih razloga (nešto poput majice kratkih rukava izblijedjele od sunca), povećanje zasićenosti može odmah vratiti njezin izvorni izgled. A ako se ovaj filtar koristi u kombinaciji s drugim filtrima, rezultat će biti vrlo zadovoljavajući. Postavka se vrši od 0 početnog prikaza do velikih brojeva.

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efsatut1 img( filtar: zasićeno(165%); -webkit-filter: zasićeno(165%); ) /*za efekt lebdenja*/ .efsatut2 img( prijelaz: svih 0,6s lagano 0s; ) .efsatut2:hover img( filter: zasićeno (165%); -webkit-filter: zasićeno (165%); prijelaz: svih 0,6 s lagano 0 s; )

Sepia filter

Imitacija efekta starih fotografija (blago smeđa nijansa). Time se postiže retro stil slike, koji je posebno popularan. Sepia filtar je podesiv od 0% (početni položaj) do 100%.

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efsepiaa1 img( filtar: sepia(100%); -webkit-filter: sepia(100%); ) /*za efekt lebdenja*/ .efsepiaa2 img( prijelaz: svih 0,6s lagano 0s; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); prijelaz: svih 0,6s lagano 0s; )

Prozirnost filtra

Filtar sličan svojstvu neprozirnosti iz verzije 3 kaskadne tablice. Sintaksa je ista, ali je vrijednost prozirnosti podesiva od 0% do 100% (izvorni položaj).

Izvornik

Filter

Efekt lebdenja

/*statičko pravilo*/ .efopaty1 img( filtar: neprozirnost(50%); -webkit-filter: neprozirnost(50%); ) /*za efekt lebdenja*/ .efopaty2 img( prijelaz: svih 0,6s lagano 0s; ) .efopaty2:hover img( filter: neprozirnost(50%); -webkit-filter: neprozirnost(50%); prijelaz: svih 0,6s lagano 0s; )

Veza filtera

Prilagođeni filtar stvara se na temelju SVG elemenata s određenim identifikatorom, koji se naknadno može koristiti u CSS-u putem filtra veze. Učinci mogu biti vrlo različiti od standardnih filtara, od preklapajućih maski do banalne prozirnosti.

Generator CSS filtera

Dugo je bio običaj stvarati generatore različitih CSS svojstava. , i još mnogo, mnogo više. Služe kao alat za olakšavanje rada. A za webmastere početnike mogu imati dvostruku korist. Vrlo su jednostavni za korištenje: pomaknite klizače i odmah možete vidjeti rezultate. I kada završite, preostaje samo kopirati generirani kod. Isto vrijedi i za generatore CSS filtera. Evo dva od njih za vašu referencu:

Zaključak

Pregled se pokazao prilično velikim, ali nadam se da će nekome biti od koristi u praksi. Također, ne zaboravite kombinirati filtere, jedan je dobar, ali dva će biti bolja u određenim slučajevima.