Якщо ви створюєте вебсайт, важливо зробити його адаптивним.

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

Хоча відносні одиниці (наприклад, відсотки) можуть бути корисними в деяких випадках, вони можуть призвести до проблем.

Але не хвилюйтесь: такі властивості, як max-width та min-width, прийдуть вам на допомогу. Ці властивості дозволяють уникнути використання медіазапитів для деяких адаптивних завдань.

У цій статті ви дізнаєтеся, що таке max-width, min-width, max-height і min-height та як їх використовувати.

Властивість max-width

Властивість max-width дозволяє вказати максимальну ширину елемента. Це означає, що елемент може збільшуватися в ширину до досягнення певної абсолютної або відносної одиниці, після чого його ширина має фіксуватися.

Ось про що я говорю:

Припустимо, що ми встановили ширину елемента на 80% ширини вікна перегляду. Якщо ширина вікна перегляду становить 375px, то елемент матиме ширину 300px, що є доволі хорошим показником.

(80/100) * 375 = 300px

Але якщо у нас ширше вікно перегляду, наприклад, 1300px, тоді наш елемент матиме ширину 1040px.

(80/100) * 1300 = 1040px

Саме тут допоможе властивість max-width. Якщо ви використовуєте відносні одиниці (наприклад, відсотки), то встановлена властивість max-width дозволить елементу продовжувати збільшуватися в ширину, поки він не досягне вказаного значення.

Ось приклад:

Зверніть увагу, що розмір картки ніколи не перевищує 350px. Так працює max-width. Це дозволяє картці рости на менших екранах.

Якщо ширина менша за 350px, вона займає 80% від поточного розміру екрана. Але як тільки ширина досягає 350px, вона фіксується і не перевищує встановлену ширину.

Ось так виглядає код:

//Картка не може бути більшою за 350px

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

Властивість min-width

На відміну від властивості max-width, властивість min-width вказує мінімальну ширину. Вона визначає найменшу можливу ширину для елемента.

У деяких випадках потрібно, щоб елемент мав гнучку ширину, тому її задають у відносній одиниці (наприклад, у відсотках). Але коли екран зменшується, ширина елемента також зменшується.

Тут допоможе min-width: ви можете встановити мінімальну ширину, щоб картка не була меншою за вказане значення.

//Картка не може бути меншою за 250px

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  //тут налаштовуємо властивість min-width
  min-width : 250px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

Властивість max-height

Властивість max-height працює так само, як і max-width, але впливає на висоту, а не ширину.

Ось приклад:

//Встановлює висоту елемента до вказаної одиниці, ефективно зупиняючи його збільшення у висоті

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:70%;
  //тут налаштовуємо властивість max-height
  max-height: 400px;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

Властивість min-height

На відміну від max-height, властивість min-height задає мінімальну висоту для елемента.

Це трапляється, коли вікно перегляду зменшується, а висота елемента не може бути меншою певної висоти.

.element{
    height:40vh;
    min-height:200px;
}

Висновок

Адаптивність є важливим фактором у веброзробці. Відстежувати вигляд елементів на екранах різних розмірів може бути складно, але властивості max-width, min-width, max-height і min-height допомагають з цим.

Ці властивості дозволяють регулювати розмір елементів без необхідності використання медіазапитів.

Багато властивостей у CSS (наприклад, width, margin, padding та font-size) використовують довжину, а CSS має багато різних способів для її вираження.

Довжина в CSS — це число та одиниця без пробілу. Наприклад, 5px, 0.9em і так далі.

Існує два загальних типи одиниць, які використовують для довжини і розміру в CSS: абсолютні та відносні.

Абсолютні одиниці довжини

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

Ось декілька поширених абсолютних одиниць довжини в CSS:

px

Пікселі, або px, є одними з найпоширеніших одиниць довжини в CSS.

У CSS 1 піксель офіційно визначено як 1/96 дюйма. Усі інші абсолютні одиниці довжини базуються на цьому визначенні пікселя.

Але коли цей стандарт був сформульований, більшість моніторів мали роздільну здатність 1024 x 768 та DPI (кількість точок на дюйм) 96.

Екрани на сучасних пристроях мають набагато вищу роздільну здатність і DPI, тому лінія довжиною 96 пікселів може не вимірювати точно 1 дюйм, залежно від пристрою.

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

Якщо ви знаєте, що ваша сторінка буде надрукована на високоякісному принтері, тоді можна розглянути можливість використання іншої одиниці: наприклад, cm або mm.

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

cm

Сантиметри.

У CSS 1cm приблизно дорівнює 37,8 пікселя або близько 25,2/64 дюйма.

mm

Міліметри.

У CSS 1mm приблизно дорівнює 3,78 пікселя або 1/10 сантиметра.

in

Дюйми.

У CSS 1in приблизно дорівнює 96 пікселів або близько 2,54 см.

pt

Пункти.

У CSS 1pt приблизно дорівнює 1,3333 пікселя або 1/72 дюйма.

pc

Піки.

У CSS 1pc приблизно дорівнює 16 пікселів або 1/6 дюйма.

Відносні одиниці довжини

Відносні одиниці довжини залежать від розміру або налаштувань іншого елемента. Наприклад, відносний розмір шрифту елемента може розраховуватися з використанням розміру шрифту батьківського елемента.

Ось декілька поширених відносних одиниць довжини:

em

Одиниця em у CSS отримала свою назву від типографічної одиниці. У типографії термін em спочатку стосувався ширини великої літери M у використовуваному шрифті та розмірі.

Коли використовується із властивістю font-size, em успадковує розмір шрифту від батьківського елемента:

.container {
  font-size: 16px;
}

.container p {
  font-size: 1em;
}

.container h2 {
  font-size: 3em;
}

.container h3 {
  font-size: 2em;
}

У цьому прикладі розмір шрифту елемента p становить 16px (16 * 1). Тим часом розмір шрифту h2 становить 48px (16 * 3), а для h3 — 32px (16 * 2).

Якщо em використовується з іншою властивістю (наприклад, width), то em розраховується з використанням розміру цільового елемента.

rem

Ця відносна одиниця не залежить від розміру або налаштувань батьківського елемента, а базується на корені документа. Для вебсайтів коренем документа є елемент html.

p {
  font-size: 1.25rem;
}

У більшості браузерів розмір шрифту за замовчуванням становить 16, тому розмір шрифту елементів html становить 16px. Отже, у цьому випадку елемент p дорівнює 20px (16 * 1,25).

Але якщо користувач змінить розмір шрифту за замовчуванням у своєму браузері, то розмір шрифту елемента p буде масштабуватися відповідно.

%

Відсотки, або розмір відносно розміру батьківського елемента:

div {
  width: 400px;
}

div p {
  width: 75%;
}

Оскільки ширина батьківського елемента становить 400px, то шириною внутрішнього абзацу буде 300px (400 * 0,75).

vw

1vw — це 1% ширини вікна перегляду.

Наприклад:

body {
  width: 100vw;
}

Оскільки елемент body має значення 100vw, або 100% ширини вікна перегляду, він займатиме всю доступну ширину. Отже, якщо ви зміните розмір вашого браузера на 690 пікселів у ширину, то body займе всі 690 пікселів у ширину.

vh

1vh — це 1% висоти вікна перегляду.

Наприклад:

div {
  height: 50vh;
}

Елемент div займе 50% висоти вікна перегляду. Отже, якщо висота вікна браузера становить 900 пікселів, висота div дорівнюватиме 450 пікселів.

ex

Одиниця ex у CSS отримала свою назву від x-height у типографії, або «висоти літери x у шрифті». У багатьох шрифтах символ малої літери x зазвичай становить приблизно половину висоти найбільшого символу.

У CSS 1ex — це x-height шрифту або половина 1em.

