Как красиво выделить текст статьи в блоге

Каждому из нас хочется, чтобы его блог смотрелся по особенному, как-то выделялся на фоне остальных. Этому в полной мере способствует индивидуальный дизайн блога. Но иногда нам нужно выделить всего лишь какой-то абзац или фразу в тексте статьи. Когда это требуется раз-другой, можно и покорпеть над каждым конкретным случаем. А если подобное необходимо довольно часто, но при этом не хочется каждый раз затрачивать много сил на красочное оформление? Здесь нам на помощь придут готовые решения, которые мы можем интегрировать в шаблон нашего блога.

Вы видите как оформлена эта надпись? Такое оформление несложно заполучить, если один раз приложить немного усилий. А ведь можно использовать и несколько различающихся стилей для разного типа материала!

А как вам такое выделение текста? Думаете этого сложно добиться? Поверьте, это не проблема. Я объясню, как получить такое оформление. Это не многим сложнее, чем с первым вариантом.

А может вам нравится такой дизайн? Поверьте, и здесь нет ничего сложного! А при желании, так и, вообще, вы сможете разработать свой неповторимый стиль, перемешав идеи, почерпнутые из этой статьи.

Я на этом сайте ограничился всего лишь одним подобным стилем выделения текста - первым. Но вы можете задействовать несколько. Например, для привлечения внимания к главной мысли статьи, для выделения особо важной информации, для указания, что перед нами код и т.д. При этом, каждый вариант может иметь свои индивидуальные особенности: различные картинки оформления, разный цвет текста и фона внутри "окна" (рамки), различные цвет и форму рамки.

Перейдем от слов к делу. Перед вами код, описывающий подобные "окна" (рамки), который необходимо поместить в ваш шаблон под "/* Accents". Чтобы вам было легче подстроить его под себя, я сопроводил строки подробными комментариями:

.info {
  margin: 10px; /* отступ рамки от внешних элементов */
  padding: 15px 17px 15px 80px; /* отступ вложенного текста от рамки */
  border: 1px solid #1e8fce; /* толщина, формат и цвет рамки */
  border-radius: 10px; /* радиус скругления углов рамки для IE9 и Opera */
  -moz-border-radius: 10px; /* радиус скругления углов рамки для Firefox */
  -webkit-border-radius: 10px; /* радиус скругления углов рамки для Safari и Chrome */
  box-shadow: 2px 2px 3px #bbb; /* смещение, толщина и цвет тени рамки для Opera */
  -moz-box-shadow: 2px 2px 3px #bbb; /* смещение, толщина и цвет тени рамки для Firefox */
  -webkit-box-shadow: 2px 2px 3px #bbb; /* смещение, толщина и цвет тени рамки для Safari и Chrome */
  background: #fff url(http://www.aboutblogger.ru/info.png) 15px 50% no-repeat; /* цвет фона, ссылка на фоновое изображение и указание его местоположения */
  text-align:justify; /* выравнивание текста */
  color: #000 /* цвет текста */
}

.special {
  margin: 10px; /* отступ рамки от внешних элементов */
  padding: 15px 15px 10px; /* отступ вложенного текста от рамки */
  border: 6px solid #1e8fce; /* толщина, формат и цвет рамки */
  border-radius: 20px 0; /* радиус скругления углов рамки для IE9 и Opera */
  -moz-border-radius: 20px 0; /* радиус скругления углов рамки для Firefox */
  -webkit-border-top-left-radius: 20px; /* радиус скругления верхнего левого угла рамки для Safari и Chrome */
  -webkit-border-bottom-right-radius: 20px; /* радиус скругления нижнего правого угла рамки для Safari и Chrome */
  box-shadow: 2px 2px 3px #bbb; /* смещение, толщина и цвет тени рамки для Opera */
  -moz-box-shadow: 2px 2px 3px #bbb; /* смещение, толщина и цвет тени рамки для Firefox */
  -webkit-box-shadow: 2px 2px 3px #bbb; /* смещение, толщина и цвет тени рамки для Safari и Chrome */
  background: #fff url(http://www.aboutblogger.ru/special.png) repeat-x; /* цвет фона, ссылка на фоновое изображение и указание его местоположения */
  text-align:justify; /* выравнивание текста */
  text-shadow: 2px 2px 3px #bbb; /* смещение, толщина и цвет тени текста */
  color: #108fce; /* цвет текста */
  font-weight: bold; /* толщина букв текста */
}

