Оформление тегов h1;h2;h3.

оформление заголовка поста

Место встречи изменить конечно же нельзя,но заголовок или абзац выделить из общего стандартного фона можно.Оригинальное оформление подзаголовков или просто цитат в тексте страницы при помощи CSS.Короче всё что связано с тегами h1;h2;h3;h4 можно выделить из общего фона и приукрасить.


Установка кода для оформления тегов.

Простое решение для того чтобы выделить важные подзаголовки статьи и добавить немного стиля безликому содержанию страницы.Установить код CSS необходимо в шаблон блога в соответствующем разделе.Для этого необходимо просто скопировать данный код и разместить в разделе стилей в самом конце.
<style type="text/css">/* for @v-gol.ru */
.hline2 {
  border-bottom: 1px solid #aaa;
  margin: 15px 0;
  padding: 5px 0;
  position: relative;text-align: center;
}

.hline2:before,
.hline2:after {
  content: '';
  border-right: 20px solid #fff;
  border-top: 15px solid #aaa;
  bottom: -15px;
  position: absolute;
  left: 25px;
}
.hline2:after {
  border-top-color: #fff;
  border-right-color: transparent;
  bottom: -13px;
  left: 26px;
}

.hline3 {
  position: relative;text-align: center;
  margin-left: -22px;
  margin-right: -22px;
  padding: 3px;
  background: #e5e5e5;
  background: linear-gradient(#f5f5f5, #e5e5e5);
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
}

.hline3:before,

.hline3:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  content:'';
  border-top: 6px solid #555;
  border-left: 6px solid transparent;
}
.hline3:before {
  border-top: 6px solid #555;
  border-right: 6px solid transparent;
  border-left: none;
  left: auto;
  right: 0;
  bottom: -6px;
}
</style>

Смотреть ещё

Как добавить форум на блогСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Оформление блоков для кода

После добавления кода в шаблон при написании очередного поста в нужные вам подзаголовки, заключённые в теги h1;h2;h3;h4, просто добавьте class="hline2" .Подзаголовок в полном виде должен будет выглядеть вот таким образом <h1 class="hline2">Ваш текст</h1> . Разницы между тегами нет и код будет работать во всех всех случаях где будет добавлен класс.Для того чтобы поменять варианты следует поменять цифры и всё.

Настройки кода для оформления тегов.


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

Отправить комментарий