Але оскільки розмір малої літери x може значно відрізнятися залежно від шрифту, одиниця ex використовується рідко.

ch

Одиниця ch у CSS визначається як ширина символу 0 (нуль, або U+0030) шрифту.

Хоча одиниця ch працює як точне вимірювання для моноширинних/фіксованих шрифтів (наприклад, Courier), вона може бути непередбачуваною з пропорційними шрифтами (наприклад, Arial).

Наприклад, якщо ви використали шрифт Courier і встановили ширину елемента на 60ch, то ширина цього елемента дорівнюватиме рівно 60 символам.

Але якщо ви використали шрифт Arial і встановили ширину елемента на 60ch, то неможливо сказати, якою буде ширина елемента: символи можуть переповнювати контейнер або не досягати його меж.

Щоб дізнатись більше про одиницю ch та розглянути пару прикладів, див. цю статтю (англійською мовою).

vmin та vmax

Одиниці vmin та vmax базуються на значеннях vw та vh.

1vmin — це 1% найменшого виміру вікна перегляду, а 1vmax — це 1% найбільшого виміру вікна перегляду.

Наприклад, уявіть вікно браузера, ширина якого 1200 пікселів, а висота — 600 пікселів. У цьому випадку 1vmin дорівнює 6px (1% від vh, що менше для розміру 600 пікселів). Тим часом 1vmax дорівнює 12px (1% від vh, що більше для розміру 1200 пікселів).

Псевдокласи та псевдоелементи в CSS — це два типи ключових слів, які можна поєднувати з селекторами. Їх використовують, щоб визначити стан елемента або конкретні частини елемента.

У цій статті ми дізнаємось про різницю між ними, а також їхню історію та найкращі практики використання.

Синтаксис

• одинарна двокрапка : стосується псевдокласів
• подвійна двокрапка :: стосується псевдоелементів

Псевдокласи та псевдоелементи

«Псевдо» означає «несправжній, неправильний, фальшивий». Префікс псевдо- використовують, щоб позначити класи або елементи, які не є «реальними», тобто є не елементами DOM (Document Object Model), а віртуальними елементами, створеними для стилізації.

Щоб краще визначити різницю, давайте детальніше обговоримо відмінності між псевдокласами та псевдоелементами.

Що таке псевдокласи в CSS?

Псевдокласи (:) в основному використовують, щоб стилізувати елементи у різних станах. Стан позначає умову або поведінку користувача (наприклад, hover, active, focus або disabled). Стан зазвичай включає взаємодію з користувачем.

Наприклад, ми можемо задати всім посиланням колір тексту lavender, коли користувач наводить курсор на посилання.

a:hover {
  color: lavender;
}

У Chrome DevTools ви знайдете інші приклади станів. Тут ви також можете тестувати та налагоджувати застосовані стилі на основі стану (і відповідного псевдокласу), перемикаючи їх.

Існує понад 50 типів псевдокласів, тому я дуже рекомендую переглянути їх.

Протестуйте код нижче, уважно розгляньте псевдокласи та спробуйте додати новий.

Функціональні псевдокласи

Інший тип псевдокласів — це функціональні псевдокласи. Вони приймають параметр у вигляді списку селекторів, щоб відповідати елементам.

На відміну від інших типів псевдокласів, які орієнтовані на статичні стани (наприклад, hover), ці псевдокласи можуть динамічно цілитись на події та взаємодії з користувачем.

:is()
/* Псевдоклас, який відповідає будь-якому елементу, що відповідає будь-якому з селекторів у наданому списку. */

:not()
/* Псевдоклас заперечення, який представляє будь-який елемент, що не відповідає його аргументу. */

:where()
/* Псевдоклас налаштування специфічності, який відповідає будь-якому елементу, що відповідає будь-якому з селекторів у списку без додавання ваги специфічності. */

:has()
/* Псевдоклас відносності, який представляє елемент, якщо будь-який з відносних селекторів відповідає при закріпленні до прикріпленого елемента. */

Що таке псевдоелементи в CSS?

Псевдоелементи (::) використовують, щоб стилізувати певні частини елемента. Їх можуть використовувати, щоб націлитись на першу літеру чи перший рядок або щоб додати вміст перед чи після елемента.

Варто ознайомитися з цим індексом псевдоелементів, щоб дізнатися більше про доступні ключові слова.

Наприклад, щоб перша літера абзацу була великою, можна використати псевдоелемент first-letter:

p::first-letter {
  font-size: 9em;
}

Ще один поширений приклад псевдоелемента — це використання ::before або ::after, щоб додати вміст перед або після цільового елемента.

Протестуйте код нижче, щоб побачити, як можна використовувати ::before та ::after, щоб створити рядки перед або після текстового елемента.

Різниця між : та :: в CSS

Запам’ятайте, що між одинарною та подвійною двокрапкою ключова різниця. Найголовніше, що : стосується псевдокласів, а :: стосується псевдоелементів.

Історія ::

Історично існувала лише одинарна двокрапка :, яка визначала і псевдокласи, і псевдоелементи. Нотація :: була введена в CSS3, щоб розрізняти їх.

Псевдоелементи та псевдокласи — це пов’язані поняття, які забезпечують різні способи стилізації елемента. Як наслідок, невелика відмінність у синтаксисі між ними є логічною.

Нерекомендовано використовувати лише одинарну двокрапку для обох випадків, оскільки це застаріло. Браузери досі приймають : для обох випадків для зворотної сумісності. Оскільки ви можете стикнутися з обома синтаксисами, розуміння історичного контексту є корисним.

Найкращі практики використання : та ::

Найкраща практика при виборі синтаксису двокрапки — дотримуватись поточних стандартів CSS3. Дотримання цих стандартів покращить підтримуваність коду, тому у своїй кодовій базі корисно зберігати та впроваджувати правила щодо цього.

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

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

Висновок

Для написання підтримуваного CSS важливо розуміти різницю між псевдокласом і псевдоелементом. Псевдокласи використовують, щоб націлитись на стан, а псевдоелементи — щоб націлитись на конкретні частини елемента.

Сподіваюся, ця стаття допомогла зрозуміти різницю між псевдокласами та псевдоелементами, а також їхню історію та найкращі практики використання.

Щасливої стилізації!

Якщо хочете дізнатись більше про CSS, можете знайти мене у твіттері.

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

У цій статті ми розглянемо, як створити круті анімації за допомогою CSS.

Передумови

Перш ніж продовжити, переконайтеся, що у вас є базові знання HTML та CSS.

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

Як створити першу анімацію CSS

Розпочнемо з підготовки елемента HTML.

<body>
  <div class="square"></div>
</body>

.square {
  width: 100px;
  height: 100px;
  background-color: purple;

  /* Центрування елемента */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Рядки 7-10 демонструють часто використовуваний метод центрування елемента за допомогою CSS. Ось результат такого коду:

Перш ніж створювати анімацію, потрібно подумати про те, якого ефекту ви хочете досягти.

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

@keyframes bounce {
  0% {
    top: 90%;
  }
  100% {
    top: 10%;
  }
}

Щоб визначити анімацію, потрібно використати правило @keyframes, яке дозволяє визначити ключові кадри у процесі анімації.

Ключові кадри встановлюються з використанням значень у відсотках, починаючи від 0% і закінчуючи 100%. Наприклад, у прикладі анімація почнеться з top: 90%; і закінчиться на top: 10%;, після чого вона повернеться назад до 50%.

І, звісно, потрібно пов’язати анімацію bounce з квадратом (animation-name) і повідомити браузеру, як довго має тривати ця анімація (animation-duration). Ось як це робиться:

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
}

Як додати декілька ключових кадрів

