Главная » HTML & CSS » 5 CSS стилей для блока с фоном

5 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;
}

И не забываем, что прописываем если в код страницы то между тегами <head>...</head>, ну а сам блок соответственно в любое место тела страницы, после тега 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>

 
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;
}

 
Преимущества: Гарантия работы во всех браузерах
 
Недостатки: Цвет корпуса должен быть простой, вы не сможете использовать градиент фона. Дополнительный, хотя и не большой, код для нижнего колонтитула ( footer )
 

Метод 3: Заголовок и Тело с фоновым рисунком.

Этот способ очень похож на второй метод, отличается только тем, что используется одно изображение в заголовке блока, а фоновый рисунок корпуса по размеру соответствует объему содержания блока.
 
Метод 3 стиль для блока с фоном

HTML код:
 

<div class="block">
    <div class="title">
    <h2>Заголовок</h2>
    </div>
    <p>Широко используется этот метод, так как все HTML-коды существуют для определенной цели. Например, H2 в div-контейнере, для установки фонового изображения заголовка. Единственным недостатком будет фоновое изображение для тела, объем текста может быть достаточно большой, и вы должны быть уверены, что размер блока достаточен.</p>
</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;
}

 
Преимущества: Работает во всех браузерах. Гораздо более простой, компактный HTML-код.
 
Недостатки: Фоновое изображение для тела должен быть довольно большим, чтобы разместить объемное содержание, что приводит к большому размеру файла рисунка.
 

 

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

Если Вы не очень озабочены тем как видят сайт пользователи тупо зависшие на использовании IE, то этот метод оформления блоков наиболее предпочтителен, во всяком случае я все чаще использую в своих работах именно такой способ. В конце концов, когда то же научат обрабатывать стандарты CSS3 и старика IE.
Ну, а пока лицезреть все прелести стилистики с CSS3 смогут пользователи с браузерами Firefox, Safari и конечно Сhrome. Как раз в этом лишь и заключается недостаток данного метода на сегодняшний день.
 
Метод 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>

 
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
}

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

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

Наконец рассмотрим пятый способ из нашей серии. Этот метод очень похож на метод 3, в нем объединяем для одного свойства background парочку фоновых изображений, и получаем, так сказать мультифоновый блок. Проблема всё та же как во всех случаях использования картинок для фона, блок не растягивается при добавлении контента, а это конечно же не есть хорошо.
 
Метод 5 для блока с фоном
 

 
HTML код:
 

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

 
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;

 
Подводя итог всему, что я тут пытался умно подать, хочу сказать одно, все эти методы применимы, каждый в отдельности и в зависимости от проекта где будет использован. Может описание вышло не так красиво, как у распупыристых дел мастеров, но уж тут, как говориться извиняйте, учились давно и больше не тому 🙂
Будущее конечно же за четвёртым вариантом, так как он самый гибкий и легко настраиваемый, остальные способы можно ужу считать историей.
Никого не призываю использовать именно эти методы, хотя для общего изучения материала и дабы память освежить, пожалуй кому-то да и пригодится, а значит, и пыжился я тут не зря.

С Уважением, Андрей .

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Otto:

    Спасибо за метод #4, давно хотел научиться.

    Пояснения предельно понятные, демонстрация очень наглядная.

    Спасибо за сайт.

    Ответить
    • driver:

      За оценку спасибо. За методом №4 будущее, все равно все браузеры с отсталыми движками, когда нибудь придут к полной поддержке CSS3. Даже тормознутый и не в меру консервативный IE пыжится и тихим сапом подтягивается к современным собратьям. Хотя на данный момент использование изображений в дизайне является стабильной техникой исполнения и не несет сюрпризов в плане ломки отображения страниц и содержимого.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »