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

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


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

ингредиенты

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 ...: