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

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

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

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

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

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

Перейдем от слов к делу. Перед вами код, описывающий подобные "окна" (рамки), который необходимо поместить в ваш шаблон под "/* 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>.

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

Комментариев: 22

  1. У меня такая красота в блоге уже есть, но что приятно - у Вас расписано каждая строчка. Теперь не так страшно лезть и что-то подправлять.

    ОтветитьУдалить
  2. Еще мне нравится, что у Вас кнопки социальных закладок серые, пока не активны. Вы планируете рассказать, как это сделать?

    ОтветитьУдалить
    Ответы
    1. Я стараюсь максимально полно и понятно раскрыть материал. Отсюда и описания каждой строчки. Зачем плодить клонов моего стиля, когда можно объяснить, как на основе моего шаблона сделать что-то свое?! ;-)

      Про кнопки соц. сетей обязательно расскажу! Этот материал у меня в планах на ближайшую неделю-две.

      Удалить
  3. Большое спасибо за вашу статью!!!))) Она очень мне помогла!)Успехов вам!)

    ОтветитьУдалить
    Ответы
    1. И вам успехов! Если что, обращайтесь! :-)

      Удалить
  4. Очень красиво смотрится.

    ОтветитьУдалить
    Ответы
    1. Отрадно слышать, что я еще не потерял чувство вкуса :-D

      Удалить
  5. Спасибо вам за статейку! Обязательно применю на своем блоге и вообще у ВАС много всего интересного и полезного! Побольше ВАМ читателей!

    ОтветитьУдалить
    Ответы
    1. Спасибо за пожелания! :thanks: Надеюсь и в дальнейшем радовать Вас интересными материалами.

      Удалить
  6. Очень хотелось бы применить ваш метод у себя в блоге, но..."/* Accents". я просто не нахожу в своем коде блога.
    С чем этот "/* Accents". можно ассоциировать в моем шаблоне?
    Я использую шаблон BLOGGER Template Designer ( Awesome Inc.)

    ОтветитьУдалить
    Ответы
    1. Главное, чтобы CSS-код находился над строкой "]]>"!

      Удалить
  7. Спасибо за наводку...
    Буду пытаться применить..Потом отпишусь ... и здесь...и у себя в блоге со ссылкой на автора "Блогер о "Blogger" ".
    Пробовать буду в тестовых блогах, так что возможно еще возникнут вопросы...

    ОтветитьУдалить
    Ответы
    1. Спрашивайте! Постараюсь ответить :-)

      Удалить
  8. Забрал себе :) Всё отлично встало, не сразу правда нашёл где нужно вставить нужный код. Прошёл по пути- ШАБЛОН/НАСТРОИТЬ/ДОПОЛНИТЕЛЬНО/ДОБАВИТЬ CSS. Там просто добавил код понравившегося мне окошка и вуаля всё получилось! Спасибо огромное, уже вторую "фишку" на вашем блоге к своему применил!

    ОтветитьУдалить
  9. Спасибо за интересное решение! Поставлю себе на блог!

    ОтветитьУдалить
  10. Анонимный10 июля 2014 г., 13:03

    в ие как всегда не работает скругление )

    ОтветитьУдалить
    Ответы
    1. Все работает при небольших манипуляциях. Подробнее в статье Скругление углов, тени и прочие изыски в IE9 на Blogger.

      Удалить

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях