| Kosten | Среда, 07 Февраля 2018, 18:07 | Сообщение 1 |
| Сегодня мы поговорим о цветах в CSS, так как есть много цветовых спецификаций и мы будем говорить об их истории, о том, что они означают и как их использовать. Существует много разных сценариев, в которых вам нужно будет определить цвет в вашем CSS, это вероятно чаще всего происходит с цветом или цветом фона, но безусловно используется и для других. Определение цветовых значений, это легкая часть, но решение о том как это сделать может иногда быть сложным, потому что существует множество различных способов определения значения цвета с помощью CSS. Вот все ваши варианты:
RGB
Позвольте мне начать с синтаксиса RGB, поскольку это самая фундаментальная вещь для понимания, чтобы понять, как другие обозначения, такие как шестнадцатеричная работа.
Что такое RGB?
Как я сказал выше, RGB означает красный, зеленый и синий. Помните, когда вы были маленьким ребенком и рисовали какой-то дешевой акварелью? Ну, это одно и то же, за исключением того, что цвета ведут себя немного по-другому на экране и на бумаге.
Предопределенные значения имени
Большинство людей не используют предопределенные значения имени для определения цвета в своем CSS, потому что в лексиконе CSS имеется только около 140 предопределенных цветов - вряд ли будет достаточно креативным в ваших проектах.
Цветовые значения HEX
Вероятно, это самый распространенный из них. Это шесть (иногда три, если все символы одинаковые) символы (цифры или буквы), которым предшествует символ #, и поддерживается всеми основными браузерами.
Код h1{
color: #00ff00; /* green */
}
Цветовые значения RGB и RGBA
Цвет RGB определяется количеством яркости красного, зеленого и синего цветов. Синтаксис выглядит так: rgb (красный, зеленый, синий). Поэтому каждый параметр в круглой скобке представляет интенсивность каждого конкретного цвета.
RGBA совпадает с rgb, за исключением добавленного параметра «a», который обозначает альфу. Альфа представляет непрозрачность цвета и может быть числом от 0 до 1. Поэтому, если .5 используется как параметр «a», сам цвет будет только частично непрозрачным. Это часто используется при попытке сделать цвет фона определенного объекта слегка прозрачным, чтобы пользователь мог видеть его.
Код h1{
color:rgb(0, 255, 0); /* green */
}
h2{
color:rgba(0, 255, 0, 1); /* green */
}
Цвета HSL / HSLA
Цвета HSL определяются количеством оттенков, насыщенности и легкости в цвете. Синтаксис, похожий на RGB, - hsl оттенок, насыщенность, легкость. Также, как и RGB, есть возможность включить альфа значение, что служит цели сохранения, так как значение альфа для rgba. Синтаксис для этого: hsla - оттенок, насыщенность, легкость, альфа.
Код h1{
color: hsl(120, 100%, 50%); /* green */
}
h2{
color: hsla(120, 100%, 50%, 1); /* green */
}
Вывод:
Существует множество вариантов применения цвета. Эта гибкость позволяет создавать веб сайты, которые выделяются из соревнований, и дает вам множество способов выразить себя в интернете. Что более важно, так это различные типы доступных цветовых единиц.
| | Страна: (RU) |
| |
