ЦСС филтер и режими мешања су моћни алати за лаку примену запањујућих визуелних ефеката на вашу веб страницу без потребе за сложеним кодом.

ЦСС филтер и режими мешања вам омогућавају да лако примените визуелне ефекте на своју веб страницу. Филтери су скуп унапред дефинисаних ЦСС функција које се користе за прилагођавање приказивања слика или других ХТМЛ елемената. Док режими мешања одређују како елемент треба да се стапа са својом позадином или суседним елементима.

Коришћење ЦСС филтера

ЦСС филтере примењујете помоћу филтер својство и својство које специфицира примењени тип ефекта. Свако својство филтера је ЦСС функција, тј ради слично као ЦСС променљива функција. Прихвата параметар који одређује колико филтер треба да утиче на стилизовани елемент.

На располагању је 10 функција ЦСС филтера за стилизовање вашег ХТМЛ елемента:

  • замагљивање()
  • осветљеност()
  • контраст()
  • дроп-схадов()
  • нијанси сиве ()
  • нијанса-ротирај()
  • инверт()
  • непрозирност()
  • заситити ()
  • сепија()

Можете користити ове филтере појединачно или у комбинацији да бисте креирали јединствене стилове и побољшали изглед својих ХТМЛ елемената.

Неки од ових филтера раде много боље са другима када се користе на прави начин.

Ево примера комбиновања ЦСС филтера за постизање различитих визуелних ефеката на елементу слике.

1. Сиви тонови и сепија

Тхе нијанси сиве () филтер уклања све информације о боји са елемента слике или текста. Филтер узима вредност између 0 и 1, при чему 0 значи оригиналну боју, а 1 је ефекат пуне сиве.

Тхе сепија() филтер примењује ефекат тонова сепије на елемент слике или текста. Филтер такође узима вредност између 0 и 1.

На пример:

имг {
филтер: сивих тонова(14%) сепија(30%);
}

Комбиновање нијанси сиве () на 14% и сепија() на 30% може створити старински или ретро ефекат на вашој слици.

2. Инверт анд Сатурате

Тхе заситити () филтер повећава или смањује засићеност елемента слике или текста. Филтер узима вредност између 0 и бесконачности, при чему је 1 оригинална боја, а веће вредности повећавају засићеност.

Тхе инверт() филтер ће инвертовати боје слике или елемента текста окретањем нијансе сваке присутне боје за 180 степени на кругу боја. То значи да филтер мења ниво осветљености и засићености елемента док одржава нијансу.

На пример:

имг {
филтер: инверт(30%) заситити(75%);
}

Овај код инвертује боје слике и повећава засићеност за 75%.

3. Хуе-Ротате анд Цонтраст

Тхе нијанса-ротирај() филтер ротира нијансе слике или елемента текста, што значи да мења укупну боју елемента уз одржавање нивоа осветљености и засићености. Количина ротације се може навести у степенима, при чему 0 представља оригиналну боју, а 360 представља пуну ротацију назад на оригиналну боју.

Комбиновањем нијанса-ротирај() и контраст() филтери могу створити живописан и шарен ефекат на вашим сликама.

На пример:

имг {
филтер: нијанса-ротирати(10дег) контраст(150%);
}

Хуе-ротате може прихватити вредност од дег, град, рад, или ред. Горњи код ротира нијансу слике за 10 степени и повећава контраст.

4. Осветљеност и замућење

Филтери за осветљеност и замућење су сами по себи разумљиви. Први подешава осветљеност ваше слике, а други контролише ниво примењеног замућења.

Комбиновањем осветљеност() и замагљивање() филтери могу створити сањив и мекан ефекат на вашим сликама.

На пример:

имг {
филтер: осветљеност(0.8) замућење(5пк);
}

Горњи код смањује осветљеност за 0.8 (80%) и примењује се а 5пк ефекат замућења слике.

5. Дроп-Схадов и Опацити

Ефекат падајуће сенке је визуелни ефекат у коме се чини да елемент баца сенку на површину иза себе, дајући илузију дубине и димензионалности. Сенке се често примењују на текст или слике како би се створио осећај одвојености између елемента и позадине.

У међувремену, филтер непрозирности контролише транспарентност елемента.

Комбиновањем дроп-схадов() и непрозирност() филтери могу створити суптилан ефекат на елементе текста.

На пример:

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

У овом примеру, сенка је постављена 10 пиксела десно и 9 пиксела доле, са радијусом замућења од 9 пиксела. Боја сенке је одређена као беж. Наведена је и непрозирност од 70%.

