Photo by Ferenc Almasi on Unsplash
Чи не було у вас відчуття, що ви загубилися, коли займаєтеся стилізацією вебсайту? 🤯🫨
Здається, що складно налаштувати розміщення контенту або елементів, макет, який ви вже створили, раптом розкидається, або важко розрахувати розміри елементів так, щоб вони були гнучкими на всіх пристроях. І ще, коли потрібно додати багато HTML-коду, щоб дизайн вебсайту виглядав класно. 🤩
Такі проблеми часто викликають розчарування, особливо коли ви намагаєтесь створити акуратний і адаптивний дизайн вебсайту.
CSS відомий як основа для створення стильного, але функціонального дизайну вебсайтів. Однак, багато хто знає лише основи без прихованих трюків, які можуть значно полегшити вашу роботу та зробити програмування більш ефективним, особливо при вирішенні таких проблем.
Щоб допомогти вирішити ці проблеми, спробуйте 5 прихованих трюків CSS, які можна застосувати:
1. Уникайте розмірів елементів, які вводять в оману, використовуючи box-sizing: border-box
Чи траплялося вам, що макет раптово ламається, оскільки розміри елементів не відповідають очікуванням? Зазвичай це відбувається через padding або border, які додаються до загального розміру елемента. Це часто проблема для початківців.
Простий трюк для вирішення цього — використання box-sizing: border-box. Тобто, цей код дозволить браузеру враховувати padding та border у загальний розмір елемента.
Приклад використання:
* {
box-sizing: border-box;
}
З цим методом макет стане більш акуратним і послідовним, особливо коли ви працюєте з адаптивними вебдизайнами. 😎
2. Використовуйте calc() для більш динамічних розмірів
Чи відчували ви складнощі при розрахунку розмірів елементів, щоб вони були гнучкими, але залишались на своїх місцях?
Тоді спробуйте використовувати calc(), щоб налаштувати ширину або висоту елементів, поєднуючи фіксовані значення (наприклад, px) і відсотки.
Наприклад, ви хочете, щоб ширина елемента була 100% від контейнера, але з додатковим простором у 50px. Ось як можна застосувати calc():
.container {
width: calc(100% - 50px);
}
Спробуйте використати це у своєму проєкті — елемент .container буде мати ширину 100% від батьківського елемента мінус 50px. Це дуже корисно для адаптивного дизайну або коли значення залежать від інших елементів.
3. Використовуйте clamp() для більш плавної адаптивності сайту
Чи було вам важко зробити сайт адаптивним і одночасно мати багато медіа-запитів? 🔥🔥
Якщо ви використовуєте clamp(), то ви можете обійти цей етап. За допомогою clamp() ви можете гнучко налаштувати значення властивостей, наприклад, font-size, так щоб вони автоматично змінювались в залежності від розміру вікна браузера.
Приклад використання:
h1 {
font-size: clamp(25px, 5vw, 40px);
}
Отже, значення 25px — це мінімальний розмір, 5vw — це адаптивний розмір, що змінюється в залежності від ширини екрану, а 40px — це максимальний розмір. Результат: розмір шрифту буде змінюватися відповідно до ширини екрану користувача, але залишатиметься в межах від 25px до 40px. Використання clamp() допоможе зробити ваш сайт більш зручним для користувачів. ✨
4. Використовуйте :not() для покращення CSS-селекторів
Чи була у вас проблема, коли потрібно, щоб певні елементи не отримували стилі, як інші елементи?
Наприклад, ви хочете змінити фон усіх елементів div, але деякі class не повинні піддаватися зміні. 🙅🏼♀️ Замість того, щоб додавати нові класи, можна використати селектор :not(). Він дозволяє вам легко вибрати елементи, які не підпадатимуть під зміни.
Приклад використання:
div:not(.exclude) {
background-color: #f0f0f0;
}
Цей метод дозволяє працювати ефективніше, без необхідності додавати нові класи або ID для елементів, які потрібно виключити.
5.
Використовуй filter для кращих візуальних ефектів вебсайту
Зазвичай, щоб додати ефекти, як-от blur для елементів або зображень, нам треба використовувати JavaScript, так?
Тепер є простіший спосіб — використовувати властивість filter в CSS. Ця властивість дозволяє без складнощів додавати візуальні ефекти, як-от blur, brightness, contrast та grayscale до елементів, ось як:
img {
filter: grayscale(100%) blur(5px);
}
img:hover {
filter: grayscale(0%) blur(0);
}
Спробуйте застосувати це. Ваше зображення спочатку матиме ефект grayscale і blur, але як тільки ви наводите на нього курсор, ці ефекти зникнуть. Цей трюк надзвичайно корисний для додавання ефектів без необхідності писати інший код на JavaScript, що може заважати продуктивності сайту.
Зрозумівши і застосувавши 5 прихованих трюків вище, ваші функції та вебсайти стануть набагато більш стильними та інтерактивними.
Тож, давайте продовжувати експериментувати з CSS, щоб створювати ще більш захоплюючий користувацький досвід! 👩🏼💻
Якщо вам цікаво дізнатися більше про інші круті трюки та покращити свої навички в веброзробці, ви можете дослідити CSS трюки зараз та пройти онлайн-курс на Sekolah Koding. 🤩👍
Завдяки навчанні програмуванню в Sekolah Koding, ви можете вчитися легко, без обмежень по часу, а всі матеріали доступні у текстовому та відеоформатах. Є як безкоштовні, так і платні курси, які допоможуть вам глибше розібратися у веброзробці.
То чого ж ви чекаєте? Почніть навчання зараз і покращуйте свої навички кодування в Sekolah Koding!
[## Website belajar Coding Indonesia - SkoDev
Навчання кодування, яке цікаво подається для початківців з нуля на індонезійській мові
sko.dev](https://sko.dev/?source=post_page-----d8f15713fc3e--------------------------------)
Перекладено з: 5 Hidden Trik Penulisan CSS agar Coding Lebih Efisien