Але, як ви можете помітити, квадрат розташований знизу, рухається вгору, а потім повертається назад в центр. Це не зовсім ефект стрибка. Як можна зробити так, щоб квадрат рухався вниз?

Для цього можна налаштувати третій ключовий кадр:

@keyframes bounce {
  0% {
    top: 90%;
  }
  50% {
    top: 10%;
  }
  100% {
    top: 90%;
  }
}

Таким чином, квадрат почне знизу (top: 90%;), рухатиметься вгору (top: 10%;), а потім повернеться вниз (top: 90%;).

Як створити повторювану анімацію

Є одна проблема, яку потрібно розв’язати. Анімація відтворюється лише один раз. На практиці ви, можливо, хочете, щоб анімація повторювалась декілька разів, щоб створити ефект того, що квадрат дійсно скаче.

Замість того, щоб створювати більше ключових кадрів, що не так просто, ви можете визначити властивість animation-iteration-count і вказати кількість разів, які ви хочете, щоб анімація повторювалась.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: 5;
}

А якщо ви хочете, щоб анімація відтворювалась безкінечно, просто вкажіть infinite.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Як застосувати часову функцію до анімації

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

Це можна зробити за допомогою часової функції. За замовчуванням браузер надасть значення linear, тобто анімація матиме однакову швидкість від початку до кінця. Але це можна змінити, використовуючи властивість animation-timing-function:

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

Вказавши ease-in-out, ви повідомите браузеру починати анімацію повільно і закінчувати її поступово. В результаті анімація виглядатиме набагато плавніше.

Крива Безьє

Значення ease-in-out фактично представляє математичне рівняння, відоме як крива Безьє. Я обійдусь без складних математичних визначень, а вам потрібно знати лише те, що функція визначає криву з чотирма контрольними точками.

cubic-bezier.com — це онлайн-інструмент, який дозволяє налаштувати криву, просто перетягуючи контрольні точки.

Контрольні точки визначають форму кривої, а нахил кривої контролює швидкість анімації. Наприклад, на графіку вище показано, що анімація почнеться повільно, прискориться, а потім закінчиться плавно.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.8, 0.36);
}

У більшості випадків вам не потрібно визначати власну криву Безьє. Існує декілька попередньо визначених кривих, яких достатньо для більшості випадків.

ease представляє криву cubic-bezier(0.25, 0.1, 0.25, 1). Спочатку анімація повільно прискориться, а потім сповільниться до зупинки.

ease-in представляє криву cubic-bezier(0.42, 0, 1, 1). Анімація розпочнеться плавно і потім зупиниться досить різко.

ease-out представляє криву cubic-bezier(0, 0, 0.58, 1). Анімація розпочнеться різко і потім сповільниться, щоб плавно зупинитися.

ease-in-out представляє криву cubic-bezier(0.42, 0, 0.58, 1). Анімація буде плавною як спочатку, так і вкінці.

Функція steps()

Окрім плавної кривої, ви можете вказати ступінчасту функцію. Функція steps() приймає два аргументи. Перший вказує кількість кроків, а другий встановлює точку, де відбувається зміна: на початку (start) або в кінці (end) кроку.

.square {
  . . .
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(5, start);
}

У цьому випадку анімація буде розділена на п’ять кроків, і для кожного кроку зміна відбудеться на початку.

Для функції steps() існують два скорочення: step-start відповідає steps(1, start), а step-end відповідає steps(1, end).

Як поєднати декілька анімацій

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

Попередні приклади фокусувались на зміні властивості top, щоб створити ефект стрибка. Фактично, ви можете комбінувати декілька властивостей в одній анімації. Наприклад, ви можете створити ефект пульса, змінивши форму і прозорість елемента.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.ball {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 50%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  animation: pulse 2s ease-in-out infinite;
}

Зверніть увагу, що властивості анімації можна об’єднати в скорочення за допомогою властивості animation.

Інші властивості, пов’язані з анімацією

Крім властивостей анімації, про які ми говорили до цього, є декілька різних властивостей, які варто розглянути. Іноді вони також можуть бути корисними.

По-перше, є властивість animation-direction, яка визначає, як буде відтворюватися анімація. Властивість приймає чотири різні значення:

• normal: анімація відтворюється з початку до кінця;
• reverse: анімація відтворюється з кінця до початку;
• alternate: спочатку анімація відтворюється з початку до кінця, а потім навпаки. Працює лише тоді, коли значення animation-iteration-count більше за 1;
• alternate-reverse: спочатку анімація відтворюється з кінця до початку, а потім навпаки.

За замовчуванням анімація почне відтворюватися одразу після завантаження сторінки. Проте це можна змінити за допомогою властивості animation-delay, яка вказує, як довго ви хочете чекати, перш ніж анімація розпочнеться.

Властивість animation-fill-mode визначає, як елемент буде відображатися перед та після відтворення анімації. За замовчуванням елемент не зберігатиме жодних стилів з анімації. Після завершення анімації елемент повернеться до нормального стану.

Якщо animation-fill-mode встановлено на forwards, елемент зберігатиме стилі з останнього ключового кадру анімації після її відтворення.

Якщо встановлено на backwards, елемент прийматиме стилі з першого ключового кадру анімації, як тільки анімація відтвориться.

Якщо встановлено на both, елемент зберігатиме стилі з першого ключового кадру перед початком анімації (подібно до backwards), а також збереже стилі з останнього ключового кадру після завершення анімації (подібно до forwards).

Висновок

Цей урок охопив все, що потрібно знати, перш ніж створювати анімації CSS за допомогою правила @keyframes.

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

Ми також розглянули декілька властивостей CSS, пов’язаних з анімацією:

• animation-duration: визначає тривалість анімації;
• animation-iteration-count: визначає кількість повторень анімації;
• animation-timing-function: вказує часову функцію, яка контролює швидкість відтворення анімації;
• animation-direction: напрямок відтворення анімації;
• animation-delay: затримка перед початком анімації;
• animation-fill-mode: чи слід зберігати стилі з анімації після завершення.

Для подальшого вивчення HTML та CSS рекомендую звернутися до циклу курсів -> HTML & CSS: A Practical Guide.

CSS — потужний інструмент веброзробників, який дозволяє стилізувати та форматувати вміст HTML різними способами.

Однією з найчастіших технік форматування є жирний шрифт, що виконують за допомогою властивості font-weight. Жирний шрифт наголошує на головній інформації, створює візуальний контраст та покращує читабельність.

У цій статті ви дізнаєтесь, як використовувати CSS, щоб за допомогою властивості font-weight зробити жирний шрифт у HTML. Незалежно від того, початківець ви чи досвідчений розробник, ця стаття надасть вичерпний посібник зі створення жирного шрифту в HTML за допомогою CSS.

Коротко про властивість Font-Weight

Властивість font-weight — це властивість у CSS, яка визначає жирність чи товщину шрифту: чим більше значення, тим жирніший шрифт.

Властивість font-weight приймає різні значення, включно з числами та ключовими словами.

Числові значення коливаються від 100 до 900, кожне збільшується на 100. Значення 400 вважається нормальним, а 700 — жирним. До найпопулярніших ключових слів належать bold, bolder, lighter та normal.

Як зробити жирний шрифт завдяки CSS

Створення жирного шрифту в HTML за допомогою CSS — простий процес, який можна виконати декількома способами. Ви можете використовувати будь-який стиль (вбудований, внутрішній чи зовнішній).

Як зробити жирний шрифт завдяки вбудованому стилю

Ви можете використовувати вбудований стиль, щоб застосувати властивість font-weight одразу до потрібного елемента HTML. Ось приклад:

<p style="font-weight: bold;">Це жирний шрифт</p>

Вбудований стиль може забруднити код HTML та зробить його важким в обслуговуванні, особливо коли багато елементів вимагають однакових стилів.

