Как стильно выделить участок текста

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

Я предложу код и на его примере вы сразу увидите, как это будет выглядеть. А как и где это можно применить решать вам. Всё зависит от вашей фантазии. Вариантов, на самом деле, много.

Bот такой код

.speech-bubble-style {
position:relative;
padding:15px;
margin:30px;
margin-right:300px;
color:#fff;
border-radius:10px;
background-color:#E6716A ;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:10px
width:100px;
}
.speech-bubble-style:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #E6716A;
}
.speech-bubble-style:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border-width:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent#E6716A ;
}

Сначала скопируйте его к себе в блокнот или черновик, чтобы сделать некоторые поправки под свой дизайн. Тут достаточно много можно сделать изменений. Остановлюсь на основных.

Выделенные красным это цвет всего фона блока. Меняйте на своё усмотрение. Значение margin-right:300px; отвечает за расстояние от правого края блога. Захотите увеличить или уменьшить, можно поменять.

А сейчас нужно определиться для себя. Подобный вариант размещения был в этой статье. Если  предполагается использовать часто, то этот код нужно поместить в шаблоне блога. Вкладка шаблон-изменить HTML с помощью клавиш Ctrl+F  находим строку  ]]></b:skin>. Сразу над ней вставляем его. Если есть затруднения то здесь пост о том как найти строку в шаблоне правильно.

Если же иногда, то, конечно, лучше другой вариант. При написании сообщения в редакторе перейти из режима создать в режим HTML и установить его в самом конце, предварительно поместив в теги style. Вот так.

 <style> тут вставляем весь код</style>.

Дальше просто пишете в обычном режиме сообщение и в том месте, где хотите выделить необходимый участок нужно опять перейдите в HTML и установить следующий код вызова. Не зависимо от того, куда поместили первый  - в шаблон или сообщение.

<div class="speech-bubble-style">здесь будет ваш текст</div>

Вот так необычно можно немного приукрасить своё сообщение и заострить внимание читателей  на его определённом участке. 

На этом сегодня всё. Расстанемся не на долго. Хороших всем выходных.

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

введите пожалуйста свой адрес электронной почты :