Home-theater-designers
Ако сте на интернету дуже од неколико минута, велике су шансе да сте наишли на ЦСС градијент. Својство ЦСС позадине може се користити за креирање низа различитих стилова, а један од најинтригантнијих типова је оно што може да уради са вредношћу градијента.
Познавање дизајна и стварања различитих ЦСС градијената предност је сваког дизајнера или програмера софтвера. Из овог чланка ћете научити све што требате знати да бисте почели укључивати ЦСС градијенте у своје пројекте.
Шта је ЦСС градијент?
ЦСС градијент је у суштини комбинација две или више боја које глатко прелазе из једне у другу. Прелазно стање ЦСС градијента зависи од врсте градијента који се користи. Постоје два главна типа нагиба који се обично користе у дизајну софтвера: линеарни и радијални.
Међутим, постоји трећа врста нагиба која је мање популарна и позната као стожасти нагиб.
Синтакса ЦСС градијената
Background-image: gradient-type (direction, color1, color2);
ЦСС градијент треба доделити ЦСС својству слике у позадини. Тип градијента може бити један од неколико; линеарни градијент, радијални градијент или конусни градијент. Након типа градијента отварају се и затварају заграде које садрже прелазни смер градијента, као и боје које треба укључити у градијент.
Повезан: Како поставити позадинску слику у ЦСС -у
Горњи пример приказује две боје, али градијент може садржати неколико различитих боја. Једини захтев је да је свака боја на листи одвојена зарезом.
Шта је линеарни градијент?
Линеарни градијент је најпопуларнији ЦСС градијент. Он ствара хоризонтални, вертикални или дијагонални прелазни градијент користећи две или више боја.
Пример линеарног градијента ЦСС
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Горњи код ће произвести следећи ЦСС градијент:
Постоји једна главна компонента синтаксе градијента изостављена из горњег примера. Ова компонента је прелазни смер градијента и изостављена је јер је подразумевано поравнање линеарног градијента вертикално (одозго према доле); то је жељени излаз у овом примеру.
Горњи код даје исти резултат као и следећи ред кода. Једина разлика између ова два је смерни део кода.
Користећи пример доњег линеарног градијента
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Као што можете видети из излаза, горњи код ствара градијент који почиње плавом бојом на врху, а затим полако прелази у наранџасту на дну. Ако желите да обрнете редослед боја, једноставно бисте могли да замените до дна са На врх и ово ће обрнути смер градијента, производећи следећи излаз:
Слично вертикалном поравнању, хоризонтално поравнање градијента може се постићи употребом два скупа кључних речи за смер: оставити и на десној страни , који ће произвести следеће резултате.
како доћи до интернета код куће
Дијагонални линеарни градијент
Могуће је постићи дијагонални линеарни градијентни прелаз у било ком смеру линеарног градијента. Постоје само четири посебне листе кључних речи које морате знати да бисте то омогућили.
- Доле десно
- Доле лево
- Горе десно
- Горе лево
Користећи пример дијагоналног линеарног градијента
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Горњи пример производи следеће резултате:
Као што видите из горњег излаза, линеарни градијент прелази у дијагоналном смеру крећући се од горњег левог до доњег десног дела градијента.
Вишебојни линеарни градијент
Линеарни градијент може имати две или више боја, али како више боја изгледа у градијенту? Вишебојни линеарни градијент у боји зависи од свог смера. Они који прелазе у хоризонталном смеру имаће сваку нову боју која се појављује лево или десно од линеарног градијента, у зависности од тачног смера линеарног градијента.
Пример вишебојног линеарног градијента
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Горњи ред кода ће произвести следеће резултате:
Као што видите, свака нова боја додаје се десно од градијента, стварајући оно што се на крају претвара у дугу. Исти излаз може се постићи у вертикалном правцу; међутим, специфичан распоред боја на линеарном градијенту зависиће од кључне речи о вертикалном смеру (горе или доле).
Шта је радијални градијент?
Радијални градијент ствара спирални градијент од две или више боја које подразумевано почињу од центра. Тамо где линеарни градијент производи равни градијент који тече вертикално или хоризонтално, радијални градијент производи кружни градијент који тече од центра према спољним ивицама.
Користећи пример радијалног градијента
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Горњи ред кода ће произвести следеће резултате:
Промена радијалног центра нагиба
Подразумевано радијални градијент почиње у центру градијента; међутим, могуће је променити тачку порекла увођењем неколико кључних речи.
креирање УСБ погона за покретање из исо -а
Пример промене почетног положаја радијалног нагиба
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Горњи ред кода ће произвести следеће резултате:
Као што видите из излаза изнад, градијент сада почиње од горњег десног угла уместо од центра. Ова промена је могућа због укључивања кључне речи Горе десно у горњем коду. Следећа листа кључних речи се такође може користити за промену тачке почетка радијалног градијента:
- Горе лево
- Доле десно
- Доњи леви
Вишебојни радијални градијенти
Као и линеарни градијент, радијални градијент такође може користити две више боја, главна разлика је у томе што тамо где линеарни градијент додаје градијент у правој линији, радијални градијент додаје нове боје на спољној ивици.
Пример вишебојног радијалног градијента
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Горњи ред кода ће произвести следеће резултате:
Прилагођавање прелива
До сада сте видели како да промените правац и средишњу тачку нагиба, али нисте видели како да прилагодите нагиб. Прилагођавање градијента може звучати као много посла, али када схватите основе стварања ЦСС градијента позадине, следећи очигледан корак је учење како да учините ЦСС градијенте јединственијим.
не могу избрисати датотеку у употреби
Подразумевано, боје у градијенту заузимају равномерно распоређену количину простора, при чему свака боја глатко прелази у ону иза ње. Дакле, ако се две боје комбинују да формирају градијент, свака боја ће заузети половину расположивог простора док прелази са једне на другу. Ако се комбинују три боје, свака боја ће заузети трећину простора који је доступан.
Помоћу прилагођеног градијента можете дефинисати количину простора коју ће боја заузети у градијенту тако што ћете му изричито доделити положај заустављања боје .
Прилагођавање примера линеарног градијента 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Горњи ред кода ће произвести следеће резултате:
Горњи излаз приказује другу боју у линеарном градијенту која се зауставља на тачки од 30% прве боје у градијенту, уместо њеног уобичајеног положаја, а пошто је друга боја такође коначна боја у градијенту, она се природно протеже до краја .
Ако поставите 30% у горњи код на крај прве боје, ствари би требале бити јасније.
Прилагођавање примера линеарног градијента 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Горњи код ће произвести следећи излаз.
Горњи излаз јасно приказује прву боју у градијенту која се зауставља на 30% тачке друге боје у градијенту. Овај пример, заједно са горњим, требало би да вам олакша разумевање прилагођавања заустављања боја.
Прилагођавање радијалног нагиба врши се на исти начин као и линеарни нагиб. Једина ствар коју требате учинити да бисте постигли исте горе наведене резултате у радијалном градијенту је промјена врсте и смјера градијента.
Креирање ЦСС градијената никада није било лакше
Овај водич пружа вам алате за идентификацију и креирање линеарних и радијалних нагиба. Ако сте дошли до ове тачке, научили сте како да промените правац и центар нагиба. Осим тога, сада имате вештине да прилагодите ЦСС градијенте и креирате јединствене прелазе у позадини.
Међутим, ако не желите да идете директно у стварање нових и јединствених нагиба, можете почети стварањем неколико већ постојећих сјајних изгледа.
Објави Објави Твеет Емаил 27 Стилски примери градијента у позадини ЦСС -аЈеднобојне боје су тако прошле године. Градијенти су у току! Али како их створити у ЦСС -у?
Прочитајте следеће Повезане теме- Програмирање
- Веб Девелопмент
- Веб дизајн
- ЦСС
Кадеисха Кеан је програмер софтвера и писац техничке/технологије. Она има изразиту способност да поједностави неке од најсложенијих технолошких концепата; производњу материјала који може лако разумети сваки почетник у технологији. Одушевљена је писањем, развојем занимљивог софтвера и путовањем по свету (кроз документарне филмове).
Више од Кадеисха КеанПретплатите се на наш билтен
Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили