Филтър - този имот в CSS3, което може да промени вашите изображения. Налагане на замъгляването, увеличаване на контраста и яркостта, да добавяте сенки, цветове на климата, и много, много повече.
Примерно, че ние създаваме в урока:
Изтегляне на файла от упор в тази връзка.
Внимание! филтри имот в момента е в бета версия и поддържа само Firefox браузър напълно. Браузърът Chrome, а другият въз основа на Webkit на двигателя, тази функция работи само когато добавите представки. Представки I показват в края на урока, така че аз препоръчвам да го първо място в най-новата версия на Firefox.
10 филтърни ефекти в CSS3
Аз привлека вниманието ви, че всички ефекти в снимките по-долу, се прилагат само с помощта на CSS3, така че те няма да се вижда от по-старите.
1. Филтър размазването - размазване
По-просто казано, това е обичайните размазване снимки. Филтърът е подходящ, ако трябва да се направи по краищата по-мек. Поради замъглите фона е чувството, че не е на фокус.
Нека се опитаме да използваме нашия филтър за пачи крак, писане този код тук:
От лявата страна за по-голяма яснота, сложих нормална картина, но правото е едно и също изображение, променена само с помощта на CSS3.
Замъгляване филтър за стойността, посочена в пиксела. Освен това, колкото по-висока е стойността, толкова по-замъгляването на изображението.
яркост филтър - яркост
Този филтър прилича на промяна в яркостта на екрана на телевизора. В този случай, цветът се регулира между оригиналния цвят и черно и добавяне параметри.
И тук е нашата морско кон:
Можете да регулирате от 0% или повече. На 0%, изображението ще бъде черно на 100% - оригинални, и при 200% - става по-светъл два пъти. Това е един много добър ефект особено за тъмни изображения.
яркост филтър може да се настрои по 3 начина:
Освен това, по принцип няма ограничения. В примера, който задава стойност от 2 и увеличаване на яркостта на нашия имидж с 2 пъти или с 200%.
3. Филтър Contrast - разлика
Този филтър позволява да се подобри контраста на изображението чрез коригиране на разликата между светли и тъмни тонове на изображението. Тук стойностите също са определени по три начина: с плаваща запетая и проценти. По този начин, 100% - това е по подразбиране. 0% - черен образ. И всичко, което е повече от 100%, можете да добавите контраст.
По това време, ние ще се подиграват котка. Добавете го към контраста на 50%:
Както можете да видите, сега ние дори не може да се използва Photoshop за създаване на контраст и размазване. Точно в CSS и да вземат izmenyaum изображение като съдържание на нашето сърце.
4. насищане на филтъра - насищане
Това е един много готин ефект, който ще направи своя имидж по-ярки и наситени. Стойностите показват в три варианта: числа и фракции, както и интерес. Обръщаме внимание на стойност - 200%. Увеличаване на интензивността на нашите kartinochki 2 пъти.
Морето е много по-хубав:
Вижте колко сочни изображението. За моя много готин ефект! Да вървим.
прозрачност 5. Филтър - непрозрачност
Задава прозрачността. определени ограничения се налагат върху стойността на този филтър е:
- числа и фракции: от 0 до 1
- процент: от 0% до 100
Нека се опитаме да се намали непрозрачността на 50% следващата картина.
Вижте какво се случи:
6. Филтър инверсия - инвертна
Тя ви позволява да "обърне" цвят. В стойностите на филтъра са също ограничения са:
- числа и фракции: от 0 до 1
- процент: от 0% до 100
В този случай, ние си поставихме за максималната стойност - 100%:
И красив спортен автомобил леко движение на ръката, се превръща в.
Този филтър ни помогна да се създаде негативен ефект върху самото изображение.
7. Филтър сепия - сепия
Тя ви позволява да промените цвета, добавяне на сянка сепия. Това означава, че можете да получите симулация на старите снимки. В граничната стойност на филтъра са посочени същите като в предишните две.
- числа и фракции: от 0 до 1
- процент: от 0% до 100
И какво? Poprobuems?
Fuck-tibidoh! Леко вълна на страна, ние остарее е снимката, за няколко десетилетия, мисля, че се стичаше на покрива с тези примери.
В нашия случай, ние сме посочили дробна стойност - 0,5. Но вие можете да експериментирате, както си сърце желае!
8. Филтър нюанси на сиво - сивото
Този филтър ни позволява да конвертирате цвят сивата скала. В стойността на филтъра като наложените ограничения:
- числа и фракции: от 0 до 1
- процент: от 0% до 100
По този начин, с 100% цялото изображение е сивото, и 0% ще остане непроменен. 0 е равна на 0%, и 1,0 - 100%.
Ние посочите стойност - 0.7 (или 70%):
9. филтър светлина оттенък на - цвят-върти
По мое мнение, това е един много готин филтър, с помощта на която снимка можете да направите интересни неща. Например, за да промените цвета на оригиналното изображение чрез промяна на ъгъла на осветяване.
Ние определяме стойността на - 300 градуса:
Така че, който е да се каже, че розовата маймуната не се случи?
10. Филтър сянка - падащото сянка
Филтърът се определя от няколко стойности. На първо място, ние се стойността на оста Х, а след това - на Y. на оста Тъй като ние означаваме сянка компенсира по оста Х и Y. След това, определете радиуса на нашите сенки и последния атрибут - цвета си.
В нашия случай, ние отбелязваме компенсира от 3 пиксел размер сянка е 5, а цветът е тъмно сиво.
Моля, обърнете внимание, поради сянката на впечатлението, че е вдигнат втората снимка.
PS: Моите приятели, ако искате напълно да проучи на CSS3 и HTML5, и да научат как да се отпечатва на хладно място - запишете за обучение, набиран 5+
Там чакат много интересни парчета, както и тайните за създаване на уеб сайтове. Ще бъде интересно!
И тогава реших да се изследва влиянието на филтъра върху различни браузъри.
Морските свинчета са:
Pale Moon (версия 25.2.1 (x64))
Comodo Dragon (версия 36.1.1.21)
Opera (версия 27.0)
Вивалди (версия 1.0.83.38)
и Internet Explorer (версия 11 не се актуализира за дълго време).
Разочаровах любимата ми Pale Moon. В допълнение към падащия сянка не работи, няма изображение. И тогава, без да падне сянка. И това при положение, че Pale Moon е базиран на Firefox. Може би с настройките, аз правя нещо нередно?
Comodo Dragon всичко това разкри, както трябва - и това удоволствие.
Opera също blestnula. Всички без абсолютно никакви оплаквания.
Вивалди изненада. Снимки (всички), първо изчезнаха напълно, а след това вече бяха изготвени с ефекта (след около една секунда). Вярвам, че след като е разбит от операта. Вивалди пише с някаква нова pribabahami, че аз не знам. Е, добре. Не е за речта браузъри.
Internet Explorer напълно изпълнени Pale Moon --no този начин. Т.е. почти нищо.
скромен Моето заключение: разработчиците с течение на времето, браузърът ще пусне нова версия, където всичко ще работи, но ние използваме филтърни ефекти към своите най-голяма.
За симетрия, позволете ми да завърша моя пост.
Благодаря Seroga.Za време влюбен в теб, наистина има много полезно съдържание. Но най-важното е, че в нашите бързооборотни пъти, с много информация, ви от полза за неговата новост и vazhnostyu.Esli ви предлагам да се възползват от, която е в центъра, а след това, че е най-модерният tendentsiya.Ne изключение изучаване RED-5 и CSS-3 Благодаря ви.
Свързани статии