В данном уроке будут разбираться методы стилизации элементов с помощью CSS. В первой части будут представлены основные цветовые форматы и рассмотрены способы их применения в CSS.
Также мы немного разработали такое важное свойство HTML-элементов, как - цвет. Ведь профессиональные сайты часто используют различные сочетания цветов, чтобы создать визуально привлекательный пользовательский интерфейс (UX).
В первой части этого урока мы узнаем, как использовать CSS для создания разноцветных и привлекательных веб-страниц.
Передний план и фон
- С помощью CSS свойства
colorможно изменять цвет переднего плана. - Свойство CSS
background-colorизменяет цвет фона.
h1 {
color: Red;
background-color: Blue;
}
Именованные цвета
К счастью, нам не обязательно их все запоминать! В Интернете доступно множество ресурсов, на которых представлены все именованные цвета в CSS.
Формат цвета - RGB
Формат RGB (Red, Green, Blue) работает, смешивая разные количества красного (R), зеленого (G) и синего (B). Каждый цвет (R, G или B) может принимать 1 из 256 возможных значений (от 0 до 255). Это дает 16 777 216 вариантов.
Чтобы при стилизации использовать формат RGB, нам необходимо указать значение rgb ().
h1 {
color: rgb(123, 20, 233);
background-color: rgb(99, 21, 127);
}
В Интернете есть множество ресурсов, известных как подборщики цветов, которые позволяют нам подобрать разные значения RGB.
Формат цвета - Hex
h1 {
color: #09AA34;
}
Если шестнадцатеричный цветовой код состоит из одинаковых символов, его размер может быть сокращен, например:
h1 {
color: #FFFFFF;
color: #FFF;
}
h2 {
color: #AA33BB;
color: #A3B;
}
Формат цвета HSL
Насыщенность - количество серого в заданном цвете, которое измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, а 100% -
максимальное значение насыщенности.
Светлота задает яркость цвета и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее. Крайнее значение 0% соответствуют чёрному цвету, а 100% - белому цвету.
Как видно из примера ниже, использование в CSS цветовой схемы HSL очень похоже на применение RGB.
h1 {
color: hsl(182, 20%, 50%);
}
Поскольку цветовая схема HSL реализована в новой спецификации CSS3, старые браузеры могут ее не поддерживать.
Форматы цвета - RGBA и HSLA
Пример применения формата RGBA:
h1 {
color: rgba(123, 88, 9, 0.5);
}
Пример применения формата HSLA:
h1 {
color: hsla(239, 45%, 22%, 0.4);
}
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
- Свойство CSS
colorизменяет цвет переднего плана (фактический цвет элемента). - Свойство CSS
background-colorизменяет цвет фона. - Именованные цвета представлены в 147 возможных вариантах.
- Форматы RGB и Heх предлагают более 16 миллионов вариантов различных цветов.
- Формат HSL - новый способ определения цветов в CSS3.
- Форматы RGBA и HSLA позволяют задать прозрачность элемента.
Свое мнение и личные впечатления
Оказывается их количество, применяемых в CSS - более 16 миллионов и их можно указывать в различных форматах. Также порадовала возможность задавать прозрачность цвета с помощью alpha-канала.
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
Конспект подготовлен для Академии Голоса @academy.
Дважды проходил курс в htmlacademy, понравилось. Без практики все выветривается. Собираюсь еще раз вернуться, но пройти более основательно. Надеюсь, добавились новые уроки в свете последних веяний.
Я когда эту часть проходил, мне на сайте выскакивало сообщение, что скоро будет новый курс по HTML/CSS.
Ну вы закрутили-фиг-раскрутишь! Не проще сказать:
?
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
knopki, gidlark, natalia, lumia, tristamoff, rusalka, orezaku, stranniksenya, vika-teplo, dimas102, dim447, smartell, alessandarus
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!
Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой "!нехочу"
Цвета это по моей части
Но сложновато как то все))