.code {
  margin: 10px; /* отступ рамки от внешних элементов */
  padding: 20px; /* отступ вложенного текста от рамки */
  border: 3px solid #1e8fce; /* толщина, формат и цвет рамки */
  border-radius: 8px; /* радиус скругления углов рамки для IE9 и Opera */
  -moz-border-radius: 8px; /* радиус скругления углов рамки для Firefox */
  -webkit-border-radius: 8px; /* радиус скругления углов рамки для Safari и Chrome */
  box-shadow: inset 0 0 20px #1e8fce; /* смещение, толщина и цвет свечения рамки для Opera */
  -moz-box-shadow: inset 0 0 20px #1e8fce; /* смещение, толщина и цвет свечения рамки для Firefox */
  -webkit-box-shadow: inset 0 0 20px #1e8fce; /* смещение, толщина и цвет свечения рамки для Safari и Chrome */
  background: #fff url(http://www.aboutblogger.ru/code.png) 97.7% 80% no-repeat; /* цвет фона, ссылка на фоновое изображение и указание его местоположения */
  text-align:justify; /* выравнивание текста */
  color: #108fce; /* цвет текста */
  font-weight: bold; /* толщина букв текста */
}

Каждый из представленных вариантов кода описывает стиль одного из "окон" (рамок), представленных выше. Условно я дал названия этим "окнам": info, special и code.

Чтобы скругление углов, тени и свечение, используемые в данных "окнах", отображались в IE9, необходимо немного видоизменить один из meta-тэгов. Для младших же версий Internet Explorer придется использовать суррогаты. Причем, с восьмой версией я ничего не могу поделать - все скрипты, которые я перепробовал, в IE8 конфликтуют со скриптом комментариев. А вот чтобы скругление углов и тени отображались в IE7 и младше, перед закрывающим тэгом </head> добавим следующий код:

<!--[if lt IE 8]>
<script src='http://sunctorus.ucoz.net/PIE.js' type='text/javascript'/>
<![endif]-->

А перед закрывающимся тэгом </body> этот:

<!--[if lt IE 8]>
<script type='text/javascript'>
  $(function() {
    if (window.PIE) {
      $('.info').each(function() {
        PIE.attach(this);
      });
      $('.code').each(function() {
        PIE.attach(this);
      });
      $('.special').each(function() {
        PIE.attach(this);
      });
    }
  });
</script>
<![endif]-->

Обратите внимание на подсвеченный блок. В нем определяется class, для которого необходимо задействовать возможности CSS3. Если вы приглядитесь, то увидите, что таких блоков ровно три - по числу наших "окон" (рамок). Добавляйте или удаляйте из кода данные блоки в соответствии с вашими потребностями в спец-"окнах".

Теперь, если вы, предварительно адаптировав под свой дизайн, добавите любой из представленных вариантов кода в в шаблон, в блок, начинающийся с "/* Accents", то вы подготовите почву для красочного оформления отобранных вами участков текста. И если вы, например, захотите показать часть текста в стиле info, то окружите его тэгами следующим образом:
<div class="info">выделяемый текст</div>.

Таким вот незамысловатым способом можно внести визуальное разнообразие в ваши статьи. Единственное, я хотел бы предупредить, что ссылки на фоновые изображения в примерах даны мной "от балды", просто для иллюстрации. Думаю, каждый из вас все равно захочет внести свои поправки в предложенные мной решения :-)