Программирование с нуля с чего начать? Web разработка Урок 21 Цвета в CSS

Автор Ivan Samoilov
Программирование с нуля   с чего начать? Web разработка  Урок 21 Цвета в CSS

в этой лекции мы подробнее поговорим о таком свойства CSS как Color цвет.

Мы с вами уже научились устанавливать цвет при помощи обозначение цвета текстом названием Green Red Blue и так далее предыдущем задании должны были найти информацию в интернете. Какими способами отражаются отображаются цвета CSS. Давайте погуляем теперь вместе с Colors names.

Давайте Сначала посмотрим название цветов и его тут вот есть страничка 147 Colors и на ней отображается отображаются цвета которые можно устанавливать при помощи их названий то есть вот этот цвет на который я навел мышку.

Аква этот этот aliceblue этот. Аквамарин Ну и так далее здесь перечислены все эти названия цветов которые существуют для отображения. Все с этого достаточно большое количество цветов, но есть один нюанс во-первых очень сложно запомнить все на этих цветов, а во-вторых, что например если вам понадобится какой-то оттенок цвета которого нет здесь, что же, тогда ведь очень часто дизайнеры предоставляют макета веб-страниц на уже установлено цвета — это могут быть самые различные оттенки как же воспроизвести — это на веб-странице — это можно сделать при помощи шестнадцатеричных кодов. Возможно вы уже слышали что-то о разных системах счисления например вся информация в компьютере при помощи двоичной системы счисления при помощи нулей и единиц. Мы в обычной жизни пользуемся десятичной системой счислений то есть система счисления которое состоит из цифр от 0 до 9 из 10 чисел шестнадцатеричная система счисления содержит 16 символов помимо цифр до 9:00 она использует ещё 6 латинских букв A B C D E F. Если вы хотите больше узнать о том числа представляются при помощи шестнадцатеричная система счисления. Вы можете посмотреть информацию об этой системе счисления. А так и также от других в я вам сейчас продемонстрирую как применять эту систему счисления сначала указывается хэштег и далее мы должны ввести шестнадцатеричная шестизначное число то есть мы должны указать значение какое-то какое же значение здесь ввести для того чтобы определить шестнадцатеричное значение цвета есть удобный инструмент colorzilla плагин такой для. Гугл Хрома существуют и другие программы, но этот плагин Google Chrome очень удобен. Я его использую его можно найти в интернете набрать colorzilla и перейти вот на эту страничку colorzilla Chrome здесь можно установить этот плагин и у вас отобразится такая пипетка в правом верхнем углу браузера и далее как ним пользоваться нажимаем на пипетку и вот здесь вот есть Option Color Picker нажимаем на колорпикер и выдаётся такая вот табличка на которой мы можем выбрать вот здесь вот свет. Вам нужен из всего. Спектра любой цвет по желанию к примеру пусть будет. Вот такой какой-то оттенок оранжевого мы можем перемещать курсор и выбирать оттенок нам нужны пусть будет. Вот такой например оттенок и вот здесь вот после значка решетки хэштега указан шестнадцатеричный код этого цвета мы можем скопировать — это число шестнадцатеричное и вставить в наш сес и теперь если мы сохраним обновим тот свет применяется к нашей странице чем ещё хорошая тем, что мы можем выбрать любой цвет с. Любой веб-страницы который нам понравился например мы можем выбрать с этой странице. Здесь много цветов отображена если мы нажмем на вот эту верхнюю опцию Pick Color From page выбрать цвета страницы появляется вот такая панель наверху. И если мы перемещаем курсор по экрану то меняется цвет вот в этом квадрате и здесь указывается его шестнадцатеричное значение и теперь если мы нажмем например на вот этом цвете тут написано цвет скопирован и мы можем его переводчик. Веном И он теперь отображается у нас на странице, что же значат эти цифры этими шестнадцатеричными цифрами кодируется три составляющих цвета первые две цифры кодируют красный цвет спектра вторые две цифры кодируют зелёный цвет спектры и ее две цифры кодируют синий цвет спектра Red Green и Blue RGB и поэтому можно можно вместо шестнадцатеричного значение цвета установить его RGB значение которое отображает тоже самое, но закодирована при помощи вот этих трёх чисел десятичной системы счисления то есть мы можем скопировать. Вот этот текст вставить сюда и как вы видите ничего не поменялось цвет тот же. Либо мы можем поменять цвет и также скопировать RGB вставить сюда и цвет поменяется. То есть можно использовать либо шестнадцатеричное значение либо вот такое RGB значение цвета. Существует еще один способ отображения цвета которые добавляют прозрачность цвета он похож RGB, но здесь добавляется ещё буква, а рыбы — это значит Red Green Blue и альфа-альфа — это свойство которое обозначает не прозрачность цвета и здесь можно в четвёртом параметрам указывать альфа если мы укажем к примеру 0,5. Альфа Это значит, что цвет станет в половину прозрачном. Давайте сохраним и посмотрим и вы видите цвет стал прозрачным если мы сделаем здесь 0,2 то цвет стал. Почти совсем прозрачным. И если мы выставим здесь 0,9 фото цвет стал почти полностью непрозрачном. Ну и максимально можно выставить единицу цвет становится полностью не прозрачен или минимально 0 и цвет будет полностью прозрачен то есть ничего не будет видно.

0 комментариев
0

Читайте также