Як зробити жирний шрифт завдяки внутрішньому стилю

Внутрішній стиль дозволяє застосувати стилі CSS в межах розділу head за допомогою тегу style. Ось приклад:

<head>
  <style>
    p {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>Це жирний шрифт</p>
</body>

Цей метод корисний, якщо ви додаєте однакові стилі до декількох елементів на одній сторінці.

Як зробити жирний шрифт завдяки зовнішньому стилю

Зовнішній стиль передбачає створення окремого файлу CSS, який пов’язується із документом HTML за допомогою тегу link. Ось приклад:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Файл CSS може містити стилі всіх елементів HTML на вебсайті, тому ви можете легко вносити зміни до стилів, не змінюючи код HTML.

p {
  font-weight: bold;
}

Найкращі практики для застосування жирного шрифту в HTML

Жирний шрифт у HTML може наголосити на важливій інформації, однак важливо дотримуватись найкращих практик, щоб забезпечити читабельність та доступність тексту.

Ось найкращі практики використання жирного шрифту в HTML:

Виберіть правильне значення font-weight: під час використання жирного шрифту важливо вибрати правильне значення властивості font-weight, щоб текст був чітким і легким для читання.

Для заголовків краще використовувати жирніший шрифт, а для звичайного тексту — тонший. Також варто переконатись, що жирного шрифту небагато і він не відвертає уваги від інших елементів.

Балансуйте жирний шрифт з іншим форматуванням: жирний шрифт допоможе привернути увагу до важливої інформації, однак його важливо балансувати з іншим форматуванням, щоб створити візуальну ієрархію.

Використовуйте курсив, підкреслення або різні розміри чи кольори шрифту, щоб вирізняти рівні важливості.

Уникайте надмірного використання жирного шрифту: надмірне використання жирного шрифту може ускладнити читання тексту та погіршити загальний дизайн сторінки.

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

Перевірте доступність: якщо ви використовуєте жирний шрифт, переконайтесь, що він доступний всім користувачам, включно з тими, у кого порушення зору.

Читачам екрана важко читати стилізований текст, тому важливо перевірити сторінку, використовуючи інструменти доступності, аби переконатись, що текст правильно відформатований та доступний.

Висновок

Жирний шрифт може ефективно наголосити на важливій інформації та створити візуальну ієрархію.

Виберіть правильне значення font-weight, збалансуйте жирний шрифт з іншим форматуванням, не використовуйте його часто та перевірте доступність, щоб жирний текст був читабельним та доступним усім користувачам.

Дякую, що прочитали!

Вирушайте в подорож програмуванням! Перегляньте 200+ статей про веброзробку. Зайдіть на мій блог, щоб знайти більше цікавої інформації.

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

Тому, коли у вас виникають проблеми з CSS — не сердіться. Таке буває з кожним.

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

1. Як прибрати горизонтальну смугу прокручування вебсторінки в CSS

Якщо ви стилізуєте вебсторінку та бачите горизонтальну смугу прокручування знизу, вам потрібно знайти елемент, ширина якого більша за доступну ширину екрана.

У прикладі на знімку екрана ви можете побачити горизонтальну смугу прокручування:

Ви можете використати універсальний селектор (*), щоб знайти потрібний елемент, застосувавши наступні правила:

* { 
     border: 2px solid red;
}

Це надасть червоного кордону 2px до кожного елементу на сторінці, що допоможе легко знайти елемент, який потрібно змінити.

Ось результат після застосування стилю:

Як бачите, друга зелена хвилька призводить до горизонтальної смуги прокручування. Причина в тому, що ширина має значення 1400px, а доступною шириною екрана є 1200px.

.wave2 {
  width: 1400px;
}

Щоб прибрати горизонтальну смугу прокручування, потрібно налаштувати ширину на 1200px або повністю видалити елемент.

2. Як ігнорувати стиль у CSS

У деяких випадках потрібно змінити стиль, який вже існує (наприклад, у бібліотеці). Або у вас є шаблон із великою таблицею стилів, де потрібно змінити певну частину.

У таких випадках можна застосувати правила специфічності CSS або використати виняток !important перед правилом.

У прикладі нижче !important надає кожному елементу h1 смарагдового кольору #2ecc71 (мій улюблений колір):

h1 {
    color: #2ecc71 !important;
}

Але будьте обережними: використовувати цей виняток вважається поганою практикою, яку потрібно уникати.

Причина в тому, що !important руйнує каскадну природу CSS і це може ускладнити налагодження.

!important варто використовувати, щоб знайти проблему у базі даних, якщо ви працюєте з величезною таблицею стилів чи старим кодом. У такому разі ви зможете швидко вирішити проблему та вилучити виняток.

Замість того, щоб використовувати !important для додавання стилів, ви можете дізнатись більше про специфічність CSS та застосувати ці правила.

3. Як зробити квадрат із CSS

Якщо ви хочете створити квадрат, не надто працюючи над шириною та висотою, ви можете стилізувати div (або span), встановивши колір фону, потрібну ширину та значення aspect-ratio на рівні числа. Перше число використовують для верхнього та нижнього розміру, а друге — для лівого та правого.

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

<div class="square"></div>

.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}

4. Як відцентрувати div із CSS

Відцентрувати div може бути важкою справою, оскільки таблиця стилів збільшується. Щоб стилізувати будь-який div, надайте йому display зі значенням block, margin зі значенням auto та width зі значенням менше 100%.

<div class="center"></div>

.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}

5. Як вилучити зайвий відступ у блоці в CSS

Завдяки box-sizing: border-box можна впевнитись, що у блоці не буде зайвого відступу, коли ви налаштовуєте його ширину та відступ. Це допоможе вашим макетам мати кращий вигляд.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

6. Як зробити буквицю за допомогою CSS

Ви можете зробити буквицю з першої літери псевдоелемента. Саме так! Ту саму буквицю, яку ви бачите у друкованих виданнях.

Оберіть відповідний елемент HTML та застосуйте до нього стиль, як зробив я:

 <p class="texts">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 </p>

p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}

7. Як змінити регістр у CSS

Великі чи малі літери не обов’язково повинні надходити з HTML. Ви можете зробити будь-який текст у ВЕРХНЬОМУ чи нижньому регістрі в CSS.

Сподіваюсь, у майбутньому будуть опції для SentenceCase та tOGGLEcASE. Але для чого використовувати tOGGLEcASE?

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

8. Як оголосити змінні, щоб CSS не повторювався

Змінні? Так. Ви можете оголосити змінні у CSS.

Якщо змінні оголошені, їх можна використовувати в різних стилях. Якщо вам потрібно щось змінити, ви змінюєте лише змінну, а результат буде відображено всюди, де вона використана. Завдяки цьому ваш CSS не буде повторюватись.

Ви можете оголосити змінну, розмістивши її у кореневій області, щоб вона була глобальною у таблиці стилів. А щоб використовувати змінну, помістіть властивість всередині фігурних дужок поруч з ключовим словом «var».

Змінні часто оголошують зверху таблиці стилів, тобто перед скиданням.

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

9. Як використовувати селектори :before та :after, щоб додати додатковий вміст до CSS

Селектор :before у CSS дозволяє додати вміст перед елементом:

<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>

p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}

Селектор :after виконує те саме, але додає вміст після елемента:

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}

10. Як отримати плавне прокручування завдяки чистому CSS

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

html {
  scroll-behavior: smooth;
}

Це все!

Дякую, що прочитали. Зв’яжіться зі мною через портфоліо та твіттер, де я зазвичай пишу твіти і взаємодію з темами програмування й веброзробки.

У CSS багато різних одиниць вимірювання. Існують пікселі, відсотки, vh, vw, em, rem тощо.

