Статті за міткою [css]

Перший погляд на scroll-triggered анімації

У статті розглядаються відмінності між scroll-driven та scroll-triggered анімаціями і показано, як працюють scroll-triggered анімації в CSS.

Scroll-driven анімації для колонок, що рухаються в протилежних напрямках

Показано, як за допомогою CSS scroll-driven animations створити колонки елементів, що рухаються у протилежних напрямках під час прокрутки, з урахуванням prefers-reduced-motion та кросбраузерних обмежень.

Верстка сайта на HTML и CSS: що впливає на якість, швидкість і SEO-результат

Коли говорять про створення сайту, часто згадують дизайн, функціонал, рекламу або просування. Але між красивим макетом і реальною сторінкою в браузері є критично важливий етап — верстка. Саме вона перетворює картинку з Figma чи іншого редактора на робочий інтерфейс, з яким взаємодіє користувач.

ТОП 5 Трюків із CSS | Частина №1

1. Використання clamp() для адаптивних розмірів

Функція clamp() дозволяє задати гнучкі розміри елементів з мінімумом і максимумом, що дає можливість адаптувати розміри залежно від ширини екрану.

Знайомство з CSS Grid Layout

CSS Grid - найважливіша подія для побудови веб-макетів, з часів гумових контейнерів (флексбоксів). Вона дозволяє уникнути використання будь-яких магічних методів, хитростей та обхідних шляхів, до яких ми звикли за останні 15 років. З сіткою стало набагато простіше описувати макети, впевнений, сітка знищить більшість провідних CSS-фреймворків і дозволить писати менше стилів.

Якщо ви не знайомі з CSS Grid Layout і дочитали аж до цього місця, знайте, це інструмент для розробки макетів, який дозволяє керувати розміщенням, розмірами і вирівнюванням дочірніх елементів.

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

​Що таке CSS