EasyCode365EasyCode365

Фони та рамки

Фони та рамки допомагають простим HTML-елементам виглядати більш візуально й організовано.

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

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

Що роблять фони та рамки

Фон знаходиться позаду контенту елемента.

За замовчуванням фон видно позаду контенту, padding і області рамки. Він не заповнює margin, тому що margin - це прозорий простір зовні елемента.

Рамка - це лінія навколо елемента.

За замовчуванням рамки додаються до фінального розміру елемента. Якщо використати box-sizing: border-box, рамка буде врахована всередині ширини, яку ти задаєш.

Можна редагувати
<div class="box-demo">
  <div class="demo-box content-box">content-box</div>
  <div class="demo-box border-box">border-box</div>
</div>

<style>
  .box-demo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-family: Arial, sans-serif;
  }

  .demo-box {
    width: 160px;
    padding: 20px;
    border: 6px solid royalblue;
    background-color: lightblue;
  }

  .content-box {
    box-sizing: content-box;
  }

  .border-box {
    box-sizing: border-box;
  }
</style>

Обидві коробки використовують width: 160px, але приклад із content-box стає ширшим після додавання padding і рамки. Приклад із border-box залишає фінальну видиму коробку саме тієї ширини, яку ти написав.

Кольори фону

Властивість background-color задає суцільний колір позаду елемента.

Можна використовувати будь-який коректний формат кольору CSS, наприклад назву кольору, hex-код, RGB або HSL.

Можна редагувати
<div class="alert-box">Не забудь зберегти роботу.</div>

<style>
  .alert-box {
    padding: 16px;
    background-color: lightyellow;
    font-family: Arial, sans-serif;
  }
</style>

Обирай такий колір фону, щоб текст було легко читати. Світлий текст на світлому фоні або темний текст на темному фоні може бути важко побачити.

Фонові зображення

Властивість background-image розміщує зображення позаду елемента.

Використовуй функцію url(), щоб сказати браузеру, де знаходиться файл зображення.

Можна редагувати
<section class="hero-section">
  <h2>Клуб походів вихідного дня</h2>
</section>

<style>
  .hero-section {
    padding: 40px;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
  }
</style>

Шлях до зображення може бути локальним шляхом до файлу або повною URL-адресою.

Пам'ятай: якщо забути url(), фонове зображення не працюватиме.

Повторення фонового зображення

За замовчуванням фонове зображення повторюється.

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

Використовуй background-repeat, щоб керувати цією поведінкою:

  • repeat: повторює зображення горизонтально і вертикально
  • no-repeat: показує зображення один раз
  • repeat-x: повторює зображення лише зліва направо
  • repeat-y: повторює зображення лише згори вниз
Можна редагувати
<div class="repeat-demo">
  <div class="pattern-box repeat-pattern">repeat</div>
  <div class="pattern-box single-pattern">no-repeat</div>
</div>

