Подешавање слике помоћу ЦСС филтер ефеката

Подешавање слике Бригхтнесс и Контраст, или претварање слике у Граисцале или Сепхиа је уобичајена особина коју можете наћи у апликацији за уређивање слика, као што је Пхотосхоп. Међутим, сада је могуће додати исте ефекте веб сликама помоћу ЦСС-а.

Ова могућност долази из филтер ефеката који су заправо још увијек у радном нацрту. Међутим, чини се да је Вебкит претраживач корак напред у имплементацији ове функције.

Дакле, хајде да покушамо и користићемо ову слику од Мехди Кх-а да демонстрирамо ефекте.

Ефекти

Примена ефеката је веома једноставна. Погледајте исјечак у наставку да бисте слике претворили у граисцале;

 имг -вебкит-филтер: граисцале (100%);  

... и ово је за сепиа ала Инстаграм.

 имг -вебкит-филтер: сепиа (100%);  

Оба сепиа анд тхе граисцале вредности су изражене у процентима где 100% је максимално и примењује се 0% ће задржати измену слике, али када вредност није експлицитно наведена 100% ће се сматрати подразумеваним.

Осветљавање слике је такође могуће, а то можемо урадити помоћу осветљеност функција, као што следи;

 имг -вебкит-филтер: светлина (50%);  

Ефекат осветљења функционише као контраст и сепија ефекат изнад где је вредност 0% ће задржати слику онакву каква је и примењује 100% ће потпуно осветлити слику, која ће можда приказати само празну белу страницу уместо слике.

Ефекат осветљења такође дозвољава негативне вредности, у којој ће затамните слику.

 имг -вебкит-филтер: светлина (-50%);  

… И ми можемо на овај начин подесити контраст слике.

 имг -вебкит-филтер: контраст (200%);  

Постоји мала разлика у томе како и вредност функционише, као што можете видети у горе наведеном, постављамо контраст() од стране 200%, то је због вредности 100% је почетна тачка у којој ће слика остати непромењена. Када је вредност испод 100%, рецимо 50%, слика ће постати мање контрастна.

Такође, можемо комбиновати ефекат у једном декларационом блоку, као што је то у примеру испод. Претварамо слику у граисцале и повећати контраст за 50% истовремено.

 имг -вебкит-филтер: контраст сиве боје (100%) (150%);  

Комбиновањем филтера са ЦСС3 транзицијом можемо направити грациозан лебдети ефекат.

 имг: ховер -вебкит-филтер: граисцале (0%);  имг: ховер -вебкит-филтер: сепиа (0%);  имг: ховер -вебкит-филтер: светлина (0%);  имг: ховер -вебкит-филтер: контраст (100%);  

На крају, постоји још један ефекат који можемо испробати; тхе Гауссиан Блур, који ће замутити циљани елемент.

 имг: ховер -вебкит-филтер: блур (5пк);  

Као иу Пхотосхопу, вредност замућења се наводи у радијусу пиксела и ако вредност није експлицитно наведена, 0 ће се узети као подразумевана, а слика ће остати као што је.

Финал Тхоугхт

Заправо има много више ефеката у спецификацији. као такав хуе-ротате, инверт и сатурате, али мислим да су мање примењени у стварним случајевима у Вебу. Дакле, дискусија је била ограничена на само четири ефекта.

И упркос томе што се дискусија примењује на слике у овом упутству, својство се заправо може применити и на било који елемент у ДОМ-у.

Коначно, можете погледати демо уживо са ових линкова испод. Имајте на уму да је филтер тренутно подржан само за Цхроме 19 и изнад.

• Демо
• Довнлоад Соурце