Іноді потрібно отримати значення, об’єднавши дві чи більше одиниць вимірювання. CSS має функцію, яку можна використати для таких розрахунків — calc(). У цій публікації ви дізнаєтесь, як вона працює.

Існують й інші функції, які ви можете використовувати з відповідними одиницями (наприклад, max, min та clamp) та які використовують доречне значення, коли зустрічаються з різними значеннями. Вони особливо корисні в адаптивних макетах та можуть бути альтернативою медіазапитів.

Якщо ви навчитесь використовувати їх правильно, ви уникнете різкої зміни макету, яка трапляється при зміні розміру вікна, якщо ви використовували медіазапит. І код буде меншим!

Як використовувати функцію calc() у CSS

Функція calc приймає один параметр. Цей параметр може бути виразом, який складається з будь-якої одиниці та математичного оператора +, -, /, *.

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

У виразі всередині функції calc() ви можете використовувати змінні CSS, значення, отримані з attr(), і значення з функцій max(), min() та clamp().

calc() дозволяє обчислити значення з комплексних параметрів.

div {
    width: calc(100% - 2em);
}

Примітка: завжди залишайте пробіл з обох сторін математичних операторів.

Як використовувати функцію max() у CSS

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

Можна подумати, що функцію max можна використати, щоб знайти найменше число.

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

Наприклад:

h1 {
    font-size: max(1rem, 10vh);
}

У такому разі текст становитиме десяту частину висоти вікна (за умови, що висота не стане замалою). Текст завжди матиме font-size зі значенням принаймні 1rem, щоб забезпечити легкість для читання.

Як використовувати функцію min() у CSS

Як і функція max, min приймає декілька аргументів (включно з іншими функціями max, min чи clamp) та повертає найменше значення.

Можна подумати, що завдяки функції min можна знайти найбільше значення.

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

Ви б написали щось схоже:

.form {
    width: min(600px, 90vw);
}

Ваша сторінка матиме ширину, яка дорівнює 90% ширини вікна перегляду, або 600 пікселям, незалежно від найменшого розміру. Якщо ширина вікна перегляду більша за ~670 пікселів, форма не буде розтягуватись горизонтально.

Приклад min() та max():

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

Як використовувати функцію clamp() у CSS

Функція clamp скріпляє значення між максимальним й мінімальним лімітом та обирає значення між ними.

clamp приймає три значення. Перше значення є мінімальним, друге — переважним, а третє — максимальним.

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

Використовуйте clamp, щоб елементи макету адаптовано змінювали розмір у межах діапазону.

h1 {
    font-size: clamp(1rem, 10vw, 2rem);
}

div {
    padding: clamp(10px, 6vw, 50px);
    width: clamp(140px, 90vw, 600px);
}

Приклад clamp:

Перегляньте це в дії! Змініть розмір горизонтально. Ви побачите, як різні елементи змінюють розміри.

MDN має детальнішу інформацію щодо цих функцій:

• calc
• max
• min
• clamp

Ви коротко дізнались про чотири чудові функції. Цих знань достатньо, щоб почати використовувати їх, тому до роботи!

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

Відступ та поле контролюють місце навколо елемента, але роблять це по-різному.

Поле (margin) — це місце поза елементом. Це місце між елементом та елементами навколо нього.

Якщо ви хочете, щоб елемент був розміщений подалі від інших елементів, збільште значення властивості margin.

Відступ (padding) — це місце всередині елемента. Це місце між елементом та його вмістом.

Приклад поля у CSS

Ось так можна надати елементу поле у CSS:

.element {

  margin: 10px;

}

Приклад поля у HTML

А ось так можна надати елементу поле в HTML (пам’ятайте, що в більшості випадків це вважається лінивою практикою).

<div style="margin-top:100px;">Певний текст.</div>

Приклад відступу в CSS

Ось так можна надати елементу відступ у CSS:

.element {

  padding: 10px;

}

Звичайно, у HTML можна зробити так само:

<div style="padding-top:20px;">Певний текст.</div>

Це все. Вперед до стилізації елементів.

Сподіваюсь, публікація була корисною. Якщо хочете дізнатись більше про програмування та технології, спробуйте навчальну програму freeCodeCamp. Вона безоплатна.

Якщо ви веброзробник, ви, ймовірно, хотіли прибрати підкреслення, яке з’являється для посилання на сторінку за замовчуванням.

На щастя, ви можете стилізувати теги посилання, як і всі інші елементи вебсторінки.

У цій публікації я покажу, як прибрати підкреслення для посилання за допомогою CSS. Я також покажу чотири можливі стани посилання та як прибрати підкреслення для кожного.

Як прибрати підкреслення для посилання у CSS

За замовчуванням тег посилання у браузері виглядає так:

По-перше, важливо знати, що тег посилання може перебувати у 4 різних станах, які називають псевдокласами:

• a:link: звичайний стан неактивного посилання (користувач не відвідав його або не навів мишкою)
• a:visited: користувач відвідав посилання
• a:hover: користувач наводить мишкою на посилання
• a:active: користувач натискає на посилання

Примітка: стани (псевдокласи) мають з’являтися у вищеподаному порядку через каскадну природу CSS.

Щоб прибрати підкреслення за замовчуванням, можна націлити всі псевдокласи та призначити їм властивість text-decoration зі значенням none.

<p>This is a <a href="#">link</a></p>

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Ви також можете прибрати підкреслення в один прийом за допомогою селектора елемента посилання:

 a {
       text-decoration: none;
}

Можете погратися з 4 псевдокласами тегу посилання:

Висновок

Сподіваюсь, ця публікація допомогла дізнатись, як прибрати підкреслення для посилань у CSS.

Якщо публікація була корисною, не забудьте поділитися з друзями та рідними.

Дякую, що прочитали.

Вважається, що таблиці стилів CSS найкраще зберігати у зовнішньому файлі. А як додати CSS до файлу HTML?

Посилання на зовнішній файл CSS є важливою частиною будь-якої шаблонної сторінки HTML. У цій публікації ми дізнаємося, як це зробити.

Як додати файл CSS до файлу HTML

Ви можете додати файл CSS до свого файлу HTML, додавши елемент link всередині елемента head свого файлу HTML, ось так:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    </body>
</html>

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

Атрибут rel

Перший з двох необхідних атрибутів — атрибут rel. Цей атрибут використовують, щоб повідомити браузеру про стосунки з імпортованим файлом.

Напишіть rel="stylesheet", аби повідомити браузер, що ви імпортуєте таблицю стилів.

Атрибут href

Другим необхідним атрибутом є href, який вказує файл для імпорту.

Файли CSS та HTML часто знаходяться в одній папці. У такому разі можна написати href="style.css".

Якщо файли CSS та HTML знаходяться в різних папках, вам потрібно написати шлях від файлу HTML до файлу CSS.

Наприклад, часто файл CSS знаходиться в папці, яка є братською для файлу HTML:

project --- index.html
            css ---------- style.css

У такому разі шлях потрібно написати ось так: "css/styles.css".

Атрибут type

<link rel="stylesheet" href="style.css" type="text/css">

Атрибут type використовують, щоб визначити тип змісту. Для таблиці стилів це буде text/css. Але оскільки css є єдиною використаною мовою таблиць стилів, його краще не використовувати.

Атрибут media

<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)">

Атрибут media не видно в прикладі. Це додатковий атрибут, за допомогою якого можна вказати, коли імпортувати певну таблицю стилів. Його значенням повинен бути медіатип або медіазапит.

Він може бути корисним, якщо ви хочете розділити стилі для різних пристроїв і розмірів екрана в окремих файлах. Вам потрібно буде імпортувати кожен файл CSS із власним елементом link.

Ви можете переглянути ці публікації (або інші джерела) про медіазапити, щоб дізнатись більше про значення атрибута:

