Редактор на кодове
Буквено -цифровите кодове на използваните цветове
Уеб браузър
Етап 1
Ще започна със създаването на папка за този урок, която ще нарека „trucos_css„В него ще създам друго обаждане“css”, В тях ще съхраня файловете, които ще ми трябват.
Стъпка 2
Ще отида в моя редактор на кодове в този случай ще използвам скоби и ще продължа да създавам нов файл "index.html"Това, което ще запиша в корена на папката"tricks_css", Аз също ще създам файл"style.css„Това, което ще запиша в папката„ css “, създадена в етап 1.
Стъпка 3
В моя файл "index.html" ще напиша основната html структура и ще добавя препратка към таблицата със стилове "style.css„Това в предишната стъпка запишете в пътя“css / style.css”.
Код от index.html:
CSS трикове - градиенти
Стъпка 4
Във файла "index.html" ще включа новв който по -късно ще определя класа "градиент"Което ще напиша по -късно във файла"style.css”.
Кодът index.html ще изглежда така:
CSS трикове
Стъпка 5
Сега ще работя върху файла "style.css”, Ще започна с определяне на размера, който етикетът ще покрива , Ще задам ширина 100%, височина 100%, ще декларирам, че няма да има полета или подложки и ще ви кажа, че позицията му ще бъде абсолютна, така че да покрива общия размер на екрана.
Style.css код:
тяло {ширина: 100%; височина: 100%; марж: 0px; подложка: 0px; позиция: абсолютна; }
Стъпка 6
Продължаваме да редактираме нашия css, сега ще добавя класа "градиент"В него ще посоча, че трябва да се показва с височина 100% и равна ширина, ще напиша, че ще има фонов селектор, който ще съдържа свойството"линеен градиент ()Което работи по следния начин …
Вътре в скобите посочваме къде е насочен краят на нашия градиент и цветовете, които той ще показва от единия до другия край. Синтаксисът би бил нещо подобно:
фон: линеен градиент (посока, цвят-стоп1, цвят-стоп2, …);Където в позицията, наречена посока, ще определим посоката, която градиентът ще следва на екраналяво отгоре = наляво и нагоре
десен връх = надясно и нагоре
долу вдясно = надолу и надясно
долу вляво = надолу и наляво
долу вдясно = надолу и надясно, започвайки от горния ляв ъгъл
долу вляво = отдолу и отдясно, започвайки от горния десен ъгъл
горе вдясно = горе и дясно, започвайки от долния ляв ъгъл
горе вляво = отгоре и отляво, започвайки от долния десен ъгъл
Що се отнася до цветовете, можете да изберете тези, които предпочитате, в този случай ще направя градиент, който ще започне от бяло до черно през два нюанса на синьо.
Тогава нашият css код ще бъде следният:
тяло {ширина: 100%; височина: 100%; марж: 0px; подложка: 0px; позиция: абсолютна; }. градиент {ширина: 100%; височина: 100%; фон: линеен градиент (долу вдясно, # fff, # 00e2ff, # 00f, # 000); } Резултатът ще бъде следният.
Но както всичко на този свят, има и други начини да го направите много по-лесно и по-бързо и без да пишете много, можем да отидем в браузъра си и да потърсим следния уеб адрес http: //www.colorzill… radient-editor /
В него те ще намерят поредица от предварително дефинирани градиенти, които също могат да персонализират, ще трябва само да изберат един, да го настроят според предпочитанията си, ако желаят, да копират кода ccs, който е показан в дясната страна на екрана и поставете го в слоя "градиент", който вече сме създали, като замените това, което намираме написано в него в стъпка 6. Препоръчвам тази опция, защото я използвам особено и кодът, който ни дава, е готов за работа във всеки браузър.
След като копираме този код, ще го поставим в нашия css, оставяйки го както следва:
тяло {ширина: 100%; височина: 100%; марж: 0px; подложка: 0px; позиция: абсолютна; }. градиент {ширина: 100%; височина: 100%; фон: rgb (212,228,239); / * Стари браузъри * / фон: -moz-линеен градиент (отгоре, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6+ ))); / * Chrome, Safari4 + * / фон: -webkit-линеен градиент (отгоре, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / фон: -o-линеен градиент (отгоре, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / фон: -ms-линеен градиент (отгоре, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / фон: линеен градиент (до дъно, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } И резултатът в този случай ще бъде следният.
УвеличетеНадявам се да е полезно, за още трикове не забравяйте да ме последвате …
Ако този урок ви е харесал, не забравяйте да го оцените и ако имате въпроси или коментари, оставете ги по -долу, ще се радвам да ви отговоря. Поздрави … Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
