CSS филтърът и режимите на смесване са мощни инструменти за лесно прилагане на зашеметяващи визуални ефекти към вашата уеб страница без необходимост от сложен код.

CSS филтърът и режимите на смесване ви позволяват лесно да прилагате визуални ефекти към вашата уеб страница. Филтрите са набор от предварително дефинирани CSS функции, използвани за коригиране на изобразяването на изображения или други HTML елементи. Докато режимите на смесване определят как даден елемент трябва да се слее с фона или съседните елементи.

Използване на CSS филтри

Прилагате CSS филтри, като използвате филтър свойство и свойство, указващо типа на приложен ефект. Всяко свойство на филтъра е CSS функция, т.е работи подобно на CSS променлива функция. Той приема параметър, за да уточни колко филтърът трябва да повлияе на стилизирания елемент.

Налични са 10 CSS филтърни функции за стилизиране на вашия HTML елемент:

  • размазване ()
  • яркост()
  • контраст()
  • падаща сянка()
  • скала на сивото ()
  • hue-rotate()
  • обръщане ()
  • непрозрачност ()
  • насищане ()
  • сепия()
instagram viewer

Можете да използвате тези филтри поотделно или в комбинация, за да създадете уникални стилове и да подобрите външния вид на вашите HTML елементи.

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

Ето примери за комбиниране на CSS филтри за постигане на различни визуални ефекти върху елемент на изображението.

1. Скала на сивото и сепия

The скала на сивото () филтърът премахва цялата цветова информация от изображение или текстов елемент. Филтърът приема стойност между 0 и 1, като 0 означава оригиналния цвят, а 1 е пълният ефект на сивата скала.

The сепия() филтърът прилага ефект на сепия към изображение или текстов елемент. Филтърът също приема стойност между 0 и 1.

Например:

img {
филтър: скала на сивото(14%) сепия(30%);
}

Комбиниране скала на сивото () на 14% и сепия() при 30% може да създаде винтидж или ретро ефект върху вашето изображение.

2. Обърнете и наситете

The насищане () филтър увеличава или намалява наситеността на изображение или текстов елемент. Филтърът приема стойност между 0 и безкрайност, като 1 е оригиналният цвят, а по-високите стойности увеличават наситеността.

The обръщане () филтърът ще обърне цветовете на изображение или текстов елемент, като обърне оттенъка на всеки присъстващ цвят на 180 градуса върху цветното колело. Това означава, че филтърът променя нивата на яркост и наситеност на елемента, като същевременно запазва нюанса.

Например:

img {
филтър: обръщам(30%) насищам(75%);
}

Този код обръща цветовете на изображението и увеличава наситеността със 75%.

3. Hue-Rotate и Contrast

The hue-rotate() филтърът завърта нюансите на изображение или текстов елемент, което означава, че променя цялостния цвят на елемента, като същевременно запазва нивата на яркост и наситеност. Степента на завъртане може да бъде зададена в градуси, като 0 представлява оригиналния цвят и 360 представлява пълно завъртане обратно към оригиналния цвят.

Комбинирането на hue-rotate() и контраст() филтрите могат да създадат жив и цветен ефект върху вашите изображения.

Например:

img {
филтър: завъртане на нюанса(10град) контраст(150%);
}

Hue-rotate може да приеме стойност от град, град, рад, или завой. Горният код завърта нюанса на изображението с 10 градуса и повишава контраста.

4. Яркост и размазване

Филтрите за яркост и размазване са много ясни. Първият регулира яркостта на вашето изображение, а вторият контролира нивото на приложеното замъгляване.

Комбинирането на яркост() и размазване () филтрите могат да създадат мечтателен и мек ефект върху вашите изображения.

Например:

img {
филтър: яркост(0.8) размазване(5px);
}

Горният код намалява яркостта с 0.8 (80%) и се прилага a 5px ефект на размазване на изображението.

5. Падаща сянка и непрозрачност

Ефектът падаща сянка е визуален ефект, при който изглежда, че даден елемент хвърля сянка върху повърхността зад него, създавайки илюзията за дълбочина и размерност. Падащите сенки често се прилагат към текст или изображения, за да се създаде усещане за разделение между елемента и фона.

Междувременно филтърът за непрозрачност контролира прозрачността на даден елемент.

Комбинирането на падаща сянка() и непрозрачност () филтрите могат да създадат фин ефект върху вашите текстови елементи.

Например:

