Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » css » Фони для сайту на чистому CSS

Фони для сайту на чистому CSS

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 21-06-2017, 00:42 1 218 0
Фони для сайту на чистому CSS

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

За допомогою невиликого коду css, можна дуже легко «намалювати» фон у вигляді діагональної сітки, у формі шахової дошки, або ж, як у шкільного зошита в клітинку.
Дивіться на результат, на нехитрий код CSS і вам відразу стане все зрозуміло, особливо розписувати тут нічого.

1. Крапки на темно-синьому тлі
  Код:

body {
padding: 0;
margin: 0;
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
background-color: #12364a;
background-size: 12px 12px;
}
body:after {
content: ";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

2. Темний фон в клітинку

 Код:

body {
 background-color:#232323; margin:0;
background-image: linear-gradient(0deg, rgba(0, 153, 204, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 204, .1) 1px, transparent 1px);
background-size:20px 20px;
background-attachment:fixed;
}

3. Діагональні лінії на темному тлі

 Код:

body{
background-color:#666;
background-image: linear-gradient(45deg, transparent,transparent 48%, rgba(255,255,255,.3) 48%, rgba(255,255,255,.3) 52%, transparent 52%);
background-size:10px 10px;
}
body:after {
content: ";
 display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}


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

Для тих кому мало! ось сервіс з сотнями фонів - https://www.transparenttextures.com/
З приводу підтримки браузерами, тут все, як завжди, сучасні браузери відмінно справляються, а ось в IE, текстури побачать користувачі не нижче 10-ї версії цього браузера.


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

 
 


Коментарі

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */