Креирајте градијенте помоћу ЦСС -а

Ми требамо
Уређивач кода
Алфанумерички кодови боја које треба користити
Веб прегледач

Корак 1

Почећу стварањем фасцикле за овај водич коју ћу назвати „труцос_цсс"Унутар њега ћу направити још један позив"цсс”, У њима ћу чувати датотеке које ће ми бити потребне.

Корак 2

Отићи ћу у уређивач кода, у овом случају ћу користити заграде и наставити са креирањем нове датотеке "индек.хтмл"То ћу сачувати у корену фасцикле"трицкс_цсс", Такође ћу направити датотеку"стиле.цсс"То ћу сачувати у фасцикли" цсс "креираној у корак 1.

Корак 3

У моју датотеку "индек.хтмл" написаћу основну хтмл структуру и додати референцу на листу стилова "стиле.цсс"То у претходном кораку сачувај на путањи"цсс / стиле.цсс”.
Код из индек.хтмл:

 ЦСС трикови - градијенти 

Корак 4

У датотеку "индек.хтмл" ћу укључити новуу оквиру којег ћу касније доделити разред "градијент„Што ћу касније записати у датотеку“стиле.цсс”.
Код индек.хтмл ће изгледати овако:

 ЦСС трикови

Корак 5

Сада ћу радити на датотеци "стиле.цсс”, Почећу дефинисањем величине коју ће ознака покрити , Поставићу ширину од 100%, висину од 100%, изјавићу да неће имати маргине или подлоге и рећи ћу вам да ће њен положај бити апсолутан тако да покрива укупну величину екрана.
Стиле.цсс код:

 тело {ширина: 100%; висина: 100%; маргина: 0пк; паддинг: 0пк; положај: апсолутан; }

Корак 6

Настављамо са уређивањем нашег цсс -а, сада ћу додати разред "градијент"У њему ћу назначити да би требало да буде приказан са висином од 100% и једнаком ширином, написаћу да ће имати селектор позадине који ће садржати својство"линеарни градијент ()Што функционише на следећи начин …
Унутар заграда означавамо где је крај нашег градијента усмерен и боје које ће он приказивати с једног краја на други. Синтакса би била отприлике оваква:

 позадина: линеарни градијент (смер, стоп-боја1, боја-стоп2, …); 

Тамо где ћемо у положају који се назива правац дефинисати правац који ће градијент пратити на екранулеви врх = лево и горе
десни врх = десно и горе
доле десно = надоле и надесно
Доњи леви = надоле и налево
доле десно = надоле и десно почевши од горњег левог угла
доле лево = испод и десно почевши од горњег десног угла
горе десно = горе и десно почевши од доњег левог
горе лево = горе и лево почевши од доњег десног угла
Што се тиче боја, можете одабрати оне које желите, у овом случају ћу направити градијент који ће почети од беле до црне до две нијансе плаве.
Наш цсс код би тада био следећи:

 тело {ширина: 100%; висина: 100%; маргина: 0пк; паддинг: 0пк; положај: апсолутан; } .градиент {видтх: 100%; висина: 100%; позадина: линеарни градијент (доле десно, # ффф, # 00е2фф, # 00ф, # 000); } 

Резултат би био следећи.

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

У њему ће пронаћи низ унапред дефинисаних нагиба и које такође могу прилагодити, мораће само да изаберу један, прилагоде га својим жељама ако желе, копирају ццс код који је приказан на десној страни екрана и налепите га унутар слоја „градијент“ који смо већ креирали заменом онога што нађемо записано у корак 6. Ову опцију препоручујем јер је посебно користим и код који нам даје је спреман за рад у било ком прегледачу.

Након копирања овог кода залепићемо га у наш цсс, остављајући га на следећи начин:

 тело {ширина: 100%; висина: 100%; маргина: 0пк; паддинг: 0пк; положај: апсолутан; } .градиент {видтх: 100%; висина: 100%; позадина: ргб (212,228,239); / * Стари прегледачи * / позадина: -моз-линеарни градијент (врх, ргба (212,228,239,1) 0%, ргба (134,174,204,1) 64%); / * ФФ3.6 + * / позадина: -вебкит-градијент (линеарно, лево горе, лево дно, заустављање боје (0%, ргба (212,228,239,1)), заустављање боје (64%, ргба (134,174,204,1 ))); / * Цхроме, Сафари4 + * / позадина: -вебкит-линеарни-градијент (врх, ргба (212,228,239,1) 0%, ргба (134,174,204,1) 64%); / * Цхроме10 +, Сафари5.1 + * / позадина: -о-линеарни градијент (врх, ргба (212,228,239,1) 0%, ргба (134,174,204,1) 64%); / * Опера 11.10+ * / позадина: -мс-линеарни градијент (врх, ргба (212,228,239,1) 0%, ргба (134,174,204,1) 64%); / * ИЕ10 + * / позадина: линеарни градијент (до дна, ргба (212,228,239,1) 0%, ргба (134,174,204,1) 64%); / * В3Ц * / филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# д4е4еф', ендЦолорстр = '# 86аецц', ГрадиентТипе = 0); } 

А резултат у овом случају би био следећи.
ЕНЛАРГЕ
Надам се да ће бити корисно, јер за више трикова не заборавите да ме пратите …
Ако вам се допао овај водич, не заборавите га оцијенити, а ако имате питања или коментаре оставите их испод, радо ћу вам одговорити. Поздрав … Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен