Filter - це властивість в CSS3, яке може видозмінювати ваші картинки. Накладати розмитість, збільшувати контраст і яскравість, додавати тінь, змінювати кольори і багато, багато іншого.
Приклад сторінки, яку ми створюємо в уроці:
Завантажити файл-заготовку можна за цим посиланням.
Увага! Властивість filters зараз на стадії тестування і підтримується тільки браузером Firefox повністю. А браузером Chrome і іншими на основі движка Webkit, це властивість працює тільки при додаванні префіксів. Префікси я показую в кінці уроку, тому рекомендую його спочатку проходити на Firefox останньої версії.
10 ефектів фільтрів в CSS3
Звертаю увагу, що всі ефекти на картинках нижче, реалізовані тільки за допомогою CSS3, тому в старих браузерах вони видно не будуть.
1. Фільтр розмиття - blur
Якщо говорити простою мовою, то це звичайне розмиття картинки. Фільтр підійде, якщо вам потрібно зробити краю більш м'якими. За рахунок розмиття створюється відчуття фону, який не в фокусі.
Давайте спробуємо застосувати наш фільтр на лисичку, прописавши ось такий код:
Зліва, для наочності, я поставив звичайну картинку, а ось справа те ж саме зображення, тільки змінений за допомогою CSS3.
Фільтр зі значенням blur вказується саме в пікселях. Причому, чим більше це значення, тим більше проявляється розмитість картинки.
Фільтр яскравість - brightness
Цей фільтр нагадує зміна яскравості екрану телевізора. В даному випадку регулюється колір між чорним і оригінальним кольором у міру додавання параметрів.
А ось і наш піддослідний кінь:
Регулювати ви можете від 0% і більше. При 0% зображення буде чорним, при 100% - оригінальним, а при 200% - стане яскравішим в два рази. Це дуже хороший ефект, особливо для чорно-білі зображення.
Фільтр brightness може здаватися 3 способами:
Причому обмежень в принципі немає. У прикладі ми поставили значення 2 і збільшили яскравість нашої картинки на 2 рази або на 200%.
3. Фільтр контрастність - contrast
Цей фільтр дозволить вам підвищити контраст картинки, регулюючи різницю між світлими і темними тонами зображення. Тут значення також задаються трьома способами: цілі числа, дробові числа і відсотки. Таким чином, 100% - це значення за замовчуванням. 0% - чорне зображення. А все, що більше 100%, додає вам контраст.
На цей раз будемо знущатися над котом. Додамо йому на + 50% контрастності:
Як бачите, тепер ми навіть можемо не користуватися Photoshop для створення контрасту і розмиття. Ось прямо в CSS беремо і ізменяум зображення, як нашій душі завгодно.
4. Фільтр насиченість - saturate
Це дуже класний ефект, який зробить ваші зображення більш яскравими і насиченими. Значення вказуємо в трьох варіантах: цілі і дробові числа, а також, відсотки. Зазначимо значення - 200%. Підвищимо насиченість нашої картиночки в 2 рази.
Море стало помітно приємніше:
Подивіться, наскільки соковите вийшло зображення. По, моєму дуже класний ефект! Поїдемо.
5. Фільтр прозорість - opacity
Встановлює прозорість. На значення даного фільтра вводяться певні обмеження:
- цілі і дробові числа: від 0 до 1
- відсотки: від 0% до 100
Давайте спробуємо зменшити прозорість на 50% наступній картинці.
Подивіться, що вийшло:
6. Фільтр Інверсія - invert
Він дозволяє вам "перевертати" кольору. На значення даного фільтра також вводяться обмеження:
- цілі і дробові числа: від 0 до 1
- відсотки: від 0% до 100
У нашому випадку встановимо максимальне значення - 100%:
І красива спортивна машина легким рухом руки перетворюється в.
Цей фільтр допоміг нам створити ефект негативу на самому зображенні.
7. Фільтр cепія - sepia
Він дозволить вам змінити колір, додавши відтінок сепія. Тобто ви отримаєте імітацію старої фотографії. На значення фільтра обмеження вказуються ті ж самі, що і в двох попередніх.
- цілі і дробові числа: від 0 до 1
- відсотки: від 0% до 100
Ну що? Попробуемс?
Трах-тібідох! Легким порухом руки ми зістарити це фото на пару десятків років Здається, у мене дах потік з цими прикладами.
У нашому випадку ми вказали дробове значення - 0,5. Але ви можете експериментувати, як вашій душі завгодно!
8. Фільтр відтінки сірого - grayscale
Даний фільтр дозволяє нам перетворювати кольору в відтінки сірого. На значення фільтра також накладені обмеження:
- цілі і дробові числа: від 0 до 1
- відсотки: від 0% до 100
Таким чином, при 100% все зображення буде з відтінками сірого, а при 0% залишиться незмінним. 0 прирівнюється до 0%, а 1,0 - до 100%.
Задамо значення - 0.7 (або 70%):
9. Фільтр відтінок освітлення - hue-rotate
На мій погляд, це дуже класний фільтр, за допомогою якого з картинкою можна проробляти цікаві речі. Наприклад, змінювати колір початкового зображення, змінюючи кут освітлення.
Ми поставимо значення - 300 градусів:
Ну і хто тут говорив, що рожевих мавп не буває?
10. Фільтр тінь - drop-shadow
Фільтр задається відразу декількома значеннями. Спочатку ми задаємо значення по осі X, потім - по осі Y. Так ми позначаємо зміщення тіні по осі X і Y. Далі вказується радіус нашої тіні і останнім атрибутом - її колір.
У нашому випадку зазначимо зміщення тіні на 3 пікселів, розмір 5 і колір темно-сірий.
Зверніть увагу, за рахунок тіні створюється враження, ніби друга картинка піднята.
PS: Друзі, якщо Ви хочете повністю вивчити HTML5 та CSS3, і навчитися верстати класні сайти - записуйтеся на тренінг Верстаємо на 5+
Там вас чекаємо багато цікавих фішок і секретів по створенню сайтів. Буде цікаво!
І тут же я вирішив перевірити дію фільтра в різних браузерах.
Піддослідними кроликами стали:
Pale Moon (Версія 25.2.1 (x64))
Comodo Dragon (Версія 36.1.1.21)
Opera (Версія 27.0)
Vivaldi (Версія 1.0.83.38)
і Internet Explorer (Версія 11 Не оновлював давно).
Розчарував мій улюблений Pale Moon. Крім drop-shadow не працювала жодна картинка. Та й то без відкидання тіні. І це враховуючи, що Pale Moon розроблений на основі FireFox. Може з настройками в мене щось не в порядку?
Comodo Dragon все показав як треба - чим і порадував.
Opera теж блестнула. Все абсолютно без нарікань.
Vivaldi здивував. Картинки (все) спочатку пропадали зовсім, а потім з'являлися вже з готовим ефектом (приблизно через секунду). Вважаю, що, відколовши від Opera. Vivaldi пишуть з якимись новими прибабахов про які я не знаю. Ну і добре. Чи не про браузерах мова.
Internet Explorer відпрацював повністю Pale Moon --но подібним чином. Тобто майже ніяк.
Мої скромний висновок: розробники браузерів з часом випустять нові версії де все буде працювати, а ми використовуємо дію фільтра на повну котушку.
За сім дозвольте мені завершити свій пост.
Спасибі Серёга.За час знайомства з тобою, я отримав дійсно багато корисного контенту. Але найголовніше, що в наш швидкоплинний час, з купою інформації, твоя корисна своєю новизною і важностью.Еслі ти пропонуєш звернути на, що то увагу, значить це найсучасніша тенденція.Не виняток вивчення РЕЬД-5 і CSS-3 Дякую.