Як зробити паралакс-ефект на CSS або JavaScript
Паралакс – це ефект, що створює ілюзію глибини на веб-сторінці шляхом різної швидкості переміщення фонових та передніх об'єктів. Застосування цього ефекту здатне значно пожвавити сайт, додавши йому інтерактивності та візуальної привабливості.
Ознайомтеся з основами веб-розробки
Що таке паралакс?
Паралакс – це ефект візуальної анімації, коли об'єкти на фоні переміщуються повільніше, ніж об'єкти на передньому плані. Це створює ілюзію глибини та об'ємності на плоскій сторінці. Такий ефект особливо популярний у веб-дизайні та активно використовується для підвищення залучення користувачів.
Переваги використання паралаксу:
- покращує користувальницький досвід;
- додає динаміку на сайт;
- підвищує візуальну привабливість;
- дає змогу виділити важливі елементи на сторінці.
Тепер перейдемо до основних способів реалізації паралаксу за допомогою CSS та JavaScript.
Реалізація паралаксу за допомогою CSS
Один із найпростіших способів створення паралаксу – використання властивостей CSS. Це дозволяє досягти ефекту без застосування скриптів, що покращує продуктивність сторінки.
Приклад коду паралаксу на CSS:
body,
html
height:
100%;
margin:
0;
>
.parallax
background-image:
url('background.jpg');
height:
100%;
background-attachment:
fixed;
background-position:
center;
background-repeat:
no-repeat;
background-size:
cover;
>
- background-image визначає зображення для фону.
- background-attachment: fixed; фіксує фон, забезпечуючи паралакс-ефект при прокручуванні сторінки.
- background-position та background-size допомагають адаптувати зображення під різні розміри екранів.
Паралакс-ефект у дії:
Обмеження методу CSS
Метод паралакса за допомогою CSS досить простий у реалізації, але має обмеження. Він добре працює для фіксованих фонових зображень, але якщо потрібна складніша анімація або взаємодія з елементами на сторінці, варто звернутися до JavaScript.
Реалізація паралаксу на JavaScript
Якщо потрібно більше контролю над анімацією або складнішими сценаріями паралаксу, слід використовувати JavaScript. Це дозволяє змінювати не тільки фони, але й будь-які елементи сторінки, залежно від прокручування.
Приклад коду паралаксу на JavaScript:
div
class="parallax"
id="parallax">/div>
script>
window.addEventListener('scroll',
function()
let
parallax
=
document.getElementById('parallax');
let
offset
=
window.pageYOffset;
parallax.style.backgroundPositionY
=
offset
*
0.5
+
'px';
>);
/script>
- window.addEventListener('scroll') відстежує подію прокручування.
- offset визначає, наскільки далеко сторінка прокручена.
- backgroundPositionY змінює позицію фону на основі прокручування, створюючи плавний паралакс-ефект. 0,5 - коефіцієнт, що задає швидкість прокручування.
Цей метод дозволяє регулювати швидкість та напрямок руху елементів, що дає більше можливостей для створення унікальних візуальних ефектів.
Де застосовувати паралакс-ефект?
Паралакс знаходить широке застосування на лендінгах, в промосторінках, блогах і навіть онлайн-магазинах. Він допомагає сфокусувати увагу на важливих блоках інформації, покращує навігацію та робить сайт привабливішим для користувачів.
Поради щодо використання паралаксу:
- Чи не зловживайте ефектом. Надмірне використання може уповільнити роботу сайту.
- Переконайтеся, що анімація не відволікає користувачів від основного вмісту.
- Тестуйте продуктивність сайту на мобільних пристроях, оскільки паралакс може збільшити навантаження на процесор.
Висновок
Паралакс - це потужний інструмент для створення захоплюючого досвіду користувача, який можна реалізувати як на CSS, так і на JavaScript. Перший метод простіше і швидше, проте другий дає більш глибокий контроль над ефектом і дозволяє створювати складні анімації. підвищити якість і привабливість ваших веб-проектів. навчитись створювати ще складніші анімації та інтерфейси, приєднуйтесь до курсу «Фронтенд-розробник», де досвідчені наставники допоможуть вам прокачати свої навички та підготуватися до кар'єри в IT.
Як зробити паралакс-ефект на CSS або JavaScript
Якщо ви хочете, щоб сайт викликав «вау-ефект», а посиланнями на нього ділилися, використовуйте паралакс.
У цій статті ми покажемо, як зробити паралакс на чистому CSS та JavaScript, поговоримо про деякі JS-бібліотеки та подивимося, як оптимізувати анімацію.
Приклад паралаксу на CSS.
На чому робити паралакс-ефект: CSS або JavaScript
Паралакс при прокручуванні сторінок створюють за допомогою 3D трансформацій: transform-style: preserve-3d, perspective, transform: translateZ та інших.
Робити такі ефекти на JavaScript занадто ресурсно, тому що браузеру доводиться відстежувати рух по події scroll , викликати функцію перерахунку положення блоків і зміщувати їх В результаті сторінки гальмують, а скролл стає переривчастим.
А ось паралакс за рухом миші створюється на JavaScript. У CSS поки що немає придатних для цього властивостей, але з його допомогою можна оптимізувати паралакс-ефект.
Як зробити паралакс на чистому CSS
Як задати елементу глибину
Щоб задати елементу глибину, необхідно застосувати до нього transform: translateZ; і вказати значення властивості perspective.
Розробники позиціонують елементи на сторінці по двох осях: Х та Y, по вертикалі та горизонталі. Але є третя вісь - Z, яка відображає глибину елемента і його відстань до користувача. Якщо просто зрушити елемент цієї осі, задаючи йому властивість transform: translateZ , ми побачимо різниці. Елемент поки що знаходиться в двомірній площині, адже екран смартфона або монітор ноутбука не мають глибини.
Зробити площину тривимірної можна за допомогою CSS-властивості perspective. Як значення воно приймає відстань від елемента до користувача по осі Z - чим більше це значення, тим далі елемент знаходиться, і навпаки. Часто для perspective вказують значення 1px — цього достатньо, щоб встановити глибину перспективи.
Приклад паралакс-ефекту на чистому CSS
Зробимо паралакс при прокручуванні сторінки. Спочатку підготуємо розмітку блоку з паралаксом. Додаємо - батько з класом parallax. Усередині нього створюємо два елементи-шари з класами parallax-layer. Перший елемент – із зображенням, другий – із текстом. Вказуємо на додатковий клас parallax-image, а для — parallax-text.
Сад витончених слів
Задаємо-батькові властивість perspective: 1px. Воно створює віртуальну 3D-площину, вказуючи, що центр блоку parallax - вихідна точка побудови перспективи. Додаємо overflow-y: auto , щоб прокручувати елементи-нащадки щодо фіксованої точки.
Тепер видаляємо внутрішні елементи з класом parallax-layer із загального потоку та розтягуємо на всю площу батька.
Залишається зміщення по осі Z. Текст буде далі від користувача, а фон ближче - за рахунок цього ми створимо паралакс-ефект.
.parallax-image < transform: translateZ(0); >.parallax-text
Додамо стилі та отримаємо результат:
See the Pen parallax by Mikhail (@smfms) on CodePen.
Якщо відкрити вкладку з CSS, можна побачити, що з блока parallax-text заданий scale(3) — тобто елемент збільшено втричі. Для чого ми це зробили?
Справа в тому, що елемент, віддаляючись від нас у 3D-площині, візуально зменшується у розмірах. І навпаки, наближаючись, збільшується. Щоб компенсувати ці зміни, ми використовуємо scale . А його значення обчислюємо за такою формулою:
1 + (translateZ * −1) / perspective
У нашому випадку обчислення буде таким:
Ми досягли паралакс-ефекту на чистому CSS. Усі використані властивості підтримуються сучасними браузерами. При бажанні можна додати інші елементи в блок parallax і грати з їх зміщенням по осі Z. Головне - не забувайте, що при зміні положення цієї осі змінюються і розміри елемента, тому значення scale треба коригувати.
Приклад паралаксу з безліччю елементів. Автор - Скотт Келлум, CodePen
⭐ Навчіться робити анімації різного рівня складності – записуйтесь на наш курс. Ви дізнаєтеся, як анімувати слайдер, бургер-меню та акордеон, як створювати картки товарів з 3D-ефектом, багатошаровий паралакс та паралакс шапки.
Як зробити паралакс на JavaScript
Тепер створимо паралакс-ефект на JavaScript: зробимо картку з кількома елементами, які зміщуватимуться під час руху курсору — кожен зі своєю швидкістю.Так як елементи зміщуються по осях X та Y, це буде 2D-паралакс.
Для початку напишемо розмітку, схожу на ту, яку ми використовували в минулому прикладі. Нам потрібні обгортка і внутрішні анімовані елементи:
Здорово бути єнотом!
.parallax__inner < position: relative; overflow: hidden; >.parallax__layer
Вже зараз можна встановити характер анімації при зміщенні елементів, вказавши властивість transition для елементів паралакса. Для більш точного налаштування можна використовувати криві Безьє. Але не рекомендуємо використовувати значення ease-in-out: можуть з'явитися «ривки» при швидкому русі курсору, адже функція не має достатньої лінійності.
Приклад «ривків» при швидкому переміщенні курсору
Перейдемо до JavaScript. Знайдемо паралакс-батько і всі паралакс-елементи, а потім додамо обробник на батько. Слухатимемо рух курсору миші — mousemove .
const wrapper = document.querySelector('.parallax__inner'); const layers = document.querySelectorAll('.parallax__layer'); wrapper.addEventListener('mousemove', initParallax);
Опишемо функцію initParallax, в якій будемо вести розрахунки. Далі декомпозуємо завдання: спочатку знайдемо координати курсору щодо картки, а потім обчислимо нові координати для елементів під час спрацювання події миші.
Завжди обчислюйте координати щодо блоку, на якому слухається подія миші — тоді розрахунки будуть точними. Якщо обчислювати координати курсору щодо в'юпорту, то зміщення паралакс-елементів буде розраховуватися неправильно, оскільки пропорції в'юпорту та картки, швидше за все, не співпадатимуть.
Спочатку обчислимо координати. У JS немає методу, який би повертав координати курсору щодо потрібного блоку.Властивість clientX повертає положення осі X щодо початку вьюпорта. Щоб початок блоку parallax збігалося з 0 по осі X, треба від положення щодо екрана відняти лівий відступ блоку parallax . У цьому нам допоможе метод getBoundingClientRect().
Перейдемо до обчислень. Для зручності записуємо поточну координату в змінну і потім додаємо змінну parallaxLeftOffset із зовнішнім відступом блоку wrapper від меж екрана. Вичитатимемо відступ з поточної позиції курсору і записуватимемо це в змінну coordX :
const initParallax = (evt) =>
Тепер ліва межа паралакс-блоку збігається з координатою 0. Це не зовсім правильно, адже ми можемо відстежувати зміни курсору лише праворуч. Потрібно зробити так, щоб центр блоку збігався з координатою 0. Для цього додатково віднімемо половину ширини блоку.
const coordX = clientX - parallaxLeftOffset - (0.5 * wrapper.offsetWidth); const coordX = clientY - parallaxTopOffset - (0.5 * wrapper.offsetHeight);
Щоб отримати ширину, використовуємо властивість offsetWidth . Тепер центр враппера - точка з координатами 0.0. Можна рухатися до найцікавішого.
Ми вирахували положення курсору щодо паралакс-блоку. Тепер ми можемо розрахувати усунення його елементів і задати їм:
layers.forEach((layer)=>< const x = (coordX).toFixed(2); const y = (coordY).toFixed(2); layer.setAttribute('style', `transform: translate($px, $px);`) >);
Округлюємо координату за допомогою методу tofixed і задаємо кожному елементу трансформацію по обох осях. Ось що вийшло:
See the Pen Untitled by Mikhail (@smfms) on CodePen.
Тепер елементи йдуть за курсором. Додаємо коефіцієнт швидкості, який уповільнюватиме трансформацію елементів.Нехай він дорівнюватиме 0.5 — занадто велике значення краще не встановлювати, оскільки трансформація має бути плавною.
Помножуватимемо обчислену координату на цей коефіцієнт.
Код працює, але ми забули про суть паралаксу. Паралакс - це усунення елементів з різною швидкістю, а зараз всі елементи рухаються з однаковою.
Змінимо це. Коефіцієнт швидкості будемо зберігати прямо в розмітці в data-атрибуті, оскільки це зручно.
Здорово бути єнотом!
Значення не повинно бути надто великим, щоб елементи рухалися плавно. Допишемо скрипт із поправкою на швидкість:
layers.forEach((layer)=>< const layerSpeed = layer.dataset.speed; const x = (coordX * layerSpeed).toFixed(2); const y = (coordY * layerSpeed).toFixed(2); layer.setAttribute ('style', `transform: translate($px, $px);`)>);
Тепер елементи рухаються із різною швидкістю. Останній штрих: інвертуємо значення координат, що зміщуються, щоб при русі миші вліво елементи зміщувалися вправо, і навпаки. Готово!
See the Pen Untitled by Mikhail (@smfms) on CodePen.
Як оптимізувати паралакс
На початку статті згадали, що паралакс ресурсозатратний для браузера — на кожен рух миші викликається кілька команд з перерахунку координат. Що можна із цим зробити?
Не зміщуйте елементи за допомогою top, left, right, bottom . Замість них краще використовувати transform: translateX, translateY – вони знижують навантаження на графічний процесор.
У CSS є властивість will-change. Якщо задати значення transform , то браузер ще до анімування виконає оптимізації. Це знизить навантаження на графічний процесор, і анімація працюватиме плавніше, без ривків.
Теоретично, можна використовувати декоратор throttle на події миші. Але найчастіше у вас з'являтимуться небажані ривки при трансформації.
Висновок
Ми показали прості способи створення паралаксу на CSS і JS, але іноді потрібні складніші ефекти. Для таких випадків є спеціальні бібліотеки, наприклад, Loco Scroll, parallax JS або rellax. ефект "поспіху" або "затримки" анімації.
Дізнатись більше
«Доктайп» — журнал про фронтенд. Читайте, слухайте та навчайтеся з нами.
Читати далі
Псевдоклас
Псевдоклас :link в CSS призначений для стилізації посилань, які ще не були відвідані користувачем.
Приклад використання псевдокласу :link для стилізації невідвіданих посилань:
У цьому прикладі для всіх невідвіданих посилань встановлюється синій колір ( #007bff ) і видаляється підкреслення.
При роботі з :link важливо пам'ятати, що цей псевдоклас повинен використовуватися в поєднанні з псевдокласом :visited для повної стилізації станів посилань.
Приклад повного набору стилів для посилань:
a:link < color: #007bff; text-decoration: none; >a:visited < color: #666; >a:hover < color: #0056b3; text-decoration: underline; >a:active
У цьому прикладі задаються різні стилі для всіх можливих станів посилань: :link для невідвідених, :visited для відвіданих, :hover при наведенні курсору та :active у момент натискання на посилання. Такий підхід дозволяє створити більш динамічний та інтуїтивно зрозумілий інтерфейс веб-сторінки.
Селектор нащадків (пробіл)
Селектор нащадків CSS використовується для вибору елементів, які є нащадками іншого елемента в структурі документа. Цей селектор позначається простою пробілом між двома селекторами і дозволяє застосувати стилі до елементів, що знаходяться всередині інших елементів, незалежно від глибини вкладеності.
Приклад використання селектора нащадків:
У цьому прикладі всі абзаци (
), які знаходяться всередині елемента, будуть пофарбовані в темно-сірий колір і отримають міжрядковий інтервал у півтора розміру шрифту. Селектор нащадків дозволяє легко керувати стилем конкретних елементів, зберігаючи при цьому загальну структуру та читання коду.
Селектор нащадків особливо корисний у таких випадках:
- Структурування контенту: Допомагає стилізувати елементи всередині певних секцій або компонентів, не торкаючись схожих елементів в інших частинах сторінки.
- Тематичне оформлення: Використовується для застосування унікальних стилів до елементів, які розташовані всередині певних контейнерів, наприклад, для статей, сайдбарів або футерів.
- Ізоляція стилів: Забезпечує локальне застосування стилів, запобігаючи їх випадковому розповсюдженню на інші елементи документа.
Застосування селектора нащадків спрощує створення модульної структури стилів, що легко підтримується, дозволяючи розробникам більш точно і гнучко керувати зовнішнім виглядом веб-сторінки.
Однак, важливо дотримуватися балансу і уникати занадто глибокої вкладеності селекторів, оскільки це може ускладнити підтримку та оптимізацію коду. Рекомендується використовувати селектор нащадків з розумом, орієнтуючись на підтримку чистоти та простоти структури CSS.
Псевдоклас
Псевдоклас :focus CSS використовується для стилізації елементів, які отримали фокус. Це може бути, наприклад, текстове поле у формі, до якого користувач перемістив курсор для введення або посилання, вибране через клавіатурне введення. Псевдоклас :focus дозволяє створити більш інтерактивний і доступний інтерфейс користувача, підсвічуючи активні або вибрані елементи.
Приклад використання :focus :
У цьому прикладі для всіх текстових полів (input) при отриманні фокусу змінюватиметься колір кордону на синій та фоновий колір на світло-синій. Це забезпечує наочний зворотний зв'язок користувачеві про те, який елемент форми активний в даний момент, покращуючи загальну доступність користувача і зручність використання інтерфейсу.
Псевдоклас :focus особливо важливий для:
- Поліпшення доступності: Він допомагає користувачам з обмеженими можливостями або тими, хто використовує клавіатурне введення замість миші, розуміти, який елемент керування в даний момент активний.
- Підвищення інтерактивності: Візуальна відмінність активних елементів робить інтерфейс більш дружнім та зрозумілим для користувача.
- Створення стилістичних акцентів: Дозволяє додавати унікальні стилістичні особливості інтерактивних елементів інтерфейсу, підкреслюючи їх функціональність.
Застосування :focus у поєднанні з іншими псевдокласами, такими як :hover та :active , дозволяє створити комплексне візуальне уявлення різних станів елементів управління, роблячи інтерфейс більш інтуїтивно зрозумілим та приємним у використанні.
Однак, важливо пам'ятати, що стилізація елементів за допомогою :focus повинна бути досить помітною, щоб користувач міг легко ідентифікувати фокусований елемент, але при цьому не повинна бути надто нав'язливою, щоб не відволікати від загального сприйняття інтерфейсу.
Селектор з id
CSS-селектор за ідентифікатором (id) дозволяє стилізувати елементи веб-сторінки, які мають унікальний ідентифікатор. Використання селектора по id уможливлює точкове застосування стилів до конкретного елемента, не торкаючись інших елементів на сторінці.
Селектор id позначається знаком решітки ( # ) перед ім'ям ідентифікатора. Ідентифікатори HTML повинні бути унікальними в межах документа, що робить селектор по id потужним інструментом для стилізації конкретних елементів.
Приклад використання селектора по id:
У цьому прикладі елементу з id="uniqueElement" надаються стилі, що роблять текст зеленим і збільшують розмір шрифту до 20 пікселів. Ці стилі будуть застосовані лише до цього конкретного елемента завдяки унікальності ідентифікатора.
Переваги використання селектора по id:
- Точкова стилізація: Селектор по ID дозволяє застосовувати стилі до конкретного елемента, не впливаючи на інші елементи.
- Високий пріоритет: Стилі, застосовані через селектор по ID, мають більш високий пріоритет, ніж стилі, застосовані через класи та теги, що полегшує перевизначення стилів.
- Ідентифікатор має бути унікальним у межах всього HTML-документа.
- Зловживання селекторами по ID може зробити CSS-код складним для підтримки, особливо у великих проектах. Рекомендується використовувати їх з розумом, віддаючи перевагу класам для стилізації, коли це можливо.
- Селектори id можуть збільшити специфічність CSS-правил, що іноді утруднює їх перевизначення.
Використання селектора id є потужним інструментом в арсеналі веб-розробника, дозволяючи точково впливати на стиль окремих елементів сторінки.
Кілька селекторів через кому
Список селекторів у CSS являє собою перелік селекторів, розділених комами, що дозволяє застосувати той самий набір стилів до різних елементів веб-сторінки. Цей метод спрощує написання CSS-коду, позбавляючи необхідності дублювати стилі для кожного типу елементів окремо.
Приклад використання списку селекторів для стилізації заголовків, абзаців та елементів списку:
Застосування списку селекторів є ефективним у багатьох ситуаціях, включаючи:
- Застосування базових стилів тексту (колір, шрифт, розмір) до різних типів елементів.
- Скидання стандартних відступів для елементів списку, параграфів та інших блокових елементів.
- Встановлення загальних стилів для інтерактивних елементів, таких як кнопки та посилання, у різних частинах веб-сторінки.
При роботі зі списком селекторів важливо враховувати, що стилі будуть застосовані до всіх вказаних елементів. Для більш специфічних стильових завдань слід використовувати класи чи ідентифікатори, і навіть більш конкретні типи селекторів.
Списки селекторів покращують читаність та підтримуваність CSS-коду, дозволяючи розробникам ефективніше керувати стилями веб-сторінки. Цей підхід сприяє скороченню дублювання коду та забезпечує більш упорядковану структуру стилів.
Суміжний селектор +
Суміжний селектор CSS, що позначається знаком плюс ( + ), дозволяє вибирати елемент, який є безпосереднім сусідом іншого елемента на тому самому рівні ієрархії DOM. Цей селектор ефективний для застосування стилів до елемента, що знаходиться в точному порядку після іншого елемента в коді HTML.
Приклад застосування суміжного селектора:
Суміжний селектор знаходить широке застосування у веб-розробці для детального налаштування відступів між елементами та для реалізації певних стильових ефектів, що залежать від положення елементів щодо документа.
При використанні суміжного селектора важливо враховувати такі моменти:
- Застосовуйте суміжний селектор з розумом, особливо у складних структурах HTML, оскільки зміни у розмітці можуть вплинути на його працездатність.
- Суміжний селектор ідеальний для випадків, коли необхідно модифікувати стиль елемента в залежності від його розташування по відношенню до попереднього елемента на тому самому рівні.
- Обмежте використання суміжного селектора для підтримки простоти та читання коду, особливо коли йдеться про великі стильові листи.
Дотримання стандартів кодування та увага до деталей в оформленні допоможуть створити легко підтримуваний та гнучкий код CSS, що сприяє ефективній стилізації веб-сторінок.
Селектор тип
Селектори типу CSS використовуються для вибору HTML-елементів, відповідних певному імені тега. Вони дозволяють застосовувати стилі до елементів, не покладаючись на класи або ідентифікатори, що робить їх ідеальними для встановлення базових стилів для стандартних елементів сторінки, таких як абзаци, заголовки та списки.
Приклад використання селектора типу для стилізації всіх абзаців (
) на сторінці:
У цьому прикладі кожному абзацу на веб-сторінці задається шрифт Helvetica, міжрядковий інтервал у півтора рази більший за розмір шрифту та темно-сірий колір тексту. Це базова стилізація, яка може бути перевизначена додатковими селекторами, наприклад селекторами класу або ідентифікатора.
Селектори типу корисні для завдання загальних стилів елементам, які часто використовуються в документі, і є основою каскадності CSS. Вони дозволяють легко підтримувати та оновлювати стилі сайту, надаючи одноманітне представлення елементів по всьому сайту.
При роботі з селекторами типу рекомендується дотримуватися принципів чистого коду та кращих практик веб-розробки:
- Використовуйте типи селекторів для встановлення базових стилів документа, таких як шрифт, розмір тексту та колір.
- Намагайтеся не перевизначати стилі селекторів типу надто специфічними селекторами без необхідності уникнути конфліктів і складнощів з каскадом.
- Для забезпечення читання та підтримуваності коду дотримуйтесь угод про написання CSS, включаючи використання малих літер для селекторів та властивостей, додавання пробілу перед фігурною дужкою та одного рівня відступу для властивостей усередині правила.
Дотримання цих рекомендацій допоможе створити структурований та легко підтримуваний код, який полегшить подальшу розробку та оновлення веб-сайту.
Універсальний селектор *
У CSS універсальний селектор * (зірочка) використовується для застосування стилів до всіх елементів на веб-сторінці. Цей селектор корисний, коли необхідно встановити загальні стилі для всього документа, наприклад, скидання стандартних відступів або завдання базового шрифту.
Приклад використання універсального селектора для скидання стандартних відступів та завдання базового шрифту:
У цьому прикладі всі елементи сторінки обнуляють зовнішні та внутрішні відступи ( margin і padding ), а також встановлюють шрифт Arial як базовий для всього документа.
Використання універсального селектора робить стилізацію більш передбачуваною, оскільки видаляє відмінності у відображенні елементів, які можуть бути встановлені браузером за замовчуванням. Однак слід бути обережним з його використанням, оскільки застосування надто численних стилів до всіх елементів може сповільнити завантаження сторінки.
При роботі з CSS важливо дотримуватися рекомендацій щодо стилю коду, щоб забезпечити читання та підтримуваність коду. Наприклад, згідно з рекомендаціями HTML Academy:
- Селектори та властивості записуються малими літерами.
- Перед відкриває фігурною дужкою ставиться пробіл, властивості перераховуються з нового рядка з одним рівнем відступу.
- Після двокрапки в оголошенні якості слідує пробіл.
- Наприкінці оголошення властивості ставиться крапка з комою.
- Між блоками правил залишається один порожній рядок для кращого читання.
Ігри з нескінченністю, або навіщо нам infinity в CSS
💡 Це переклад статті Will Boyd з блогу CodersBlock. Оригінал: https://codersblock.com/blog/playing-with-infinity-in-css/
У CSS є константа Infinity. Коли я тільки дізнався про це, до мене в голову відразу спала гора абсурдних ідей, як це використовувати, серед яких була й пара непоганих.
До речі, якщо що, infinity можна використовувати тільки всередині calc(). Ну поїхали!
🚀 Сьогодні вам безкоштовно доступний тренажер з HTML та CSS.
Міжрядкова відстань у CSS. Властивість line-height
line-height задає інтерліньяж, тобто відстань між базовими лініями сусідніх рядків тексту.Ця властивість може проводити читабельність тексту та її сприйняття.
Значення line-height можна вказувати як абсолютних одиницях (наприклад, px , pt ), і у відносних ( em , % , без одиниці виміру). Рекомендується використовувати відносні одиниці, оскільки вони дозволяють зберегти масштабованість та адаптивність тексту.
- line-height: 1.2; - Відносне значення, що не залежить від розміру шрифту.
- line-height: 20px; - Абсолютне значення, фіксований розмір інтерліньяжу.
- line-height: 1.5em; - Відносне значення, що залежить від розміру шрифту елемента.
