5 CSS стилів для блоку з фоном

67

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

Метод 1: Великий фоновий малюнок

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

Метод 1 стиля для блока с фоном

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

Дивитися Демо

Для реалізації даного методу, необхідно безпосередньо на сторінці HTML прописати наступний код:

HTML:

<div class="block">
<h2>Цільний фоновий малюнок</h2>
<p>Це демонстрація методу з використанням одного великого фонового зображення. Найбільшим недоліком даного методу є фіксований розмір блоку, розмір відображуваного тексту обмежений розміром фонового малюнка.</p>
</div>

Цілісний фоновий малюнок

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

CSS:

.block {
display:block;
width:330px;
height:209px;
background: url(huge.jpg) no-repeat 0 0;
font-size: 14px;
margin: 0 auto;
overflow: hidden
}
.block h2 {
padding: 0;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
 font-weight: 400;
font-size: 1.4em;
line-height: 1.6;
font-family: 'Open Sans', Calibri, Arial, sans-serif;
color: black
}
.block P {
width:280px;
margin:0 auto;
}

.block {
display:block;
width:330px;
height:209px;
background: url(huge.jpg) no-repeat 0 0;
font-size: 14px;
margin: 0 auto;
overflow: hidden
}
.block h2 {
padding: 0;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
font-weight: 400;
font-size: 1.4 em;
line-height: 1.6;
font-family: ‘Open Sans’, Calibri, Arial, sans-serif;
color: black
}
.block P {
width:280px;
margin:0 auto;
}

І не забуваємо, що стилі прописуємо якщо в код сторінки між тегами …, ну а сам блок відповідно в будь-яке місце тіла сторінки, після тега body
До переваг цього методу варто віднести мінімальний код HTML. Про недоліки я вже писав вище.

Метод 2: Заголовок, Тіло і Підвал

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

Метод 2 стиля для блока с фоном

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

Дивитися Демо

HTML код:

<div class="block">
<div class="header"></div>
<div class="body">
<h2>Заголовок</h2>
<hr>
<p>Це рішення з окремих колонтитулів і тіла. Має велику гнучкість, тому що блок буде розширюватися для розміщення вмісту. Цей метод має більший HTML-код.<br>
Крім того, ви не зможете надати градієнт фону.</p>
</div>
<div class="footer"></div>
</div>

Заголовок


Це рішення з окремих колонтитулів і тіла. Має велику гнучкість, тому що блок буде розширюватися для розміщення вмісту. Цей метод має більший HTML-код.
Крім того, ви не зможете надати градієнт фону.

CSS код:

.block {
display: block;width:330px;height:auto;
margin: 0 auto;
overflow: hidden
}
.block .header {
width:330px;
height:38px;
background: url(block_header.jpg) no-repeat 0 0;
}
.block .body {
width:330px;
background: url(block_tile.jpg) repeat-y 0 0;
}
.block .footer {
width:330px;
height:36px;
background: url(block_footer.jpg) no-repeat 0 0;
}
.block .body p {
width:280px;
margin:0 auto;
}

.block {
display: block;width:330px;height:auto;
margin: 0 auto;
overflow: hidden
}
.block .header {
width:330px;
height:38px;
background: url(block_header.jpg) no-repeat 0 0;
}
.block .body {
width:330px;
background: url(block_tile.jpg) repeat-y 0 0;
}
.block .footer {
width:330px;
height:36px;
background: url(block_footer.jpg) no-repeat 0 0;
}
.block .body p {
width:280px;
margin:0 auto;
}

Переваги: Гарантія роботи у всіх браузерах

Недоліки: Колір корпусу повинен бути простий, ви не зможете використовувати градієнт фону. Додатковий, хоча і не великий, код для нижнього колонтитула ( footer )

Метод 3: Заголовок і Тіло з фоновим малюнком.

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

Метод 3 стиль для блока с фоном

Дивитися Демо

HTML код:

<div class="block">
<div class="title">
<h2>Заголовок</h2>
</div>
<p>Широко використовується цей метод, так як всі HTML-коди існують для певної мети. Наприклад, H2 у div-контейнері, для встановлення фонового зображення заголовка. Єдиним недоліком буде фонове зображення для тіла, обсяг тексту може бути досить великою, і ви повинні бути впевнені, що розмір блоку достатній.</p>
</div>

Заголовок

Широко використовується цей метод, так як всі HTML-коди існують для певної мети. Наприклад, H2 у div-контейнері, для встановлення фонового зображення заголовка. Єдиним недоліком буде фонове зображення для тіла, обсяг тексту може бути досить великою, і ви повинні бути впевнені, що розмір блоку достатній.

CSS код:

.block {
width:330px;
background: url(block_body.jpg) repeat-y 0 bottom; padding-bottom:30px;
margin: 0 auto;
}
.title{
display: block;
width:330px;
height:60px;
background: url(block_header.jpg) no-repeat 0 0;
margin:0 auto;
overflow: hidden
}
.block h2 {
padding: 0;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
 font-weight: 400;
font-size: 1.4em;
line-height: 1.6;
font-family: 'Open Sans', Calibri, Arial, sans-serif;
color: black
}
.block P {
width:280px;
margin:0 auto;
}

.block {
width:330px;
background: url(block_body.jpg) repeat-y 0 bottom; padding-bottom:30px;
margin: 0 auto;
}
.title{
display: block;
width:330px;
height:60px;
background: url(block_header.jpg) no-repeat 0 0;
margin:0 auto;
overflow: hidden
}
.block h2 {
padding: 0;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
font-weight: 400;
font-size: 1.4 em;
line-height: 1.6;
font-family: ‘Open Sans’, Calibri, Arial, sans-serif;
color: black
}
.block P {
width:280px;
margin:0 auto;
}

