ufo-sait
» » » Фони для сайту на чистому 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-ї версії цього браузера.


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



Коментарі:

Залишити свій коментар:
    • winkwinkedsmileambelayfeelfellow
      laughinglollovenorecourserequestsad
      tonguewassatcryingwhatbully
Портфоліо
Все разом Сайти ГрафікаЛоготипи Відео
Створенні сайтиРозкішна декоративна штукатурка Розкішна декоративна штукатурка
Створенні сайтиКомпанія - Нова ванна Компанія - Нова ванна
Створенні сайтиРеставрація ванн в домашніх умовах Реставрація ванн в домашніх умовах
Створенні сайтиРеставрація ванн Тернопіль Реставрація ванн Тернопіль
Створенні сайтиМагазин дитячих ліжечок Магазин дитячих ліжечок
Створенні сайтиІнтернет магазин сувенірів Інтернет магазин сувенірів
Створенні сайтиСайт для виробника ущільнювачів Сайт для виробника ущільнювачів
Створенні сайтиСайт - замовити відеоператора - розробка з анімацією Сайт - замовити відеоператора - розробка з анімацією
Створенні сайтиТорти на замовлення - розробка сайту Торти на замовлення  - розробка сайту

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

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

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

Головна перевага наших послуг: виготовлення веб-сайту під ключ в місті: Хмельницький, Тернопіль, Кам’янець-Подільський. Побудова і верстка дизайну, підключення системи управління та домену, розміщення на хостингу і наповнення сторінок - всі клопоти беремо на себе .