Нам понадобится
· Редактор кода
· Буквенно-цифровые коды используемых цветов
· Веб-браузер
Шаг 1
Я начну с создания папки для этого урока, которую я назову в ней «t rucos_css », я создам другую, называемую « css », в них я сохраню нужные мне файлы.
Шаг 2
Я зайду в свой редактор кода, в этом случае я буду использовать скобки и приступить к созданию нового файла « index.html », который я сохраню в корне папки « tricks_css », я также создам файл « style.css », который я сохраню в папке «Css» создан в шаге 1 .
Шаг 3
В моем файле «index.html» я напишу основную структуру html и добавлю ссылку на таблицу стилей « style.css », которую на предыдущем шаге я сохранил в пути « css / style.css ».
Index.html code:
CSS Tricks - Градиенты
Шаг 4
В файл «index.html» я включу новый
внутри которого я позже назначу класс « градиент », который позже напишу в файле « style.css ».
Код index.html будет выглядеть так:
CSS трюкиШаг 5
Теперь я буду работать с файлом « style.css », начну с определения размера, который будет покрывать метка , Я установлю ширину 100%, высоту 100%, я объявлю, что у него не будет полей или отступов, и я скажу вам, что его позиция будет абсолютной, чтобы покрыть общий размер экрана.
Код Style.css:тело {ширина: 100%; высота: 100%; поле: 0px; отступы: 0px; положение: абсолютное; }Шаг 6
Мы продолжаем редактировать наш CSS, теперь я добавлю в него класс « градиент », указывающий, что он должен быть показан с высотой 100% и равной шириной, я напишу, что у него будет селектор фона или фон, который будет содержать свойство « linear-градиент () » который работает следующим образом
В скобках мы указываем, куда направлен конец нашего градиента и цвета, которые он будет показывать от одного конца к другому. Синтаксис будет примерно таким:фон: линейный градиент (направление, цвет-стоп1, цвет-стоп2, ...);Где в позиции, называемой направлением, мы определим направление, по которому будет следовать градиент на экране.
левый верх = влево и вверх
справа сверху = справа и сверху
справа внизу = снизу и справа
внизу слева = внизу слева
справа внизу = снизу и справа, начиная с верхнего левого
внизу слева = снизу и справа, начиная с верхнего правого
вверху справа = сверху и справа, начиная с нижнего левого
вверху слева = вверх и влево, начиная снизу справа
Что касается цветов, вы можете выбрать те, которые вы выбираете, в этом случае я сделаю градиент, который будет начинаться от белого до черного через два оттенка синего.
Наш код CSS будет выглядеть следующим образом:тело {ширина: 100%; высота: 100%; поле: 0px; отступы: 0px; положение: абсолютное; }. Градиент {ширина: 100%; высота: 100%; фон: линейный градиент (справа внизу, # fff, # 00e2ff, # 00f, # 000); }Результат будет следующим.
Но, как и все остальное в этом мире, есть другие способы сделать это намного проще и быстрее, и, не слишком много писать, мы можем зайти в наш браузер и найти следующий веб-адрес //www.colorzill...radient-editor/
В нем вы найдете серию градиентов, уже предопределенных и которые вы также можете настроить, вам нужно будет выбрать только один, настроить его по своему усмотрению, скопировать код ccs, показанный в правой части экрана, и вставить его в «градиентный» слой, который мы уже создали, заменив то, что мы нашли написанным на нем в шаге 6 . Я рекомендую эту опцию, потому что, в частности, использование и код, который вы нам даете, готовы к работе в любом браузере.
После копирования этого кода мы вставим его в наш CSS, оставив его следующим образом:тело {ширина: 100%; высота: 100%; поле: 0px; отступы: 0px; положение: абсолютное; }. Градиент {ширина: 100%; высота: 100%; справочная информация: RGB (212 228 239); / * Старые браузеры * / background: -moz-linear-Gradient (top, rgba (212, 228, 239.1) 0%, rgba (134, 174, 204.1) 64%); / * FF3.6 + * / background: -webkit-Градиент (линейный, слева вверху, слева внизу, цветовой стоп (0%, rgba (212, 228, 239.1)), color-stop (64%, rgba (134, 174, 204.1) ))); / * Chrome, Safari4 + * / background: -webkit-linear-Gradient (вверху, rgba (212, 228, 239.1) 0%, rgba (134, 174, 204.1) 64%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-Градиент (вверху, rgba (212, 228, 239.1) 0%, rgba (134, 174, 204.1) 64%); / * Opera 11.10+ * / background: -ms-linear-Gradient (top, rgba (212, 228, 239.1) 0%, rgba (134, 174, 204.1) 64%); / * IE10 + * / background: линейный градиент (снизу, rgba (212, 228, 239.1) 0%, rgba (134, 174, 204.1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# d4e4ef", endColorstr = "# 86aecc", GradientType = 0); }И результат в этом случае будет следующим.
Я надеюсь, что вы найдете это полезным, для более хитрости не забудьте следовать за мной ...
Если вам понравился этот урок, не забудьте оценить его, и если у вас есть вопросы или комментарии, оставьте их ниже, я буду рад ответить на них. С уважением ...
- 0
СТАТЬИ