Переваги: Працює у всіх браузерах. Набагато більш простий, компактний HTML-код.

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

Метод 4: Чистий CSS3 без картинок

Якщо Ви не дуже стурбовані тим, як бачать сайт користувачі тупо завислі на використанні IE, то цей метод оформлення блоків найкращий, у всякому разі я все частіше використовую у своїх роботах саме такий спосіб. Зрештою, колись же навчать обробляти стандарти CSS3 і старого IE.
Ну, а поки споглядати всі принади стилістики з CSS3 зможуть користувачі з браузерами Firefox, Safari і звичайно С?гоме. Як раз в цьому і полягає лише недолік даного методу на сьогоднішній день.

Метод 4 стилей для блока с фоном, Чистый CSS3

Через сучасні браузери Ви зможете побачити всю красу і легкість виконання цього рішення:

Дивитися Демо

Всі налаштування стилю блоку полягають у зміні значень кордону, тіні і градієнта властивості css border-radius, box-shadow і linear-gradient.

HTML код:

<div class="block">
<h2>Заголовок</h2>
<p>Ви повинні використовувати останні версії Firefox, Chrome і Safari, щоб побачити результат. Я думаю, це стане одним з найбільш відомих і популярних рішень найближчим часом. Чистий CSS, нічого зайвого, жодного зображення в оформленні, просто чарівні властивості CSS. Хоча CSS3 стандарти не підтримуються поки усіма браузерами, деякі розробники вже почали широко їх використовувати. Для IE-шки існують спеціальні хакі і фільтри, щоб він читав CSS3.</p>
</div>

Заголовок

Ви повинні використовувати останні версії Firefox, Chrome і Safari, щоб побачити результат. Я думаю, це стане одним з найбільш відомих і популярних рішень найближчим часом. Чистий CSS, нічого зайвого, жодного зображення в оформленні, просто чарівні властивості CSS. Хоча CSS3 стандарти не підтримуються поки усіма браузерами, деякі розробники вже почали широко їх використовувати. Для IE-шки існують спеціальні хакі і фільтри, щоб він читав CSS3.

CSS код:

.block {
max-width:330px;
padding:20px;
margin: 0 auto;
border:1px solid rgba(128, 128, 128, 0.37);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-image: linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%);
 box-shadow: 0 16px 28px 0 rgba(0,0,0,.22), 0 25px 55px 0 rgba(0,0,0,.21);
}
.block h2 {
padding-bottom: 10px;
margin: 0;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
 font-weight: 400;
font-size: 1.4em;
font-family: 'Open Sans', Calibri, Arial, sans-serif;
color: black
}
.block P {
margin:0; padding: 0
}

.block {
max-width:330px;
padding:20px;
margin: 0 auto;
border:1px solid rgba(128, 128, 128, 0.37);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-image: linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%);
box-shadow: 0 16px 28px 0 rgba(0,0,0,.22), 0 25px 55px 0 rgba(0,0,0,.21);
}
.block h2 {
padding-bottom: 10px;
margin: 0;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
font-weight: 400;
font-size: 1.4 em;
font-family: ‘Open Sans’, Calibri, Arial, sans-serif;
color: black
}
.block P {
margin:0; padding: 0
}

Переваги: найпростіше і перспективне рішення, з допомогою сучасних властивостей CSS3. Firefox, Chrome і Safari підтримують CSS3 і є хакі для IE 6, 7 і 8. Не використовуються фонові зображення, що вже саме по собі добре.

Недоліки: Обмежена підтримка старими браузерами, округлені кути, тінь і градієнт фону.

Метод 5: Мультіфон.

Нарешті розглянемо п’ятий спосіб з нашої серії. Цей метод дуже схожий на метод 3, в ньому об’єднуємо для одного властивості background кілька фонових зображень, і отримуємо, так сказати мультифоновый блок. Проблема все та ж як у всіх випадках використання картинок для фону, блок не розтягується при додаванні контенту, а це звичайно ж не є добре.

Метод 5 для блока с фоном

Дивитися Демо

HTML код:

<div class="block">
<h2>Заголовок</h2>
<p>Примітка: Цей метод дуже схожий на метод 3, в ньому об'єднуємо для одного властивості background кілька фонових зображень, і отримуємо, так сказати мультифоновый блок. Проблема все та ж як у всіх випадках використання картинок для фону, блок не розтягується при додаванні контенту, а це звичайно ж не є добре</p>
</div>

Заголовок

Примітка: Цей метод дуже схожий на метод 3, в ньому об’єднуємо для одного властивості background кілька фонових зображень, і отримуємо, так сказати мультифоновый блок. Проблема все та ж як у всіх випадках використання картинок для фону, блок не розтягується при додаванні контенту, а це звичайно ж не є добре

CSS код:

.block {
width:330px;
padding-bottom:30px;
background: url(block_header.jpg) top left no-repeat, url(block_body.jpg) 0 bottom no-repeat;
padding:10px 10px 20px 10px;

.block {
width:330px;
padding-bottom:30px;
background: url(block_header.jpg) top left no-repeat, url(block_body.jpg) 0 bottom no-repeat;
padding:10px 10px 20px 10px;

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

З Повагою, Андрій .

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