CSS3 szűrők kép
Filter - ingatlan a CSS3, ami megváltoztathatja a képeket. Ró blur, növeli a kontrasztot és a fényerőt, add árnyék, a változás a színek, és még sok minden más.
Egy példa oldal, amit létre a bemutató:
Letöltés fájl üres ezen a linken.
Figyelem! szűrők ingatlan jelenleg béta, és csak akkor támogatja a Firefox böngészőt. A böngésző Chrome és a többi WebKit alapú motort, ez a funkció csak akkor működik, ha hozzá előtagokat. Előtagok mutatom végén a leckét, ezért javasoljuk, hogy neki az első helyet a legújabb Firefox.
10 filter hatások CSS3
Felhívom a figyelmet arra, hogy az összes hatást az alábbi képekre, végrehajtják csak útján CSS3, így nem lesz látható a régebbi böngészők.
1. Szűrő Blur - blur
Leegyszerűsítve, az a szokás, elmosódott képek. A szűrő akkor megfelelő, ha kell, hogy a szélek lágyabb. Mivel a elhomályosítja a háttérben egy olyan érzésem, hogy nem éles.
Próbáljuk használja a szűrő rókagomba, írom ezt a kódot:
A bal oldalon, az érthetőség kedvéért tettem egy normális képet, de a jobb ugyanaz a kép, csak megváltoztatta segítségével CSS3.
Blur szűrő a megadott érték pixelben. Sőt, minél magasabb az érték, annál nagyobb a kép elmosódását.
Szűrés fényerő - fényerő
Ez a szűrő hasonlít egy változás a fényerőt a TV képernyőjén. Ebben az esetben a szín között szabályozható az eredeti, színes és fekete, mint hozzá paramétereket.
És itt van a tengerimalac ló:
Beállítható 0%, vagy több. 0%, a kép fekete lesz 100% - eredeti és 200% - világosabb lesz kétszer. Ez egy nagyon jó hatással, különösen sötét képek.
fényerő szűrő is beállítható 3 módja van:
Sőt, elvileg nincs korlátozás. A példában meghatározott értéke 2 és növeli a fényerőt a kép 2-szer vagy 200%.
3. Szűrő Contrast - kontraszt
Ez a szűrő lehetővé teszi, hogy fokozza a kép kontrasztját beállításával a különbség a világos és sötét tónusok a kép. Itt, az értékek is meghatározott három módja van: egész számok, lebegőpontos számok és százalékok. Így 100% - ez az alapértelmezett. 0% - black kép. És minden, ami több, mint 100%, akkor kontrasztot.
Ebben az időben, akkor kigúnyolják macska. Add, hogy a 50% Kontraszt:
Amint láthatjuk, most már nem is használja a Photoshop, hogy hozzon létre a kontraszt és a homály. Ez így van, a CSS és vegye izmenyaum kép szívünk tartalmát.
4. A szűrőtelítettség - telíti
Ez egy nagyon jó hatással, melyek révén a kép élénkebb és telített. Az értékek azt jelzik, három változatban: egészek és frakciói, valamint érdeklődést. Mi pont értéke - 200%. Növelje az intenzitást a kartinochki 2 alkalommal.
A tenger sokkal szebb:
Nézd, milyen szaftos a képet. Mert én nagyon hűvös hatást! Menjünk.
5. Szűrő átláthatóság - fényelnyelés
Beállítja az átláthatóságot. bizonyos korlátozások érvényesek az értéke ennek a szűrőnek a:
- egészek és frakciói: 0-tól 1
- százalékos: a 0% és 100
Próbáljuk csökkenteni a homály, hogy 50% a következő kép.
Nézd meg, hogy mi történt:
6. Filter Inversion - invert
Ez lehetővé teszi, hogy „flip” színe. Abban értékei a szűrő is a korlátozás:
- egészek és frakciói: 0-tól 1
- százalékos: a 0% és 100
Ebben az esetben mi a legnagyobb érték - 100%:
És egy gyönyörű sportkocsi enyhe kézmozdulat alakul.
Ez a szűrő segített létrehozni egy negatív hatással van a kép maga.
7. Szűrő Sepia - sepia
Ez lehetővé teszi, hogy változtatni a színét, hozzátéve egy árnyalattal szépia. Azaz, ha kap egy szimulációt a régi fényképeket. A határérték a szűrő vannak megadva ugyanaz, mint az előző kettő.
- egészek és frakciói: 0-tól 1
- százalékos: a 0% és 100
Akkor mi van? Poprobuems?
Fuck-tibidoh! Egy kis kézlegyintéssel, öregszik a fotó egy-két évtized, azt hiszem, leszaladt a tető ezekkel a példákkal.
A mi esetünkben, már megadott egy frakcionális érték - 0,5. De lehet kísérletezni, mint a szíve vágyik!
8. Filter szürke árnyalat - szürkeárnyalatos
Ez a szűrő lehetővé teszi számunkra, hogy konvertálni színes szürkeárnyalatossá. A szűrő érték korlátozásokat:
- egészek és frakciói: 0-tól 1
- százalékos: a 0% és 100
Így 100% -ban teljes kép szürkeárnyalatos és 0% változatlan marad. 0 egyenértékű 0%, és 1,0-100%.
Mi határozza meg az érték - 0,7 (70%):
9. A szűrő árnyalatot - Hue-forgatás
Véleményem szerint ez egy nagyon jó szűrő, amelynek segítségével egy kép is milyen érdekes dolgok. Például, hogy változtatni a színét az eredeti kép megváltoztatásával a szög a megvilágítás.
Mi határozza meg az értékét - 300 fokos:
Tehát aki azt mondani, hogy a rózsaszín majom nem történik?
10. Filter árnyék - drop-árnyék
A szűrő által meghatározott több érték. Először is, az értéket az X-tengely, akkor - az Y tengellyel Mivel mi jelöljük árnyék eltolás az X tengely mentén és Y. Ezután adja meg a méretét, a mi árnyékok és az utolsó tulajdonság - a színe.
A mi esetünkben, tudomásul vesszük, árnyék ellensúlyozta 3 pixel mérete 5 és a színe sötétszürke.
Felhívjuk figyelmét, hogy mivel az árnyék a benyomást kelti, hogy a második képen van emelve.
PS: Barátaim, ha azt szeretnénk, hogy teljes mértékben feltárja a CSS3 és a HTML5, és megtanulják, hogyan szedése a hűvös oldalon - regisztrálj képzés typeset 5+
Ott vár a sok érdekes darab, és titkok a weboldalak létrehozása. Érdekes lesz!
Aztán úgy döntött, hogy teszteljék a hatását a szűrő különböző böngészőkben.
Tengerimalacokat:
Pale Moon (Version 25.2.1 (x64))
Comodo Dragon (version 36.1.1.21)
Opera (version 27.0)
Vivaldi (verzió 1.0.83.38)
és az Internet Explorer (verzió 11 nem frissül sokáig).
Azt csalódást kedvenc Pale Moon. Amellett, hogy a drop-árnyék nem működik, nincs kép. Majd anélkül, hogy árnyék. És hogy mivel Pale Moon alapul FireFox. Talán a beállításokkal valami rosszat csináltam?
Comodo Dragon mindenekelőtt kiderült, ahogy kellene - és ez tetszett.
Opera is blestnula. Minden egyáltalán nincs panasz.
Vivaldi meglepett. Képek (összes), az első teljesen megszűnt, és akkor ott már elő a hatás (körülbelül egy másodperc elteltével). Úgy vélem, hogy miután elszakadt az Opera. Vivaldi írt néhány új pribabahami hogy nem tudom. Na jó. Nem böngészők beszédet.
Internet Explorer maradéktalanul eleget Pale Moon -no ezen a módon. Ie szinte semmi.
Saját szerény következtetés: a fejlesztők az idő múlásával, a böngésző mentesít egy új változat, ahol minden a helyére kerül, de az általunk használt szűrő hatása, hogy a legteljesebb.
A szimmetria, hadd fejezzem be a post.
Köszönöm Seroga.Za idő szeretlek, én tényleg van egy csomó hasznos tartalom. De a legfontosabb, hogy a mi gyorsan mozgó alkalommal, sok információ, a hasznos újdonság és vazhnostyu.Esli javasol felhívni, ami van a hangsúly, akkor a legmodernebb tendentsiya.Ne kivétel tanul RED-5 és a CSS-3 Köszönöm.