• як використовувати медіазапити CSS для створення адаптивного вебсайту
• як встановити діапазони ширини для медіазапитів CSS
• медіазапит в CSS: стандартна роздільна здатність, контрольні точки та цільові розміри телефону

Висновок

У цій публікації ви дізналися, як додати зовнішню таблицю стилів до вебсторінки за допомогою елемента link та атрибутів href й rel.

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

Розважайтесь над створенням вебсторінок!

Ви розпочали створювати свою сторінку HTML та хочете надати їй трішки кольору. Можливо, ви захотіли змінити колір тексту або встановити хороший фон. Як це зробити?

У цій публікації я покажу, як змінити фоновий колір сторінки декількома способами.

Як змінити фоновий колір елемента HTML

Ви можете змінити фоновий колір елемента HTML, використавши CSS-властивість background-color та надавши їй значення кольору.

p {
  background-color: pink;
}

Наприклад, цей код зробить так, що усі елементи абзацу у файлі HTML матимуть рожевий фон, оскільки властивість background-color має значення pink.

Існує більше 140 кольорів, які ви можете використати. Наприклад, teal, hotpink, indigo та інші.

Примітка: якщо ви надасте background-color елементу та не побачите змін, це може бути помилкою синтаксису або елемент не має висоти чи ширини. Спробуйте надати йому якогось вмісту або надайте ширини та висоти, використовуючи CSS-властивості width та height.

Насправді існує більше 16,8 мільйона кольорів, які ви можете використати. Ці кольори застосовуються зі значенням RGB. Існують й кольори HSL, яких нараховують 3,7 мільйона. У наступному розділі ви дізнаєтесь про різні шляхи створення кольорів.

Різні системи позначення кольорів

Властивість background-color приймає кольори як можливі значення. Зараз ми розглянемо чотири системи позначення кольорів.

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

Другим і третім способами є значення RGB та шістнадцяткові значення. У цих системах кольори ідентифікуються кількістю червоного, зеленого та синього у них.

Це залежить від того, як екран створює колір. Екран складається з пікселів, і кожен піксель освітлюється світлодіодами трьох різних кольорів (зелений, синій та червоний), які можуть світити з різною інтенсивністю.

Четвертою системою є кольори HSL, або Hue-Saturation-Lightness (укр. відтінок-насиченість-освітленість). Це позначення походить від графічного дизайну, оскільки воно відображає природніший спосіб людського уявлення про колір: чистий колір (відтінок), насиченість і освітленість якого можна змінювати.

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

Імена кольорів HTML

У першій версії HTML існує 16 базових кольорів, а сьогодні ви можете використовувати більше 140.

body {
  background-color: black;
}

Вкінці публікації є додаток з усіма іменами кольорів.

Кольори RGB

RGB означає Red-Green-Blue (укр. червоний-зелений-синій). У такому форматі кольори записують як rgb(0,0,0), де кожне значення між 0 та 255 предаставляє кількість червоного, зеленого та синього, використаних для створення кожного кольору.

Наприклад, якщо ви маєте rgb(0,0,0), ви отримаєте чорний.

Щоб отримати червоний, напишіть rgb(255,0,0) зі значеннями 255 для червоного, 0 для синього та 0 для зеленого.

Ви можете отримати інші варіації червоного завдяки малим кількостям зеленого та/або синього і меншій кількості червоного. Наприклад, ви отримаєте цинобровий колір із rgb(255,69,0) та кармазиновий із rgb(139,0,0).

div {
  background-color: rgb(139,0,0);
}

Нижче наведено приклад того, як змінюється колір, коли ви налаштовуєте два значення RGB: верхній лівий кут кольорового квадрата дорівнює rgb(0,0,0), верхній правий — rgb(0,0,255), нижній лівий кут — rgb(0,255,0), а нижній правий кут — rgb(0,255,255).

На щастя, вам не потрібно вгадувати числа, щоб отримати потрібний колір. В інтернеті можна знайти безліч відбірників кольору, які дозволяють вибрати колір за допомогою повзунків (або іншими методами) і надають вам потрібне значення RGB.

Шістнадцяткові кольори

Шістнадцяткові кольори є іншим способом написання кольорів RGB. Шістнадцяткові також мають три числа для кожного кольору із 256 можливими значеннями.

Однак у такому випадку кожен колір має два символи від 0 до F (тобто 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 та A, B, C, D, E, F). Один символ має 16 можливих значень, а два символи мають 256 можливих значень від 00 до FF (255).

Перед значенням шістнадцяткового кольору пишеться #. Наприклад, червоний записують як #FF0000, кармазиновий — #8B0000, а цинобровий — #FF4500.

h1 {
  background-color: #FF4500;
}

Щоб отримати шістнадцяткове значення, також можна використати відбірник кольору.

Скорочення шістнадцяткових

Шістнадцяткові числа можна написати у скороченій формі, використовуючи лише три символи замість шести. Наприклад, ви можете записати червоний як #F00. Це зменшує кількість можливих кольорів до трохи більше 4000, але це скорочена форма, яка іноді важливіша.

Кожен символ відповідає за два ідентичні символи, тому ми не можемо написати #8B0000 у скороченій формі, оскільки 8 та B не ідентичні. Але ми можемо написати #800, яке дорівнює #880000, та дуже схоже до кармазинового. А цинобровим може бути #F40 (замість #FF4400).

Кольори HSL

HSL означає Hue-Saturation-Lightness (укр. відтінок-насиченість-освітленість) і це зовсім інший метод написання кольорів.

Кольори HSL представлені трьома числами: відтінок від 0 до 360, а насиченість і освітленість від 0 до 100.

Відтінок визначає базовий колір, а його значенням є градус на колірному колі. У цьому разі червоним є 0, зеленим — 120, синім — 240, та знову червоним — 360.

Насиченість починається з 0 (сірого кольору) та закінчується на 100 (повний колір).

Освітленість — це кількість доданого чорного чи білого до кольору. 0 є чорним, 50 — сам колір, а 100 — білий.

Наприклад, ви б написали червоний як hsl(0,100%,50%), цинобровий — hsl(16,100%,50%), а кармазиновий — hsl(0,100%,27%).

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