.текст-ефект {
трансформирам: превеждам(-50%, -50%);
цвят: черен;
падаща сянка: 10px 9px 9pxбежово;
непрозрачност: 70%;
}

В този пример падащата сянка е позиционирана 10 пиксела вдясно и 9 пиксела в долната част, с радиус на замъгляване от 9 пиксела. Цветът на сянката е определен като бежов. Посочена е и непрозрачност от 70%.

Използване на CSS режими на смесване

CSS режимите на смесване контролират как съдържанието на даден елемент се смесва с фона или други елементи, позволявайки креативни композиционни ефекти.

Някои от най-популярните случаи на използване на CSS режими на смесване включват:

  • Създаване на градиенти: Режимите на смесване могат да се използват за създаване няколко фонови градиента на CSS този преход между цветовете, който ви дава лесен и ефективен начин да добавите дълбочина и измерение към вашите дизайни.
  • Добавяне на текстура: Можете също да използвате режими на смесване, за да добавите текстура към фонове, изображения и други елементи на страница. Това може да бъде чудесен начин да създадете уникален външен вид и да добавите визуален интерес към иначе обикновените елементи.
  • Регулиране на цветовете: С режимите на смесване можете да регулирате цветовете на елементите на страницата, включително регулиране на фоновите цветове. Това ще ви позволи лесно да създавате ефекти като цветни наслагвания или оцветени изображения.

Двата най-често срещани режима на смесване са фонов режим на смесване и режим на смесване-смесване. И двете свойства споделят едни и същи 15 стойности: нормално, умножаване, екраниране, наслагване, потъмняване, осветяване, избягване на цвета, наситеност, изгаряне на цветовете, осветеност, разлика, твърда светлина, мека светлина, изключване и нюанс.

Трябва да използвате фонов режим на смесване когато имате множество фонови оформления, като фонови изображения на елемент, и искате всички те да се смесват едно с друго.

Можете също така да използвате режим на смесване-смесване за смесване на съдържанието на даден елемент със съдържанието на неговия пряк родител. The режим на смесване-смесване обикновено се използва за смесване на съдържание на преден план като текст, форми или изображения.

Ето пример за използване режим на смесване-смесване за смесване на текст и изображение.

HTML:

<дивклас="контейнер">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="background-image"
 />
<дивклас="съдържание">
<h1>Добре дошлиh1>
<стр>Здравей потребител!стр>
див>
див>

CSS:

.контейнер {
позиция: абсолютен;
ширина: 100%;
височина: 100%;
}
.фоново изображение {
ширина: 100%;
височина: 100%;
обектно прилягане: Покрийте;
}


.съдържание {
позиция: абсолютен;
Горна част: 50%;
наляво: 50%;
трансформирам: превеждам(-50%, -50%);
подравняване на текст: център;
режим на смесване-смесване: разлика;
}


h1 {
размер на шрифта: 60px;
цвят: бяло;
}
стр {
размер на шрифта: 40px;
цвят: бяло;
}

The разлика режимът на смесване изчислява абсолютната разлика между цветовите стойности на текста и основното тъмно изображение.

В този сценарий цветът на текста ще взаимодейства с тъмния фон, което ще доведе до ефект на висок контраст.

Комбиниране на филтри и режими на смесване

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

Ето един пример, който комбинира филтъра и режима на смесване, за да създаде по-сложен ефект:

.my-element {
филтър: яркост(150%) завъртане на нюанса(180град) падаща сянка(0px 0px 10pxrgba(0, 0, 0, 0.5));
режим на смесване-смесване: екран;
}

Този код комбинира филтрите; яркост, завъртане на нюанса, падаща сянкаи а режим на смесване-смесване на стойност екран към изображението. Увеличава яркостта със 150%, докато hue-завъртане ще обърне цветовете на изображението на 180 градуса.

След това също се прилага падаща сянка. На последно място, екран стойността за режима на смесване ще комбинира цветовете на изображението с основния фон, което води до ефект, при който по-светлите цветове се усилват, а по-тъмните цветове се смесват с заден план.

Овладяване на филтри и режими на смесване

Научихте за различните видове CSS филтри и как можете да ги приложите към вашите HTML елементи. Като използвате различни функции за филтриране, като замъгляване, контраст и завъртане на нюанса, можете да промените външния вид на вашите изображения. Също така сте видели примери за режими на смесване в действие и как те могат да се използват за създаване на уникални дизайни.

Ако експериментирате повече с тези техники, можете да добавите допълнително ниво на визуален интерес към вашите проекти.