НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Кольори


CSS підтримує 140+ назв кольорів, HEX значення, RGB значення, RGBA значення, HSL значення, HSLA значення і напівтони (непрозорість).


RGBA Кольори

Кольорові значення RGBA є розширенням кольорових значень RGB з альфа-каналом, який визначає непрозорість для кольору.

Значення кольору RGBA визначається за допомогою: rgba (червоний, зелений, синій, альфа). Альфа-параметр - це число від 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 означає Hue, Saturation та Lightness (відтінок, насиченість та яскравість).

Значення кольору HSL визначаються за допомогою: hsl(hue, saturation, lightness).

  1. Hue (відтінок) - це градус на кольоровому колі (від 0 до 360):
    • 0 (або 360) - це червоний (red)
    • 120 - це зелений (green)
    • 240 - це синій (blue)
  2. Saturation (насиченість) - це процентне значення: 100% це повний колір.
  3. Lightness (яскравість) - це також процент; 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 (відтінок, насиченість, яскравість, альфа), де параметр альфа визначає непрозорість. Альфа-параметр - це число від 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);}   /* пастельно-зелений з непрозорістю */
Спробуйте самі »

Opacity - Непрозорість

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;}  /* синій з непрозорістю */
Спробуйте самі »

Перевірте себе за допомогою вправ!