Розглянемо це в дії із шістнадцятковим, наприклад, помаранчевим (#FFA500 або rgb(255,166,0)), записаним у HSL як hsl(39,100%,50%). Світліший колір можна отримати, просто збільшивши освітленість.

Наприклад, ви можете написати hsl(39,100%,65%), щоб отримати світліший помаранчевий. В інших системах вам би довелось писати rgb(255,193,77) або #FFC14D.

Для кольорів HSL також можна використовувати відбірники кольору.

Скорочена властивість

Ви також можете встановити фоновий колір за допомогою скороченої властивості background.

p {
  background: pink;
}

body {
  background: black;
}

div {
  background: rgb(139,0,0);
}

h1 {
  background: #FF4500;
}

main {
  background: hsl(39,100%,65%);
}

Це набагато гнучкіша властивість, оскільки вона є скороченням для багатьох властивостей background, як-от background-image та background-position. Коли ви використовуєте її зі значенням кольору, вона працює точно так само, як background-color.

Висновок

Ви дізнались, як надати фоновий колір своїм елементам HTML, використовуючи властивість background-color та її скорочення background, а також про різні системи позначення кольорів.

Тепер ви маєте всі інструменти, необхідні для додавання кольорів до вебсторінок. Насолоджуйтесь!

Додаток

Усі 140+ імен кольорів

Варіації правопису

Імена кольорів зі словом «Gray» можна писати як «Grey», як показано нижче.

У цій публікації ми розглянемо стилізацію кнопок за допомогою CSS.

Моя головна задача — роз’яснити використання правил CSS. Ми не будемо розглядати ідеї для стилізування.

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

Спершу ви дізнаєтесь, як створити кнопку в HTML. Потім ви вивчите, як позбутись стилізації кнопок за замовчуванням. Вкінці ви коротко дізнаєтесь, як стилізувати кнопки трьох різних станів.

Зміст

1. Створення кнопки в HTML
2. Зміна стилізації кнопок за замовчуванням
3. Зміна кольору фону
4. Зміна кольору тексту
5. Зміна краю
6. Зміна розміру
7. Стани кнопки
8. Стилізація стану hover
9. Стилізація стану focus
10. Стилізація стану active
11. Висновок

Розпочнемо!

Як створити кнопку в HTML

Використайте елемент <button>, щоб створити кнопку.

Це доступніший варіант, порівняно із використанням загального контейнера, створеного за допомогою елемента <div>.

У поданому нижче файлі index.html я створила базову структуру для вебсайту та додала одну кнопку:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Button Style</title>
</head>
<body>
    <button type="button" class="button">Click me!</button>
</body>
</html>

Розберемо рядок <button type="button" class="button">Click me!</button>:

• Спершу ви додаєте елемент-кнопку, що складається із початкового <button> та кінцевого </button> тегів.
• Атрибут type="button" у початковому тегу <button> створює активну кнопку. Оскільки ця кнопка не створена для відправки форми, її корисно додати, щоб зробити код чистішим та вберегти від небажаних дій.
• Атрибут class="button" буде використано, щоб стилізувати кнопку в окремому файлі CSS. Значення button може бути будь-яким іншим. Наприклад, можна було використати class="btn".
• Текст Click me! — це видимий текст всередині кнопки.

Усі застосовані до кнопки стилі будуть всередині файлу style.css.

Перед стилізацією вмісту HTML потрібно сполучити два файли. Це виконується за допомогою тегу <link rel="stylesheet" href="style.css">, який було використано в index.html.

У файлі style.css я лише додала стилізацію, яка відцентровує кнопку за центром вікна.

Зверніть увагу, що class="button" використовується із селектором .button. Це один зі способів застосувати стилізацію напряму до кнопки.

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Код зверху призведе до наступного результату:

Стилізація кнопки за замовчуванням залежить від вашого браузера.

Це приклад стилізації кнопок за замовчуванням у браузері Google Chrome.

▫️ Як змінити стилізацію кнопок за замовчуванням

Як змінити колір фону кнопок

Використовуємо властивість background-color та надаємо їй бажане значення, щоб змінити колір фону кнопки.

Використайте background-color:#0a0a23; у селекторі .button, щоб змінити колір фону кнопки.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

Як змінити колір тексту кнопок

Колір тексту за замовчуванням — чорний, тому якщо ви зробите темний фон, то зникне текст.

Важливо, щоб був контраст між кольорами фону та тексту. Це допоможе зробити текст читабельнішим та легшим для очей.

Використовуємо властивість color, щоб змінити колір тексту:

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
}

Як змінити край кнопок

Бачите сірий колір навколо кнопки? Це колір краю за замовчуванням.

Позбутися цього можна за допомогою властивості border-color. Потрібно встановити таке ж саме значення, що й значення background-color. Завдяки цьому край має такий ж самий колір, що й фон кнопки.

Також можна повністю видалити край, використовуючи border:none;.

.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
}

Край кнопки можна округлити, використовуючи властивість border-radius:

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
  }

За допомогою властивості box-shadow можна додати легку тінь навколо кнопки:

 position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);

Як змінити розмір кнопок

Всередині кнопки можна створити більше місця, якщо збільшити padding.

Знизу я додала значення 15px до верхнього, нижнього, правого та лівого відступів.

Також я встановила мінімальні висоту та ширину, min-height та min-width відповідно. Кнопки повинні бути достатньо великими для різних пристроїв.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none; 
    border-radius:10px; 
    padding:15px;
    min-height:30px; 
    min-width: 120px;
  }

▫️ Як стилізувати стани кнопок

Кнопки мають три різні стани:

• :hover
• :focus
• :active

Найкраще, коли вони стилізовані по-різному.

У наступних розділах я коротко опишу кожен стан. Ви також побачите декілька способів стилізації кнопки для кожного стану.

Як стилізувати стан hover

Стан :hover настає, коли користувач наводить мишкою на кнопку, але не натискає на неї.

Щоб кнопка змінювалась, коли на неї наводять мишкою, використовуйте псевдоклас :hover.

Найчастіше за допомогою :hover змінюють фон кнопки.

Щоб ця зміна не була різкою, використайте властивість transition разом із :hover.

Властивість transition допоможе зробити плавніший перехід до стану :hover.

Зміна фону відбудеться дещо швидше, в порівнянні без властивості transition. Крім того, це не буде різати око та дратувати користувача.

.button:hover {
      background-color:#002ead;
      transition: 0.7s;
  }

У прикладі вище я використала значення, завдяки якому кнопка буде світлішою, якщо на неї навести мишкою.

За допомогою властивості transition я створила й час затримки 0.7s, за який відбувається перехід до стану :hover. Це призвело до повільнішого переходу від початкового фону #0a0a23 до #002ead.

Зауважте, що псевдоклас :hover не працює на мобільних пристроях та мобільних застосунках. Використовуйте цей ефект лише для несенсорних пристроїв.

Як стилізувати стан focus

Стан :focus впливає на користувачів клавіатури: він активується, якщо навести на кнопку за допомогою клавіші Tab (⇥).

Після натиснення клавіші Tab ви побачите наступне:

Бачите синій контур навколо кнопки під час фокусу?

Для псевдокласу :focus браузери мають стилізацію за замовчуванням (з огляду на навігацію за допомогою клавіатури). Тому краще не видаляти outline повністю.

Однак ви можете створити власну стилізацію, щоб кнопку було легко найти.

Спочатку встановіть контур на transparent.

Після цього ви можете залишити outline-style на solid. Вкінці, використовуючи властивість box-shadow, ви можете додати бажаний колір, коли елемент сфокусований:

 .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
}

Ці стилі теж можна об’єднати із властивістю transition, залежно від бажаного результату:

  .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
    transition: 0.7s;
}

Як стилізувати стан active

Стан :active стає активним, якщо натиснути на кнопку.

Гляньте, що відбувається із кнопкою, якщо натиснути на неї після того, як я застосувала та зберегла стилі для станів :hover та :focus:

Стилі стану :hover застосовані тоді, коли я навожу мишкою.

Стилі стану :focus теж застосовані, тому що коли кнопку натискають, вона переходить в :focus разом із :active.

Однак майте на увазі, що це не одне й те саме.

Стан :focus — це коли елемент сфокусований, а при стані :active користувач натискає на елемент.

Щоб змінити стиль, коли користувач натискає на кнопку, застосуйте стилі до псевдоселектора :active.

У цьому прикладі я змінила колір фону кнопки, коли користувач натискає на неї:

.button:active {
    background-color: #ffbf00;
}

Висновок

Що ж! Тепер ви знаєте основи стилізації кнопки за допомогою CSS.

Ми переглянули, як змінити колір фону та тексту кнопок, а також стилізацію при різних станах.

Щоб дізнатись більше про вебдизайн, перегляньте сертифікацію «Адаптивний вебдизайн». Завдяки інтерактивним урокам ви вивчите HTML та CSS, побудуючи 15 практичних та 5 сертифікаційних проєктів.

Дякую, що прочитали. Щасливого програмування!

Багатьом розробникам важко працювати із зображеннями. Надзвичайно важко з адаптивністю та вирівнюванням, особливо посередині сторінки.

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

Горизонтальне центрування зображення

Розпочнемо з горизонтального центрування зображення за допомогою трьох різних властивостей CSS.

Text-Align

