Здрастуй, мій Новомосковсктель!
Гарний килим здатний прикрасити будь-яку, навіть саму непоказну кімнату. Ваш веб-ресурс - та ж кімната. Якщо ви зробите цікаве оформлення, то зможете залучити велику кількість відвідувачів. Сьогодні я розповім вам, як зробити фон на сайті.
З власного досвіду можу сказати, що дизайн іноді набридає. Хочеться чогось нового і цікавого. Найпростіше оновити старий шаблон - змінити колір оформлення веб-ресурсу.
Поміняти дизайн можна за допомогою html або CSS. Хто не знає, це базові мови розмітки і стилів, з їх допомогою розробляються веб-сторінки сайтів.
HTML (HyperText Markup Language) в дослівному перекладі означає "мова розмітки гіпертексту", все його команди інтерпретуються браузерами і відображаються на екрані у зручній для користувача формі.
CSS (Cascading Style Sheets - каскадні таблиці стилів) являє собою формальну мову, яким описується зовнішнє оформлення документа, написаного з використанням мови розмітки. В основному він використовується для опису та оформлення зовнішнього вигляду інтернет-сторінок, які були написані за допомогою мови HTML.
Між двома мовами багато спільного, а саме схожі назви команд і методика використання. Але html - це будівельний матеріал для веб-ресурсу, а CSS - його облицювання.
Фон в html
В якості фону в html можна застосовувати такі елементи:
- колір;
- Фонове зображення;
- Текстурна картинка;
Тепер про кожен з цих елементів поговоримо докладніше.
Для установки кольору заднього фону потрібно використовувати властивість під назвою background-color тега style.
У НTML колір можна задавати:
- У вигляді 3-х пар 16-тиричном цифр, кожна з яких відповідає за свій колірний компонент (червоний, зелений, синій). Щоб було зрозуміліше, згадайте дитинство: це як змішування кольорів акварельних фарб, наприклад, синій + жовтий = зелений, і в залежності від кількості кожного виходить новий відтінок. Так ось 16-тиричном цифри і визначають кількість кожного кольору.
- Ключовими словами (green, yellow і т.д.). У цьому випадку рекомендую використовувати тільки основні кольори, так як назва відтінків браузер може не розпізнати.
- У вигляді rgb (*, *, *), де сніжинка - це число від 0 до 255. Також як і в першому випадку задається кількість певного кольору (red, green, blue) для отримання потрібного результату.
- Останнім часом став можливий і варіант rgba (*, *, *, *), де перші цифри, як і в попередньому випадку, - це кількість того чи іншого кольору, а остання - рівень непрозорості, який визначається числом від 0 до 1.
Щоб вийшов прозорий фон, треба задати властивості background-color значення transparent.
фонова картинка
А тепер подивимося, які можливості відкриває мову гіпертексту для установки фонової картинки. Здійснити задумане можна за допомогою властивості background-image.
Так як не всі малюнки мають великий розмір, іноді потрібно розтягнути його на весь екран. Припустимо, ви хочете, щоб малюнок відбивався посередині і лише один раз. Однак, браузер замість однієї великої картинки виводить велику кількість маленьких, які заповнюють собою весь екран.
Як же це зробити, якщо малюнок не гумовий? А дуже просто! Забороніть клонування з допомогою background-repeat. Допустимі значення для цієї властивості:
- заборона повторень - no-repeat;
- по обох осях - repeat;
- по вертикалі - repeat-y;
- повторення фонової картинки по горизонталі - repeat-x.
Як ви здогадалися, вам важливий перший варіант.
Звичайно, краще, щоб малюнок знаходився посередині. Саме для цього і існує така властивість, як background-position. Координати ви можете задати наступним чином:
У деяких випадках під час прокрутки сторінки потрібно фіксоване положення зображення. Фіксований фон веб-ресурсу допоможе створити властивість background-attachment. Він приймає значення fixed або scroll. Для фіксації малюнка використовуйте перше значення.
текстурний фон
Зображення, виконані у високій якості, впливають на швидкість завантаження веб-ресурсу. Але на комп'ютері в разі високошвидкісного онлайн-з'єднання це не так помітно користувачеві, як на мобільних пристроях, де такі сторінки будуть завантажуватися досить довго.
Вирішити цю проблему допоможе текстурний фон, в якому невелике зображення застосовується в якості відображення текстури. Картинка завантажується лише раз навіть в разі багаторазового повторення. Як це зробити, зрозуміло з попереднього прикладу.
засоби CSS
Вище описані властивості цілком підходять і для стильових каскадних таблиць (CSS). Для створення дизайну веб-ресурсу за допомогою CSS досить використовувати команди тих прикладів, що я наводив вище. Результат буде той же.
За допомогою CSS можна створити адаптивний задній фон, який коректно відображатиметься на будь-яких пристроях з різним розширенням екрану.
Для css стилів зазвичай створюється окремий файл. Цей варіант зручний, так як вам не доведеться постійно прописувати стилі в кожному html документі.
C повагою! Абдуллін Руслан