Коришћење ЦСС режима мешања

ЦСС режими мешања контролишу како се садржај елемента стапа са позадином или другим елементима, омогућавајући креативне ефекте композиције.

Неки од најпопуларнијих случајева употребе ЦСС режима мешања укључују:

  • Креирање градијената: За креирање се могу користити режими мешања неколико ЦСС градијената позадине тај прелаз између боја, дајући вам лак и ефикасан начин да додате дубину и димензију свом дизајну.
  • Додавање текстуре: Такође можете да користите режиме мешања да додате текстуру позадинама, сликама и другим елементима на страници. Ово може бити одличан начин за стварање јединственог изгледа и додавање визуелног интереса иначе једноставним елементима.
  • Подешавање боја: Са режимима мешања, можете подесити боје елемената на страници, укључујући подешавање боја позадине. Ово ће вам омогућити да лако креирате ефекте као што су преклапања боја или нијансиране слике.

Два најчешћа начина мешања су бацкгроунд-бленд-моде и мик-бленд-моде. Обе особине деле истих 15 вредности: нормално, множење, екран, преклапање, затамњење, осветљење, избегавање боје, засићеност, сагоревање боје, осветљеност, разлика, тврдо светло, меко светло, искључење и нијанса.

Требало би да користите бацкгроунд-бленд-моде када имате више распореда позадине, попут позадинских слика на елементу, и желите да се све стапају једна у другу.

Такође можете користити мик-бленд-моде да споји садржај датог елемента са садржајем његовог директног родитеља. Тхе мик-бленд-моде се обично користи за мешање садржаја у првом плану као што су текст, облици или слике.

Ево примера коришћења мик-бленд-моде за мешање текста и слике.

ХТМЛ:

<дивкласа="контејнер">
<имг
 срц=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? ауто=цомпресс&цс=тинисргб&в=1260&х=750&дпр=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? ауто=цомпресс&цс=тинисргб&в=1260&х=750&дпр=2"
 цласс="бацкгроунд-имаге"
 />
<дивкласа="садржај">
<х1>Добродошлих1>
<стр>Хелло Усер!стр>
див>
див>

ЦСС:

.контејнер {
положај: апсолутни;
ширина: 100%;
висина: 100%;
}
.позадинска слика {
ширина: 100%;
висина: 100%;
објектно уклапање: поклопац;
}


.садржај {
положај: апсолутни;
топ: 50%;
лево: 50%;
преобразити: превести(-50%, -50%);
Поравнање текста: центар;
мик-бленд-моде: разлика;
}


х1 {
фонт-сизе: 60пк;
боја: бео;
}
стр {
фонт-сизе: 40пк;
боја: бео;
}

Тхе разлика режим мешања израчунава апсолутну разлику између вредности боја текста и тамне слике испод.

У овом сценарију, боја текста би била у интеракцији са тамном позадином, што би резултирало ефектом високог контраста.

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

Можете комбиновати филтере и режиме мешања да бисте створили још визуелно занимљивије ефекте. Коришћењем оба својства заједно, можете постићи јединствене и креативне резултате које је тешко поновити са другим ЦСС својствима.

Ево примера који комбинује филтер и режим мешања да би се створио сложенији ефекат:

.мој-елемент {
филтер: осветљеност(150%) нијанса-ротирати(180дег) дроп-схадов(0пк 0пк 10пкргба(0, 0, 0, 0.5));
мик-бленд-моде: екран;
}

Овај код комбинује филтере; осветљеност, нијанса-ротирати, дроп-схадов, и а мик-бленд-моде од вредности екран на слику. Повећава осветљеност за 150%, док хуе-ротирати ће обрнути боје слике за 180 степени.

Затим се такође примењује сенка. На крају, екран вредност за режим мешања ће комбиновати боје слике са основном позадином, што резултира ефектом где се светлије боје појачавају, а тамније се мешају са позадини.

Овладавање филтерима и режимима мешања

Научили сте о различитим типовима ЦСС филтера и како их можете применити на своје ХТМЛ елементе. Коришћењем различитих функција филтера као што су замућење, контраст и ротирање нијансе, можете да измените изглед својих слика. Такође сте видели примере режима мешања у акцији и како се они могу користити за креирање јединствених дизајна.

Ако више експериментишете са овим техникама, можете додати додатни ниво визуелног интересовања својим дизајнима.