САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 Цвета



CSS поддерживает 140 + названия цветов, HSL шестнадцатеричные значения, значения RGB, значения RGBA, значения HSL, значения HSLA и непрозрачность.


RGBA Цвета

RGBA значения цвета являются расширением значений цвета RGB с альфа каналом, который определяет непрозрачность для цвета.

Значение цвета RGBA указывается с помощью rgba (красный, зеленый, синий, альфа). Параметр alpha является числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

В следующем примере определяются различные цвета RGBA:

Пример

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* красный с непрозрачностью */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* зеленый с непрозрачностью */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* синий с непрозрачностью */
Редактор кода »

HSL Цвета

HSL означает Оттенок, Насыщенность и Яркости.

Цвет значения HSL указано: 0.0hsl(оттенок, насыщенность, яркость).

  1. Оттенок - это градус на цветовом круге (от 0 до 360):
    • 0 (или 360) красный
    • 120 зеленый
    • 240 синий
  2. Насыщенность - это процентное значение: 100% - полный цвет.
  3. Яркость - также в процентах; 0% - темный (черный) и 100% - белый.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

В следующем примере определяются различные цвета HSL:

Пример

#p1 {background-color: hsl(120, 100%, 50%);}  /* зеленый */
#p2 {background-color: hsl(120, 100%, 75%);}  /* светло зеленый */
#p3 {background-color: hsl(120, 100%, 25%);}  /* темно зеленый */
#p4 {background-color: hsl(120, 60%, 70%);}   /* ярко зеленый */
Редактор кода »

HSLA Цвета

Значения цвета HSLA являются расширением значений цвета HSL с альфа каналом, который определяет непрозрачность для цвета.

Значение цвета HSLA указывается с помощью: hsla (оттенок, насыщенность, яркость, альфа), где параметр alpha определяет непрозрачность. Параметр alpha - это число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

В следующем примере определяются различные цвета HSLA:

Пример

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* зеленый с непрозрачностью */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);};/* светло зеленый с непрозрачностью */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* темный зеленый с непрозрачностью */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}  /* ярко зеленый с непрозрачностью */
Редактор кода »

Непрозрачность

Свойство CSS opacity задает непрозрачность для всех элементов (как цвет фона и текста, будут матово/прозрачным).

Свойство значений opacity должно быть числом между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Обратите внимание, что текст выше также будет прозрачный / непрозрачный!

В следующем примере показаны различные элементы с прозрачностью:

Пример

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* красный с непрозрачностью */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* зеленый с непрозрачность */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* синий с непрозрачностью */
Редактор кода »

Проверьте себя с помощью упражнений!