<style>
  .repeat-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .pattern-box {
    width: 140px;
    height: 90px;
    padding: 12px;
    border: 1px solid #ccc;
    background-image: radial-gradient(circle, #2563eb 3px, transparent 4px);
    background-size: 24px 24px;
  }

  .repeat-pattern {
    background-repeat: repeat;
  }

  .single-pattern {
    background-repeat: no-repeat;
  }
</style>

Маленькі патерни можуть добре виглядати з repeat. Фото та логотипам зазвичай потрібен no-repeat.

Позиція та розмір фону

Коли фонове зображення не повторюється, за замовчуванням воно починається у верхньому лівому куті.

Властивість background-position переміщує зображення всередині елемента.

Можна редагувати
<div class="logo-box">Зображення розміщене праворуч.</div>

<style>
  .logo-box {
    width: 320px;
    padding: 32px 120px 32px 20px;
    border: 1px solid #ccc;
    background-image: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=120&auto=format&fit=crop");
    background-repeat: no-repeat;
    background-position: center right;
    font-family: Arial, sans-serif;
  }
</style>

Корисні значення позиції: top, bottom, left, right і center.

Властивість background-size керує тим, наскільки великим виглядає зображення.

  • cover: заповнює весь елемент, але може обрізати частину зображення
  • contain: показує все зображення, але може залишити порожній простір
Можна редагувати
<div class="banner-demo">
  <div class="banner cover-banner">cover</div>
  <div class="banner contain-banner">contain</div>
</div>

<style>
  .banner-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .banner {
    width: 180px;
    height: 120px;
    display: grid;
    place-items: center;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
  }

  .cover-banner {
    background-size: cover;
  }

  .contain-banner {
    background-size: contain;
    background-color: #1f2937;
  }
</style>

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

Ширина, стиль і колір рамки

Рамка має три основні частини:

  • ширина: наскільки товста лінія
  • стиль: який це тип лінії
  • колір: якого кольору лінія

Більшість розробників використовує скорочення border:

Можна редагувати
<div class="card">Ця картка має рамку.</div>

<style>
  .card {
    padding: 20px;
    border: 2px solid black;
    font-family: Arial, sans-serif;
  }
</style>

Це означає:

  • 2px: ширина рамки
  • solid: стиль рамки
  • black: колір рамки

Стиль рамки обов'язковий. Якщо написати border: 2px black;, рамка не з'явиться, бо стиль відсутній.

Стилі рамки

Найпоширеніші стилі рамки:

  • solid: одна суцільна лінія
  • dashed: короткі сегменти лінії
  • dotted: маленькі крапки
  • none: без рамки
Можна редагувати
<div class="coupon">Знижка 20%</div>

<style>
  .coupon {
    display: inline-block;
    padding: 16px 24px;
    border: 2px dashed green;
    font-family: Arial, sans-serif;
  }
</style>

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

Border radius

Властивість border-radius заокруглює кути елемента.

Можна редагувати
<button class="rounded-button">Зберегти зміни</button>

<style>
  .rounded-button {
    padding: 10px 16px;
    border: 2px solid blue;
    border-radius: 8px;
    background-color: white;
    font-family: Arial, sans-serif;
  }
</style>

Маленьке значення, наприклад 6px або 8px, створює трохи заокруглені кути.

Велике значення може створити форму пігулки, особливо на кнопках.

Можна редагувати
<button class="pill-button">Продовжити</button>

<style>
  .pill-button {
    padding: 10px 24px;
    border: 2px solid purple;
    border-radius: 999px;
    background-color: lavender;
    font-family: Arial, sans-serif;
  }
</style>

Дуже великі значення border-radius не завжди створюють ідеальне коло. Фінальна форма залежить від ширини та висоти елемента.

Використовуй border-radius: 50%, коли хочеш отримати коло з квадратного елемента:

Можна редагувати
<div class="circle">CSS</div>

<style>
  .circle {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border: 3px solid #2563eb;
    border-radius: 50%;
    background-color: #dbeafe;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }
</style>

Ширина і висота однакові, тому 50% створює коло. Якби елемент був ширшим, ніж високим, те саме значення створило б овал.

Приклад для запуску: профільна картка

Цей приклад поєднує колір фону, фонове зображення, рамку та border radius.

Спробуй змінити background-size: cover; на background-size: contain; і запусти приклад ще раз.

Можна редагувати
<div class="profile-card">
  <h2>Студент CSS</h2>
  <p>Вивчає, як фони та рамки формують дизайн.</p>
</div>

<style>
  .profile-card {
    box-sizing: border-box;
    width: 320px;
    padding: 24px;
    border: 4px solid #facc15;
    border-radius: 16px;
    background-color: #1d4ed8;
    background-image: url("https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    font-family: Arial, sans-serif;
  }

  .profile-card h2 {
    margin-top: 0;
  }
</style>

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

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

Типові помилки початківців

  • Забути url(): пиши background-image: url("photo.jpg");, а не background-image: "photo.jpg";.
  • Використовувати величезні зображення: дуже великі зображення можуть сповільнювати завантаження сторінок.
  • Очікувати, що повторення вимкнене за замовчуванням: фонові зображення повторюються, якщо не встановити background-repeat: no-repeat;.
  • Забути стиль рамки: border: 2px black; не відобразиться, бо бракує solid, dashed або іншого стилю.
  • Використовувати забагато border radius: дуже великі значення можуть створювати несподівані овали або форми пігулки.
  • Використовувати низький контраст: насичене фонове зображення може зробити текст важким для читання.

Міні завдання

Запусти цей приклад кнопки:

Можна редагувати
<button>Перевірити відповідь</button>

<style>
  button {
    border: 4px dotted green;
  }
</style>

Яка ширина, стиль і колір рамки?

Перевір відповіді до тесту, коли будеш готовий.

Короткий тест із відповідями

  1. Яке значення background-size заповнює весь елемент, навіть якщо частина зображення обрізається?
  2. Чи заповнює колір фону область margin?
  3. Що станеться, якщо забути стиль рамки у скороченні border?

Відповіді:

  1. cover.
  2. Ні. Margin прозорий.
  3. Рамка не з'явиться.

Відповідь до міні завдання: ширина - 4px, стиль - dotted, колір - green.

Невеликий виклик

Стилізуй блок попередження нижче.

Твої цілі:

  • Додати світло-червоний колір фону.
  • Додати темно-червону суцільну рамку 3px.
  • Заокруглити кути на 6px.
Можна редагувати
<div class="alert-box">
  <h3>Попередження</h3>
  <p>Перевір пароль і спробуй ще раз.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
  }
</style>

Один можливий розв'язок:

Можна редагувати
<div class="alert-box">
  <h3>Попередження</h3>
  <p>Перевір пароль і спробуй ще раз.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
    background-color: lightpink;
    border: 3px solid darkred;
    border-radius: 6px;
  }
</style>

Підсумок

  • background-color задає суцільний колір позаду елемента.
  • background-image додає зображення через url().
  • background-repeat керує тим, чи повторюється фонове зображення.
  • background-position переміщує фонове зображення всередині елемента.
  • background-size керує розміром фонового зображення.
  • cover заповнює всю коробку, але може обрізати зображення.
  • contain показує все зображення, але може залишити порожній простір.
  • border може задати ширину, стиль і колір в одному рядку.
  • border-radius заокруглює кути елемента.