RealAdmin.ru

Фоновое изображение для элемента сайта

Веб-дизайн,CSS,HTML
Категория: Сайтострой
05 Сен 2013 г. в 17:29

Поделюсь опытом визуального оформления элемента сайта с помощью задания двух фоновых изображений. В данном примере оформим заголовок «H1» так, чтобы справа и слева от него были разные изображения.

HELLO WORLD

Такое оформление будет уместно только для сайтов с определенной тематикой, но никто не мешает заменить изображения на те, которые будут подходить под тематику вашего сайта.

Перейдем к реализации. В файл с CSS стилями добавляем:

.decor {
   background: url("heading-decor-r.gif")  right center no-repeat,
               url("heading-decor-l.gif")  left center no-repeat;
   margin: 0px;
   display: inline-block;
   padding: 0 35px;
}

.decor h1 {
    margin: 0px;
    color: #9E9C79;
    text-shadow: silver 0 0 2px;
}

Не забудьте прописать полные пути к изображениям.

В html коде оформляем заголовки статей следующим образом:

<div class="decor">
    <h1>HELLO WORLD</h1>
</div>

Таким способом можно прикручивать изображения к различным элементам сайта. Выводить их относительно элемента можно по разному — например, сверху и снизу или только слева от элемента.

Конец
Посмотрите похожее — 6
Комментарии — 0
    © REALADMIN.RU   2016 г.
    Страница сгенерирована: 0,2323 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top