CSS є основою веб-розробки, але навіть досвідчені розробники часто не використовують деякі з його найпотужніших можливостей. Давайте розглянемо 20 трюків CSS, які піднімуть ваш стиль на новий рівень і допоможуть створювати кращі, швидші та більш зручні в підтримці дизайни:
1. Користувацькі змінні (CSS Variables)
Змінні CSS роблять ваш код багаторазовим і зручним для підтримки. Визначте свої змінні на рівні root, щоб вони могли використовуватися по всьому стилю:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
button {
background-color: var(--primary-color);
color: var(--secondary-color);
}
Використовуючи var(), ви можете легко змінювати кольори або інші значення без необхідності оновлювати багато місць у вашому CSS.
2. Clamp для адаптивної типографіки
Контролюйте розмір шрифта на різних пристроях за допомогою функції clamp. Вона гарантує, що розмір шрифта адаптується до розміру екрану, зберігаючи при цьому задані межі:
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Тут 1.5rem — мінімальний розмір, 5vw — бажаний розмір (відносно ширини екрана), а 3rem — максимальний розмір.
3. CSS Grid Magic
Спрощуйте адаптивні макети сітки за допомогою auto-fit та minmax:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Це створює сітку, де стовпці автоматично змінюють розмір і підлаштовуються під доступний простір. Ідеально підходить для галерей або макетів карток.
4. Властивість Aspect-Ratio
Зберігайте сталий аспект співвідношення елементів без використання хитрощів з відступами:
div {
aspect-ratio: 16 / 9;
}
Це гарантує, що ширина і висота елемента залишаються пропорційними, що робить її ідеальною для відео або зображень.
5. CSS Scroll Snap
Покращте досвід прокрутки, фіксуючи елементи на певних позиціях:
scroll-snap-type: y mandatory;
scroll-snap-align: start;
Це чудово підходить для створення каруселей, слайдерів або прокручуваних секцій з точними зупинками.
6. Content Visibility для продуктивності
Покращуйте продуктивність рендерингу, пропускаючи елементи поза екраном:
div {
content-visibility: auto;
}
Це змушує браузер пропускати рендеринг елементів, поки вони не стануть видимими, що покращує час завантаження.
7. Фільтри ефектів
Застосовуйте графічні ефекти, такі як розмиття або яскравість, до елементів без редагування зображень:
div {
filter: blur(5px) brightness(0.8);
}
Фільтри можна накладати один на один для створення більш драматичних візуальних ефектів.
8. CSS Shape Outside
Окружайте текст довкола кастомних форм для креативних макетів:
img {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
}
Це дозволяє тексту обтікати форму зображення, створюючи візуально привабливі дизайни.
9. Backdrop Filter
Створюйте ефекти «замороженого скла» для сучасних UI-дизайнів:
div {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
Цей ефект часто використовується в модальних вікнах, хедерах або накладеннях.
10. Анімації за допомогою @keyframes
Додавайте плавні анімації до ваших елементів:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
div {
animation: fadeIn 2s ease-in;
}
Визначте keyframes, щоб контролювати етапи анімації, потім застосовуйте їх за допомогою властивості animation.
11. Шарування з Z-Index
Організуйте стекові контексти за допомогою z-index:
.modal {
z-index: 999;
}
Пам'ятайте, що z-index працює тільки на елементах з іншим значенням властивості position, окрім static (наприклад, relative, absolute чи fixed).
12. CSS Лічильники
Створюйте динамічну нумерацію без JavaScript:
ol {
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ". ";
}
Це корисно для упорядкованих списків або кастомних систем нумерації.
13.
Custom Scrollbars
Стилізуйте смужки прокрутки для елегантного інтерфейсу:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #3498db;
border-radius: 5px;
}
Майте на увазі, що це працює лише в браузерах на основі Webkit (наприклад, Chrome, Edge).
14. Стан при наведенні з переходами
Зробіть ефекти при наведенні плавнішими і привабливішими:
button {
transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover {
background-color: #2ecc71;
transform: scale(1.1);
}
Переходи роблять взаємодії більш візуально привабливими.
15. Іменовані області CSS Grid
Використовуйте іменовані області сітки для зручніших макетів:
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header {
grid-area: header;
}
Присвоюйте зрозумілі назви областям сітки для кращої чіткості коду.
16. Focus Within
Стилізуйте батьківський елемент, коли його дочірній елемент має фокус:
form:focus-within {
border: 2px solid #3498db;
}
Це ідеально підходить для виділення форм або інтерактивних контейнерів.
17. Рівномірно розподілені елементи Flexbox
Розподіляйте елементи рівномірно за допомогою gap:
display: flex;
gap: 10px;
Властивість gap працює подібно до сітки, спрощуючи відступи.
18. CSS Subgrid
Дозволяє дочірнім елементам вирівнюватися з батьківською сіткою:
display: subgrid;
Зверніть увагу: підтримка Subgrid ще обмежена, тому перевіряйте сумісність з браузерами.
19. Маскування за допомогою Clip-Path
Створюйте складні форми безпосередньо в CSS:
div {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
Це усуває потребу в додаткових зображеннях.
20. Логічні властивості CSS
Пишіть CSS, який адаптується до різних режимів запису і макетів:
margin-inline-start: 1rem;
padding-block-end: 2rem;
Логічні властивості враховують напрямок тексту і потік, роблячи ваш CSS більш універсальним.
Освойте ці CSS-родзинки, щоб зробити ваші дизайни чистішими, ефективнішими та зручнішими для користувачів. Який трюк ви використовуватимете в наступному проекті? Поділіться своїми думками в коментарях! Якщо хочете більше таких трюків, підписуйтеся, щоб не пропустити новий контент!
Перекладено з: 20 CSS Tricks To Make Your Web UI Pop