Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Филтри

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

CSS филтри – ефекти върху изображения директно в браузъра

CSS филтрите позволяват да променяте визията на изображенията директно в браузъра, без Photoshop или друга програма. Най-важното е, че ефектите се прилагат чрез CSS и оригиналната снимка остава непроменена. Можете да комбинирате няколко филтъра едновременно и да създавате разнообразни визуални ефекти само с няколко реда код.

Стъпка по стъпка: прилагане на филтри

Изберете изображение в HTML и му задайте CSS стил.
Добавете свойството filter със стойност, например замъгляване.
За по-стари версии на Chrome използвайте и префиксната версия.
Комбинирайте няколко филтъра, като ги изписвате последователно, разделени с интервал.
Променяйте стойностите, за да експериментирате с различни ефекти.

Примерна логика:

Замъгляване с 5px
Добавяне на 100% черно-бял ефект
Увеличаване на контраста на 150%
Промяна на яркостта
Завъртане на цветовия тон (Hue Rotate)
Инвертиране на цветовете (негатив)

Основни CSS филтри

filter – прилага един или повече визуални ефекти върху елемент
-webkit-filter – префиксна версия за по-стари браузъри
blur() – замъгляване в пиксели
grayscale() – черно-бял ефект в проценти
contrast() – контрол на контраста в проценти
brightness() – контрол на яркостта
hue-rotate() – завъртане на цветовете в градуси
invert() – инвертира цветовете (негатив)

Тези инструменти дават бърз и гъвкав контрол върху визията на изображенията директно чрез CSS.

Дискусия към урока

Въпроси

Отговори

Liliya Yanakova

Как да преценя Проценти или пиксели?