Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

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

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Цвета


Цвета CSS3

CSS поддерживает цветовые имена, шестнадцатеричном и RGB цвета.

Кроме того, CSS3 также вводит:

  • RGBA цвета
  • HSL цвета
  • HSLA цвета
  • помутнение

Поддержка браузеров

Числа в таблице указать первую версию браузера, который полностью поддерживает цветовые значения CSS3 / свойства.

Имущество
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
помутнение 4.0 9.0 2,0 3.1 10.1

RGBA Цвета

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

Значение цвета RGBA задается: RGBA (красный, зеленый, синий, alpha ). 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);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
Попробуй сам "

HSL Цвета

HSL означает Hue, насыщенность и яркость.

Значение цвета HSL задается: HSL (оттенок, насыщенность, яркость).

  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%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
Попробуй сам "

HSLA Цвета

Значения цвета HSLA являются продолжением цветовых значений HSL с alpha - каналом - который определяет непрозрачность цвета.

Значение цвета HSLA задается: HSLA (оттенок, насыщенность, яркость, alpha ), где 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);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
Попробуй сам "

помутнение

Свойство CSS3 непрозрачности устанавливает непрозрачность для заданного значения RGB.

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

RGB (255, 0, 0); Непрозрачность: 0,2;
RGB (255, 0, 0); Непрозрачность: 0,4;
RGB (255, 0, 0); Непрозрачность: 0,6;
RGB (255, 0, 0); Непрозрачность: 0,8;

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

Следующий пример показывает различные значения RGB с непрозрачностью:

пример

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
Попробуй сам "

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

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»