Перший спосіб: використати властивість text-align. Однак цей метод працює лише тоді, коли зображення знаходиться всередині контейнера на рівні блоку, наприклад <div>:

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

Margin: Auto

Другий спосіб: використати властивість margin: auto (для лівого та правого полів).

Однак просто використати margin: auto не вийде. Окрім margin: auto потрібно використати ще дві додаткові властивості.

Властивість margin-auto не впливає на рядкові елементи. Оскільки тег <img> є рядковим елементом, спершу потрібно конвертувати його в елемент на рівні блоку:

img {
  margin: auto;
  display: block;
}

По-друге, нам потрібно визначити ширину. Таким чином ліве та праве поля можуть зайняти решту порожнього простору та автоматично вирівнятися (якщо ми не задамо ширину 100%):

img {
  width: 60%;
  margin: auto;
  display: block;
}

Display: Flex

Третій спосіб: використати display: flex. Так само як ми використали властивість text-align для контейнера, ми використаємо display: flex.

Однак просто використати display: flex не вийде. Контейнер повинен мати додаткову властивість justify-content:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

Властивість justify-content працює разом із display: flex, що ми можемо використати для горизонтального центрування.

Зрештою, ширина зображення повинна бути меншою за ширину контейнера. В іншому разі, воно займе 100% простору та ми не зможемо його відцентрувати.

Важливо: властивість display: flex не підтримується на старих версіях браузерів.

Вертикальне центрування зображення

Display: Flex

display: flex знову буде в нагоді.

Розглянемо випадок, де контейнер має висоту 800px, а висота зображення — лише 500px:

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

В такому випадку все вирішує додавання до контейнера одної лінії коду — align-items: center:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

Властивість align-items може розставити елементи вертикально, якщо використана разом із display: flex.

Властивості Absolute та Transform

Інший метод для вертикального розташування — використати властивості position та transform разом. Це трішки важко, тому зробимо все покроково.

Крок 1: абсолютна позиція

Спочатку ми змінюємо позиціювання зображення з static на absolute:

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

Крім того, воно повинне бути всередині відносно розташованого контейнера, тому ми додаємо position: relative до div контейнера.

Крок 2: верхня та ліва властивості

Потім ми визначаємо верхню і ліву властивості зображення та встановлюємо їх на 50%. Це перемістить початкову точку зображення (верхній лівий кут) до центру контейнера:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

Крок 3: трансформація

Другий крок частково перемістив зображення за межі контейнера. Потрібно повернути його всередину.

Потрібно визначити властивість transform та додати -50% до осей X і Y:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Існують інші способи горизонтального та вертикального центрування, але я описав найпоширеніші. Надіюсь, ця публікація допомогла вам зрозуміти, як вирівняти зображення посередині сторінки.

Дякую, що прочитали!

Центрування є одним з найважчих аспектів CSS.

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

Метод, який ви можете використати, залежить від елемента HTML, який ви хочете відцентрувати, або від того, центруєте ви його горизонтально чи вертикально.

У цій публікації ми розглянемо, як відцентрувати різні елементи горизонтально, вертикально та одночасно вертикально і горизонтально.

Як відцентрувати горизонтально

Відцентрувати елементи горизонтально легше, ніж відцентрувати їх вертикально. У публікації подано декілька поширених елементів, які вам, можливо, потрібно відцентрувати горизонтально.

Як відцентрувати текст за допомогою властивості Text-Align Center

Щоб відцентрувати текст або посилання горизонтально, використайте властивість text-align зі значенням center:

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Відцентрувати горизонтально*/
  text-align: center;
}

Як відцентрувати div за допомогою Margin Auto

Використайте скорочену властивість margin зі значенням 0 auto, щоб горизонтально відцентрувати елементи рівня блоку (наприклад div):

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Відцентрувати горизонтально*/
  margin: 0 auto;
}

Як відцентрувати div горизонтально за допомогою Flexbox

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

Щоб відцентрувати елемент горизонтально за допомогою Flexbox, застосуйте display: flex та justify-content: center до батьківського елемента:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Відцентрувати дочірній елемент горизонтально*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

Як відцентрувати вертикально

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

Як відцентрувати div вертикально за допомогою абсолютного позиціювання та від’ємних полів

Довгий час це був популярний спосіб вертикального центрування. Для цього методу потрібно знати висоту елемента, який ви хочете відцентрувати.

Спочатку встановіть властивість position батьківського елемента на relative.

Потім встановіть властивість position дочірнього елемента на absolute та top на 50%:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Відцентрувати вертикально */
  position: absolute;
  top: 50%;
}

Але насправді це вертикально відцентрує лише верхній край дочірнього елемента.

Щоб дійсно відцентрувати дочірній елемент, встановіть властивість margin-top на -(половину висоти дочірнього елемента):

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Відцентрувати вертикально */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* Половина висоти цього елемента */
}

Як відцентрувати div вертикально за допомогою Transform та Translate

Якщо ви не знаєте висоту елемента, який хочете відцентрувати (або навіть якщо знаєте), цей метод — те, що треба.

Цей метод схожий до описаного вище (з від’ємними полями). Встановіть властивість position батьківського елемента на relative.

Для дочірнього елемента встановіть властивість position на absolute та встановіть top на 50%. Тепер замість від’ємних полів використайте transform: translate(0, -50%):

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Відцентрувати вертикально */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

Зауважте, що translate(0, -50%) є скороченою для translateX(0) та translateY(-50%). Щоб відцентрувати дочірній елемент вертикально, ви могли також написати transform: translateY(-50%).

Як відцентрувати div вертикально за допомогою Flexbox

Завдяки Flexbox легко відцентрувати елементи як горизонтально, так і вертикально.

Щоб відцентрувати елемент вертикально, застосуйте display: flex та align-items: center до батьківського елемента:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Відцентрувати вертикально */
  display: flex;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

Як відцентрувати вертикально та горизонтально одночасно

Як відцентрувати div вертикально та горизонтально за допомогою абсолютного позиціювання та від’ємних полів

Цей метод дуже схожий до того, як відцентрувати елемент вертикально. Як і того разу, ви повинні знати ширину та висоту елемента, який хочете відцентрувати.

Встановіть властивість position батьківського елемента на relative.

Потім встановіть властивість position дочірнього елемента на absolute, top на 50% та left на 50%. Це просто відцентрує верхній лівий кут дочірнього елемента вертикально та горизонтально.

Щоб дійсно відцентрувати дочірній елемент, застосуйте від’ємне верхнє поле (встановлене на половину висоти дочірнього елемента) та від’ємне ліве поле (встановлене на половину ширини дочірнього елемента):

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Відцентрувати вертикально та горизонтально */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* Застосуйте від'ємне верхнє та ліве поле, щоб дійсно відцентрувати елемент */
}

Як відцентрувати div вертикально та горизонтально за допомогою Transform та Translate

Використовуйте цей метод, якщо не знаєте точних розмірів елемента або не можете використати Flexbox.

Спочатку встановіть властивість position батьківського елемента на relative.

Потім встановіть властивість position дочірнього елемента на absolute, top на 50% та left на 50%.

Зрештою використайте transform: translate(-50%, -50%), щоб дійсно відцентрувати дочірній елемент:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Відцентруйте вертикально та горизонтально */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Як відцентрувати div вертикально та горизонтально за допомогою Flexbox

Flexbox — це найлегший спосіб відцентрувати елемент як вертикально, так і горизонтально.

Насправді це лише комбінація двох попередніх методів Flexbox. Щоб відцентрувати дочірні елементи горизонтально та вертикально, застосуйте justify-content: center та align-items: center до батьківського елемента:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Відцентруйте вертикально та горизонтально */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

Це все, що вам потрібно знати про відцентрування. Тепер ви можете сміло відцентрувати що завгодно.