Як додати Fun CSS до ваших сайтів

Sep 11, 2025

Як

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

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

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

Додайте фонові CSS до елементів веб-сторінки

Фони CSS вимагають фон Шортувальна властивість, або використання більш конкретних властивостей, таких як (але не обмежуючись): Колір фону ; фонове зображення ; фонове положення ; фоновий розмір ; повторення фону ; і фонове прикріплення . Вони можуть бути визначені для фону веб-сторінки (через тіло селектор) або елементи сторінки, такі як заголовки, divs, тощо.

На самому базовому рівні ви могли б використовувати фон Щоб повернути червону сторінку:

 Тіло {
 фон: червоний;
 }

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

 Тіло {
 Фон: URL-адреса (image.png) Центр 20px no-revent fixed;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Зображення як фон (Примітка: уникати цього низького рівня контрасту у власних конструкціях)

Якщо ви хочете написати це без використання фон Shorthand, це виглядатиме так:

 Тіло {
 фонове зображення: URL (image.png);
 фонове положення: центр 20px;
 Фон-повторення: без повторюваного;
 Фонове прикріплення: фіксований;
 }

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

 Тіло {
 Фон: URL-адреса (image.png) Центр 20px No-Repeat Fixed, URL-адреса (Image-2.PNG) Центр центру NO-REPEAT FIXED;
 }

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

Зміна фонових зображень

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

 Фон-розмір: 200px 50px;

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

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'містять' (верхній) порівняно з «кришкою» (нижні) значення

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

 Фон: URL-адреса (image.png) Центр 20px / містять NO-Repeat Fixed

Використовуйте фонові зображення Retina High-Res

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

Наприклад, уявіть собі ділити з ідентифікатор з логотип . Це, відповідно, має логотип, що застосовується як фон в CSS. Це площа 150 пікселів, і тому основні CSS ви використовуєте:

 #logo {
 Ширина: 150px;
 Висота: 150px;
 Фон: URL (logo.png) без повторюваного;
 }

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

 @Media (-Webkit-min-device-pixel-співвідношення: 2),
 (Мін-резолюція: 192dpi) {
  #logo {
   фонове зображення: url ([email protected]);
  }
 }

Проблема тепер зображення @ 2x High-Res - 300 пікселів квадрат (оскільки вона має двічі роздільну здатність оригіналу), але використовується як фон для контейнера 150 пікселів. Отже, на цьому етапі ви бачите тільки чверть його.

A high-res image before a resize fix — Зображення високого рівня перед зміною розміру

Це фіксується шляхом призначення конкретного фоновий розмір вартість #logo :

 #logo {
 Ширина: 150px;
 Висота: 150px;
 Фон: URL (logo.png) без повторюваного;
 Фон-розмір: 150px 150px;
 }

Логотип високої роздільної здатності, тепер щільно всередині його контейнера

Більш сучасний спосіб роботи з кількома фоновими резолюціями та досягнення того ж результату - CSS4 набір зображень :

 #logo {
 фонове зображення: набір зображень (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

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

Робота з альфа-каналами та градієнтами

Наш остаточний наконечник у цьому палаючому швидкому (на підручникам веб-сайту) Стаття стосується альфа-каналів та градієнтів. Коли Інтернет був парові, ви часто мали дизайнерів, використовуючи "шахові" GIF для імітації альфа-каналів (кожен інший піксель був прозорим). Тепер ви просто призначаєте кольори в RGBA:

 головний {
 Фон: RGBA (255,255,255,0,7);
 }

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

Alpha channels, gradients, and some questionable colour choices — Альфа-канали, градієнти та деякі сумнівні кольорові вибори

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

Ось правило CSS з основним градієнтом:

 H1 {
 Фон: лінійний градієнт (направо, RGBA (255,255,255,1), РГБА (255,255,255,0));
}

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

Використання кутів і декількох кольорових зупинок, ви можете йти багато, набагато додатково з градієнтами. Для експериментуйте, спробуйте скористатися фотохопкою Градієнтний генератор CSS і вивчення вихідного коду (бути пам'ятним, пов'язаним прикладом додає синтаксис для старих браузерів - просто захопити лінійний градієнт лінія для власного використання).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Як показує галерею шаблонів CSS, ви можете зробити дійсно фантастичні речі з градієнтами CSS

Якщо ви любите перевірити, які досвідчені веб-професіонали можуть робити з градієнтами і фоновий розмір , перевірити Lea Verou's Галерея CSS3 . Там ви знайдете вантажі живих прикладів, які використовують градієнтів CSS, щоб створити всі види серйозних вражаючих фонових візерунків.

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

Пов'язані посилання:

Керівництво для написання кращих CSS
Створіть реактивний макет з CSS Grid
CSS трюки до революції ваших макетів

Як додати Fun CSS до ваших сайтів

Додайте фонові CSS до елементів веб-сторінки

Зміна фонових зображень

Використовуйте фонові зображення Retina High-Res

Робота з альфа-каналами та градієнтами

Як - Найпопулярніші статті

Cloud Storage для фотографій та зображень: як вибрати найкращу хмару для вашої роботи

Отримайте більше від графіту з цими порадами

Створіть анімований 3D-ефект

Як створити персонажів мультфільмів у кіно 4D

наречений непереборно пухнастий істота

Створіть приголомшливі плитні текстури в блендері

Розмалюйте епічну сцену Нью-Йорк

Використовуйте частинки для створення 3D-сплеск

Категорії