Как оригинально оформить участок в тексте

как красиво выделить участок текста
Всем доброго времени суток. Иногда возникают такие ситуации, когда необходимо выделить  определённый участок в тексте поста. Таким образом, заострить внимание читателей на чём-то важном. В этой шпаргалке уже рассмотрели интересный эффект оформления. Очень элегантно смотрится вариант, который хочу сегодня предложить.
Так можно оформить любой текст, код, специальное предложение, объявление. Пофантазируйте немного.


Вот как это может выглядеть.

ингредиенты
400гр свинины 1 небольшая морковка 1 лук-шалот 1 стебель сельдерея 1 веточка свежего розмарина 3 листа свежего шалфея веточка свежего тимьяна 2 зубчика чеснока 3 лавровых листа 1/2 ст. белого сухого вина


Реализовать такой вариант достаточно просто. Можно сделать подобное и в теле сообщение или установить код в гаджет HTML/JavaScript и поместить его в сайдбаре или подвале блога. Кстати, если вы проводите конкурсы на блоге или розыгрыши. Посетители обязательно обратят на него внимание. Хотите такое сделать у себя? Тогда копируйте код, приведённый  ниже в блокнот или черновик блога. И потом подробно разберём весь процесс установки.

код

.boxkets {border:dashed #333 2px;padding:8px;background-color:#ffefd5;width: 95%;margin:0 auto;}
.V-B {
position: relative;
padding: 5px;
margin: 20px 0px;
color: #FFFFFF;
width: 40%;
text-align: center;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
color:#FFFFFF;
font-weight:bold;
background-color:#a9a9a9 ;
}
.V-B:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:40px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #a9a9a9;
}

Что здесь можно изменить, чтобы подогнать цвет под дизайн вашего блога. То, что выделено синим цветом, это фон самой ленты, где написано ингредиенты ( в моём случае). Красным - в двух местах кода отмечен цвет фона, где пишем само сообщение. И зелёным-цвет текста.
После того, когда поменяли цвета на свои необходимо определиться, как часто предполагается использовать данную конструкцию. Если часто, то имеет смысл установить  её непосредственно в шаблон блога.
Идём знакомым уже путём. Вкладка шаблон-изменить HTML. Находим строку ]]></b:skin> и прямо над ней вставляем код. Сохраняем шаблон. Далее, при написании сообщения, в том месте, где хотите выделить определённый, участок нам понадобиться код такого вида.

<div class=" V-B">надпись на ленте</div>
<div class='boxkets'>
 здесь будет любой текст
</div>

Вот здесь хочу подробнее остановиться на том, как это сделать. Здесь в шпаргалке вкратце уже об этом шла речь. Но не всем было до конца понятно. Смотрим на скриншот.


Вот так в обычном режиме мы пишем сообщение. Слева вверху 2 функции. Режим создать и режим HTML. Как видно на снимке, мне захотелось установить такой эффект после указанной строки. Нажимаем на HTML и вставляем этот маленький код вызова. Вот так это будет выглядеть.

Возвращаемся обратно в обычный режим и продолжаем писать сообщение. Чтобы строчки располагались списком после каждой прописываем тег <br>.Таким образом, можно выделить и несколько участков текста.

В случае если применять такой вариант иногда, уместней будет не вносить первый код  СSS в шаблон, а установить его также в режиме HTML прямо в сообщении. Но для этого нужно только заключить его в теги <style> </style>. При этом он будет выглядеть так.

<style> тут вставляем весь первый код  СSS</style>

Лучше всего будет, если приткнуть его в конце сообщения (в режиме HTML), перед закрывающимся тегом  </div> 


А маленький код вызова использовать так же, как описано выше.

Да. И, наконец, как установить всё это хозяйство в гаджет HTML/JavaScript. Как это выглядит, посмотрите на самое первое изображение этого поста. Просто вставьте в гаджет сначала 1 код СSS с тегами  <style> </style> и под ним второй код. В поле название гаджета писать ничего не надо.

Поверьте, мне пришлось дольше всё это расписывать сегодня, чем вы это сможете сделать. Оформляйте свои сообщения. Обращайтесь если кому непонятно что-то или возникнут затруднения. И до новых встреч.
Удачи всем нам.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

Введите Ваш email ...:


15 комментариев:

  1. Вика, у Вас все новые и интересные фишки. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Валерий, спасибо за спасибо. Вы тоже не скромничайте. Ваши статья всегда очень полезны и информативны. Читаю с удовольствием.

      Удалить
  2. Спасибо! Мне хотелось реализовать что-то подобное, но я не знала как. Попробую по вашему методу! Надеюсь получится...

    Mynameisyanaf.blogspot.ru - Style, Books, Psychology

    ОтветитьУдалить
    Ответы
    1. Яна, привет. Сколько лет сколько зим. Рада, что заглянула. Что-то у меня перестали в ленте твои сообщения отображаться. Сейчас гляну. Если пригодится этот вариант для оформления, буду просто рада.

      Удалить
  3. Вика, привет! :))
    Очень интересное оформление, надо будет попробовать, спасибо за идею!
    И, кажется, ингредиенты мои... :))))

    ОтветитьУдалить
  4. Кристина, я же пример привела с твоего рецепта последней статьи. Обрати внимание, чтобы списком отображались продукты не забудь про теги BR. Я в сообщении на это обратила внимание.

    ОтветитьУдалить
    Ответы
    1. Да, да, я всё заметила. Как будет побольше времени обязательно сяду и разберусь. :) Спасибо ещё раз!

      Удалить
  5. Ответы
    1. Вика, сегодня села разбираться. Действительно, когда читаешь, кажется, что сложно, а на деле всё проще. Я попробовала на одной из своих старых статей, и вот, что у меня получилось http://www.amoreperlacucina.ru/2012/04/blog-post_28.html
      По моему, очень даже неплохо смотрится. :)))

      Удалить
    2. Кристина, привет. Смотрится нормально. А ты специально не стала выделять ленту цветом где надпись ингредиенты. И цвет фона не сделала.? Мне кажется и так ОК,

      Удалить
    3. Если честно, то не специально, это у меня такая ошибка получилась :))))) мне ещё надо разбираться как цвета менять, а то я их поменяла, но они вообще исчезли. Может у тебя где-то уже написано про это?
      Но вот такой "белый" вариант в рамочке мне тоже нравится. Я уже видела подобный в одном из болгов и он мне приглянулся. :))

      Удалить
    4. Кристина Цвет ленты background-color:#ffefd5; а именно менять надо только #ffefd5. Так же в двух местах значения цвета фона в рамке #a9a9a9. Возможно ты при смене случайно удалила или точку, или двоеточие в коде. А всё это в коде очень важно. Но если тебе так нравиться как есть , то пусть будет. Тоже оригинально.

      Удалить
    5. Ок, поняла, в следующий раз буду внимательнее. Спасибо Вика! :)

      Удалить
  6. Вика, спасибо. Очень понравилось. Буду использовать.

    ОтветитьУдалить
    Ответы
    1. Людмила Геннадьевна. пожалуйста. Кстати, да. Для Вашего блога такой вариант вполне может подойти. Спасибо.

      Удалить

Пользовательский поиск