Садржај
- Изградња сјајног филтера
- Стварање замућеног ефекта
- Изградња клесаног ефекта
- Израда мапе бумп-а
- Стварање златног рељефног изгледа
- Прављење сенке
Коришћење ЦСС филтера за побољшање вашег садржаја чини да ваша веб локација заиста цврчи. Оно што је мање познато је да можете да направите невероватне примитиве комбиновањем компонената СВГ филтера у фенси ЦСС филтер који ће вашу веб страницу издвојити из масе. Овај водич вас води кроз изградњу вишестепеног филтера који комбинује осветљење, замућење и шум како би створио запањујући 3Д ефекат на ваш текстуални садржај.
- Преузмите изворне датотеке за овај водич.
ЦСС филтри су одличан алат за промену начина приказивања вашег садржаја на вашој веб локацији. Унапред припремљени ефекти израђени су од једноставних грађевинских блокова и одлични су за замућивање, манипулацију бојама међу многим другим ефектима. Сваки од ових грађевинских блокова је попут цигле која, када се споје заједно, ствара прелепу кућу. Још боље, можете сами сложити ове цигле и направити своје ЦСС ефекте филтера! Како? Па, управо ћемо заронити и направити неколико ефеката које можете користити као инспирацију за своје будуће пројекте.
Започећемо са освртом на СВГ. СВГ је језик векторске графике који је уграђен у све савремене ХТМЛ5 прегледаче. Једна од најлепших карактеристика су филтери. СВГ укључује а филтер> елемент и гомила различитих примитива за филтрирање. Примитиви СВГ филтера су цигле у нашем конструкцијском сету. Средићемо их заједно, а затим ћемо их користити на садржају наше веб странице.
Када смо сложили своје цигле у ефекат филтера који желимо да користимо, можемо једноставно да упутимо марку из ЦСС-а и да користимо ЦСС бираче да бисмо је применили на наш садржај. Почнимо са прилично једноставним примером, а касније ћемо покушати нешто сложеније.
Изградња сјајног филтера
У овом првом примеру направићемо филтер који можемо користити за стварање сјаја. Користићемо четири различита примитива филтера за изградњу нашег сјајног филтера- феГауссианБлур (што ствара ефекат замућења), феФлоод (који испуњава подручје једнобојном бојом), феЦомпосите (који меша пикселе заједно) и феМерге (који филтрирани садржај спаја са нашим оригиналним текстом да би се добио коначни резултат).
Прво што желимо за наш блистав текст је да направимо снимак текста и претворимо га у бели (пошто ћемо касније бели текст користити за стварање ефекта сјаја). Код СВГ филтера за стварање белог текста је следећи:
филтер ид = ”вхите”> феФлоод поплава-боја = ”бела” /> феЦомпосите ин2 = ”СоурцеАлпха” оператор = ”ин” ресулт = ”вхите” /> / филтер>
Овај филтер садржи два градивна блока. Прва је феФлоод ефекат филтера који испуњава подручје на које делује филтер белом бојом (филтери користе правоугаону површину слике изван екрана да би креирали сваки ефекат у ланцу филтера). Други је феЦомпосите ефекат филтера, који се користи за комбиновање пиксела оригиналног садржаја и излаза другог ефекта филтера помоћу неке врсте правила комбиновања.
Овде је важно напоменути да СВГ филтри раде у фиксном редоследу, тако да су повезани ланцима у низу. Када применимо тај филтер на наш садржај, феФлоод прво се покреће ефекат филтера, а затим феЦомпосите ефекат користи излаз из феФлоод као његов улаз. У случају феЦомпосите, користи оператор „ин“. То је правило комбинације које каже „направи слику из мог уноса користећи само пикселе који се налазе у оригиналном садржају“. Дакле, ствара се пресек у терминологији из математике. Резултат овог филтера је наша бело преплављена правоугаона слика прикривена било чиме на шта је примењен.
У овом случају добијамо маскирани резултат белог текста. Начин на који примењујемо овај филтер на наш веб садржај је коришћење ЦСС селектора за одабир садржаја на који желимо да утичемо. Пример овога може бити нешто попут:
.вхите {-вебкит-филтер: урл (#бела); филтер: урл (#бела); }
Ово би применило филтер на било шта са ЦСС класом „бело“. Наравно, ако бисмо то покушали да применимо на празну страницу, обојили бисмо бело на белу подлогу (не баш корисно), па додајте мало боје позадине да видимо шта ћемо добити:
.блуебг {бацкгроунд-цолор: лигхтблуе; } див цласс = ”блуебг”> х1 цласс = ”вхите”> БИЈЕЛИ СЈАЈНИ ФИЛТЕР / х1> / див>
Сада када смо прошли основне кораке за изградњу двостепеног филтера и примену на текстуални садржај наше веб странице, време је да додамо још неких ефеката.
Стварање замућеног ефекта
Да би наш текст заблистао, потребно је да зграбимо бели текст са ланца филтера изнад и да га замутимо. То ће постати основа за сјај око текста. Да бисмо креирали замућену верзију, користимо:
филтер ид = ”вхитеблур”> феФлоод поплава-боја = ”бела” /> феЦомпосите ин2 = ”СоурцеАлпха” оператор = ”ин” /> феГауссианБлур стдДевиатион = ”4” /> / филтер>
Као што видите, користили смо додатни ефекат - феГауссианБлур. Тај ефекат узима бели текст који смо креирали помоћу претходног филтера и чини га нејасним коришћењем овог означавања:
.бхитеблур {-вебкит-филтер: урл (#вхитеблур); филтер: урл (#белблур); } див цласс = ”блуебг”> х1 цласс = ”вхитеблур”> БЕЛИ СЈАЈНИ ФИЛТЕР / х1> / див>
Морамо побољшати замућени резултат како бисмо били мало светлији. Да бисмо то урадили, користићемо феЦомпонентТрансфер ефекат. То је ефекат филтера који нам омогућава да се на разне начине поиграмо са бојама и алфа каналима на нашој слици изван екрана.
Заслепљену слику ћемо улепшати модификовањем алфа канала. Дакле, наш ланац филтера изгледа овако:
филтер ид = ”вхитетрансфер”> феФлоод поплава-боја = ”бела” /> феЦомпосите ин2 = ”СоурцеАлпха” оператор = ”ин” /> феГауссианБлур стдДевиатион = ”4” /> феЦомпонентТрансфер> феФунцА типе = ”линеар” слопе = ”3 ”Интерцепт =” 0 ”/> / феЦомпонентТрансфер> / филтер>
Приметићете да смо користили феФунцА ефекат, који модификује алфа канал множењем његове вредности са три (аргумент нагиба).
Затим тај филтер примењујемо помоћу означавања као што је приказано доле:
вхитетрансфер {-вебкит-филтер: урл (#вхитетрансфер); филтер: урл (#вхитетрансфер); } див цласс = ”блуебг”> х1 цласс = ”вхитетрансфер”> БЕЛИ СЈАЈНИ ФИЛТЕР / х1> / див>
Све што треба да урадимо је да комбинујемо резултате нашег ефекта филтрирања са оригиналним текстом на који смо га применили помоћу феМерге ефекат филтера.
Коначна верзија нашег ланца филтера изгледа као:
филтер ид = ”вхитеглов”> феФлоод поплава-боја = ”бела” /> феЦомпосите ин2 = ”СоурцеАлпха” оператор = ”ин” /> феГауссианБлур стдДевиатион = ”4” /> феЦомпонентТрансфер> феФунцА типе = ”линеар” слопе = ”3 ”Интерцепт =” 0 ”/> / феЦомпонентТрансфер> феМерге> феМергеНоде /> феМергеНоде у =” СоурцеГрапхиц ”/> / феМерге> / филтер>
А онда то можемо применити на наше означавање:
.вхитеглов {-вебкит-филтер: урл (#вхитеглов); филтер: урл (# бели сјај); } див цласс = ”блуебг”> х1 цласс = ”вхитеглов”> БЕЛИ СЈАЈНИ ФИЛТЕР / х1> / див>
Изградња клесаног ефекта
Овај други пример користи читав низ ефеката филтера како би од нашег текстуалног садржаја створио ефекат клесаног 3Д изгледа. Ефекти СВГ филтера који се овде користе укључују случајни шум, морфологију, осветљење и још много тога. Не брините, звуче застрашујуће, али су заиста једноставни за употребу.
Начин на који овај филтер функционише је комбиновањем три функционална корака, од којих сваки користи низ различитих ефеката филтера. Да бисмо успели, једноставно радимо следеће:
- Конвертујте слику у „мапу налета“ (за више информација погледајте страницу на супротној страни).
- Створите рељефни изглед од нашег оригиналног текста.
- Направите сенку која побољшава наш 3Д изглед.
Израда мапе бумп-а
Мапе удараца користе се у 3Д играма. Замислите их као грубу текстуру попут платна или планинског ланца, где сваки пиксел представља различиту висину.
Да бисмо креирали мапу удараца, саставили смо читав низ ефеката филтера. Ево примера кода:
филтер ид = ”бумпс”> феТурбуленце типе = ”турбуленце” басеФрекуенци = ”0,1” нумОцтавес = ”2” ресулт = ”тектуре” /> феМерге ресулт = ”тектуреАндГрапхиц”> феМергеНоде /> феМергеНоде ин = ”СоурцеГрапхиц” /> / феМерге > феЦолорМатрик типе = ”луминанцеТоАлпха” ин = ”тектуре” ресулт = ”тектуреМап” /> феГауссианБлур ин = ”СоурцеАлпха” стдДевиатион = ”6” ресулт = ”блур” /> феДиффусеЛигхтинг ин = ”тектуреМап” сурфацеСцале = ”2” осветљење- цолор = ”вхите” диффусеЦонстант = ”1” ресулт = ”бацкгроундДифф”> феСпотЛигхт ид = ”спотЛигхт” к = ”50” и = ”50” з = ”150” поинтсАтКс = ”150” поинтсАтИ = ”150” поинтсАтЗ = ” 0 ”спецуларЕкпонент =” 8 ”/> / феДиффусеЛигхтинг> феДиффусеЛигхтинг ин =” блур ”сурфацеСцале =” 6 ”лигхтингцолор =” вхите ”диффусеЦонстант =” 1.2 ”ресулт =” форегроундДиффАлл ”> феДистантЛигхт ид =” ремотеЛигхт ”азимутх =” - 135 ”Елеватион =” 40 ”/> / феДиффусеЛигхтинг> феЦомпонентТрансфер> феФунцР типе =” гама ”амплитуда =” 1 ”експонент =” 3 ”оффсет =” 0 ”/> феФунцГ типе =” гама ”амплитуда =” 1 ”експонент =” 3 ”офсет =” 0 ”/> феФунцБ типе =” гама ”амплитуда =” 1 ”експонент =” 3 ”оффсет =” 0 ” /> / феЦомпонентТрансфер> феЦомпосите оператор = ”ин” ин2 = ”СоурцеАлпха” /> феЦонволвеМатрик ордер = ”3” кернелМатрик = ”0,0625 0,0625 0,0625 0,0625 0,5 0,0625 0,0625 0,0625 0,0625” резултат = ”форегроундДифф” /> / филтер>
Додали смо неколико нових грађевинских блокова: феТурбуленција, феЦолорМатрик, феДиффусеЛигхтинг и феСпотЛигхт. Тачни детаљи свих параметара ових филтера су мало изван овог упутства, али имаћете добру идеју како можете да подесите ефекте.
Покушајте да узмете овај филтер и примените га на следеће ознаке:
.бумпс {-вебкит-филтер: урл (#бумпс); филтер: урл (#бумпс); } див> х1> ИЗДЕЛАНИ ЕФЕКТ / х1> / див>
Стварање златног рељефног изгледа
Да бисмо направили лепу златно обојену верзију нашег стилизованог текста са лепим 3Д изгледом, користимо још неколико ефеката филтера помоћу феЦомпонентТрансфер ефекат заједно са још неким феЦомпосите и феБленд ефекти.
Тхе феБленд ефекат примењује режиме мешања боја који се користе у многим десктоп апликацијама као што су Пхотосхоп и Инксцапе, који омогућавају коришћење сложених ефеката мешања боја за све врсте лепих резултата. У случају златног филтера, започињемо са променом боје попуњавања оригиналног текста у златну помоћу ЦСС својства боје. Тада се пријављујемо феБленд помоћу „екрана“ и „множења“, што нам омогућава да комбинујемо боје из сваког слоја и помножимо вредности боја пиксела у свакој од улазних слика филтера. Код за генерисање златног рељефног изгледа доступан је за преузимање овде.
Прављење сенке
Коначно, како бисмо нашем стилизованом тексту дали заиста леп 3Д изглед, можемо створити сенку помоћу ефеката филтера. Да бисмо створили сенку коју користимо феМорфологија (који разређује или нагриза улазну слику), феГауссианБлур (што смо користили за пример сјаја), феОффсет (што помера средњу слику око нас) и наше поуздање феЦомпосите да све то опет састави.
Код ефекта филтра за падајућу сенку можете преузети овде. Затим применимо резултат на наше означавање:
.бумпс {-вебкит-филтер: урл (#бумпс); филтер: урл (#бумпс); } див цласс = ”бумпс”> х1> ИЗДЕЛАНИ ЕФЕКТ / х1> / див>
Оно што је сјајно у вези са ефектима филтера је што су ограничени само вашом маштом. Испробајте све блокове СВГ ефеката филтера и комбинујте их на било који начин да бисте креирали све врсте ланаца филтера које можете користити путем ЦСС-а.
Коришћење ЦСС филтера може вас издвојити из масе запањујућим, привлачним визуелним ефектима како бисте приметили вашу веб локацију.
Речи: Алекс Данило
Овај чланак се првобитно појавио у издању 250 магазина.
