Приклади потужних CSS властивостей

Логотип сайту OlenaCodes

clamp()

Адаптуйте розмір шрифта до вікна з clamp(), щоб забезпечити оптимальну читабельність на будь-якому пристрої.

aspect-ratio

Демонстраційне відео з доступними субтитрами та транскриптом.

Читати транскрипт

Зробіть ваші відео та зображення ідеально пропорційними з aspect-ratio. Переконайтесь, що ваш контент завжди виглядає чудово!

object-fit

Приклад зображення з застосуванням object-fit

Зробіть ваші зображення бездоганно пристосованими до елементів з object-fit, щоб уникнути спотворень і зберегти чіткість.

backdrop-filter

Створіть ефект "скляної" панелі з розмиттям, який додає сучасний і елегантний вигляд вашому дизайну.

isolation

Контент фону
Вкладений елемент з isolation

Властивість isolation корисна в ситуаціях, коли потрібно контролювати взаємодію між елементами, що перекривають один одного, або для створення чистих, чітких ефектів.

accent-color

Надайте елементам кольору акценту з accent-color, щоб покращити зовнішній вигляд інтерфейсу (акцентований елемент не впливає на елементи, які мають властивість color).

scroll-snap: horizontal

Елемент 1
Елемент 2
Елемент 3
Елемент 4

scroll-snap: vertical

Елемент 1
Елемент 2
Елемент 3
Елемент 4

Додайте плавний та зручний прокрутку з scroll-snap, щоб ваш контент легко переглядався на різних пристроях.

grid-auto-flow

1
2
3
4

Застосовуйте автоматичне розташування елементів у гріді для гнучкого та ефективного дизайну сіток.

conic-gradient()

Використовуйте градієнти у формі конусів для створення вражаючих візуальних ефектів і привабливих графічних елементів.

quotes

Це цитата з використанням CSS quotes.

Створіть елегантні цитати з власним стилем завдяки властивості quotes.

caret-color

Надайте кольору курсору текстового поля з caret-color, щоб підвищити його видимість та привабливість.

pointer-events: auto

pointer-events: none

Контролюйте, чи елементи реагують на події миші з властивістю pointer-events, для покращення взаємодії з користувачем.

user-select

Цей текст не можна виділити

Забороніть виділення тексту з user-select, щоб захистити контент або покращити взаємодію з користувачем.

hyphens

Це приклад тексту з автоматичним розривом слів. Якщо ви вставите сюди дуже довге слово або рядок, ви побачите, як CSS автоматично додає перенос.

Покращте читабельність довгих слів з автоматичним розривом слів за допомогою hyphens.

text-emphasis

Текст закцентом

Підкресліть важливі частини тексту з text-emphasis для привернення уваги до ключових слів або фраз.

backface-visibility

1
2
3
4
5
6
1
2
3
4
5
6

Додайте тривимірний ефект оберту елементів з backface-visibility для динамічного та інтерактивного дизайну.

List style

  • Item 1
  • Item 2
  • Item 3

Створіть список з використанням list-style-image для додаткової взаємодії з користувачем.

  1. Item 1
  2. Item 2
  3. Item 3

Створіть список з використанням list-style-type для додаткової взаємодії з користувачем.