Стилизовати елементе веб странице са ЦСС позадинским градијентом

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

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

Шта је ЦСС градијент?

ЦСС градијент је у основи комбинација две или више боја које глатко прелазе из једне у другу. Прелазно стање ЦСС градијента зависи од врсте градијента који се користи. Постоје две главне врсте градијената које се обично користе у дизајну софтвера: линеарни и радијални.

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

Синтакса ЦСС градијената

Слика позадине: тип градијента (правац, боја1, боја2);

ЦСС градијент треба доделити својству ЦСС позадинске слике. Тип градијента може бити један од неколико; линеарни градијент, радијални градијент или конусни градијент. Тип градијента прате заграде за отварање и затварање које садрже прелазни правац градијента, као и боје које ће бити укључене у градијент.

Повезан: Како поставити позадинску слику у ЦСС

Горњи пример приказује две боје, али градијент може садржати неколико различитих боја. Једини захтев је да је свака боја на листи одвојена зарезом.

Шта је линеарни градијент?

Линеарни градијент је најпопуларнији ЦСС градијент. Ствара хоризонтални, вертикални или дијагонални прелазни градијент користећи две или више боја.

Пример ЦСС линеарног градијента

Слика позадине: линеарни градијент (# 00А4ЦЦФФ, # Ф95700ФФ);

Горњи код ће произвести следећи ЦСС градијент:

Из горњег примера изостављена је једна главна компонента синтаксе градијента. Ова компонента је прелазни правац градијента и изостављена је јер је подразумевано поравнање линеарног градијента вертикално (од врха до дна); то је жељени излаз у овом примеру.

Горњи код даје исти резултат као и следећи ред кода. Једина разлика између њих је одељак смера кода.

Коришћење примера доњег линеарног градијента

Слика позадине: линеарни градијент (до дна, # 00А4ЦЦФФ, # Ф95700ФФ);

Као што видите из резултата, горњи код ствара градијент који почиње плавом бојом на врху, а затим полако прелази у наранџасту боју дна. Ако сте желели да преокренете редослед боја, једноставно можете заменити знак до дна са На врх и ово ће окренути смер градијента, дајући следећи излаз:

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

Дијагонални линеарни градијент

Могуће је постићи дијагонални линеарни градијентни прелаз у било ком смеру линеарног градијента. Постоје само четири одређене листе кључних речи које требате знати да бисте то омогућили.

• Доле десно
• Доле лево
• Горе десно
• Горе лево

Коришћење примера дијагоналног линеарног градијента

Слика позадине: линеарни градијент (доле десно, # 00А4ЦЦФФ, # Ф95700ФФ);

Горњи пример даје следећи излаз:

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

Вишебојни линеарни градијент

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

Пример вишебојног линеарног градијента

Слика позадине: линеарни градијент (десно, # 00А4ЦЦФФ, # Ф95700ФФ, # е2е223, # 2727е2, # 19ад19);

Линија кода горе ће дати следећи излаз:

Као што видите, свака нова боја се додаје с десне стране градијента, стварајући оно што се на крају претвара у дугу. Исти излаз се може постићи у вертикалном смеру; међутим, одређени распоред боја на линеарном градијенту зависиће од кључне речи вертикалног смера (горе или доле).

Шта је радијални градијент?

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

Користећи пример радијалног градијента

Слика позадине: радијални градијент (круг, # 00А4ЦЦФФ, # Ф95700ФФ);

Линија кода горе ће дати следећи излаз:

Промена центра радијалног градијента

Подразумевано радијални градијент почиње у центру градијента; међутим, могуће је променити исходиште увођењем неколико кључних речи.

Промена примера почетне позиције радијалног градијента

Слика позадине: радијални градијент (круг горе десно, # 00А4ЦЦФФ, # Ф95700ФФ);

Линија кода горе ће дати следећи излаз:

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

• Горе лево
• Доле десно
• Доњи леви

Вишебојни радијални градијенти

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

Пример разнобојног радијалног градијента

Слика позадине: радијални градијент (круг, # 00А4ЦЦФФ, # Ф95700ФФ, # е2е223, # 2727е2, # 19ад19);

Линија кода горе ће дати следећи излаз:

Прилагођавање градијената

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

Подразумевано, боје у градијенту заузимају равномерно распоређену количину простора при чему свака боја глатко прелази у ону после ње. Дакле, ако се две боје комбинују у један градијент, свака боја ће заузимати половину расположивог простора док прелази из једне у другу. Ако се комбинују три боје, свака боја заузимаће трећину расположивог простора.

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

Пример прилагођавања линеарног градијента 1

Слика позадине: линеарни градијент (десно, # 00А4ЦЦФФ, # Ф95700ФФ 30%);

Линија кода горе ће дати следећи излаз:

Горњи излаз приказује другу боју у линеарном градијенту која се зауставља на тачки од 30% прве боје у градијенту, уместо свог уобичајеног положаја, и зато што је друга боја уједно и завршна боја у градијенту, она се природно протеже на крај.

Ако бисте 30% у горњи код ставили на крај прве боје, ствари би требале постати јасније.

Пример прилагођавања линеарног градијента 2

Слика позадине: линеарни градијент (десно, # 00А4ЦЦФФ 30%, # Ф95700ФФ);

Горњи код ће произвести следећи излаз.

Излаз изнад јасно приказује прву боју у градијенту која се зауставила на тачки од 30% друге боје у градијенту. Овај пример заједно са горе наведеним требало би да вам олакша разумевање прилагођавања заустављања боја.

Прилагођавање радијалног градијента врши се на исти начин као и линеарни градијент. Једина ствар коју треба да урадите да бисте постигли исте резултате изнад у радијалном градијенту је да промените тип и смер градијента.

Стварање ЦСС градијената никада није било једноставније

Овај водич вам пружа алате за идентификовање и стварање линеарних и радијалних градијената. Ако сте стигли до ове тачке, научили сте како да промените смер и средиште градијента. Поред тога, сада имате вештине за прилагођавање ЦСС градијената и стварање јединствених градијената позадине.

Међутим, ако не желите да идете директно у стварање нових и јединствених градијената, можете започети стварањем неких већ постојећих сјајних изгледа.

27 Стилски примери ЦСС позадинског градијента

Чврсте боје су прошле године. Градијенти су ин! Али како их креирати у ЦСС-у?

Прочитајте следеће

О аутору

Проширите да бисте прочитали целу причу