Опять про красивое оформление текста

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

Нам понадобится для этого вот такой код.

<style>.set {
font-size:16px;
color: #CCA6A6;
border-left:5px solid #CCA6A6;
border-right:5px solid #CCA6A6;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 10px #CCA6A6;
-webkit-box-shadow:0px 0px 10px #CCA6A6;
-moz-box-shadow:0px 0px 10px#CCA6A6;
}
.set:hover {
font-size:16px;
color: #A6BDCC;
border-left:5px solid #A6BDCC;
border-right:5px solid #A6BDCC;
box-shadow:0px 0px 10px #A6BDCC;
-webkit-box-shadow:0px 0px 10px #A6BDCC;
-moz-box-shadow:0px 0px 10px #A6BDCC;
}</style>
<div class="set ">здесь ваш текст</div>

Это мы получаем в итоге.

Дама сдавала в багаж Диван, Чемодан, Саквояж, Картину, Корзину, Картонку И маленькую собачонку. Выдали даме на станции Четыре зеленых квитанции О том, что получен багаж: Диван, Чемодан, Саквояж, Картина, Корзина, Картонка И маленькая собачонка.

Первая часть кода это оформление текста в спокойном состоянии. Вторая, которую я выделила синим цветом, изменения при наведении курсора. Если  поменять стили на свои, изменить цвет, закругление углов, размер рамки, то можно добиться другого эффекта. Например такого.

Жил человек рассеянный На улице Бассейной. Сел он утром на кровать, Стал рубашку надевать, В рукава просунул руки Оказалось, это брюки. Вот какой рассеянный С улицы Бассейном!

Тут просто убрали из первого варианта значение border-radius:15px;.

 Ну и ещё, к примеру, увеличим закругление углов у рамки с правой и с левой стороны. Изменим в коде свойства border-left:5px и border-right:5px. И поменяем цветовой эффект. Имеем следующее.

У старика и старухи Был котенок черноухий, Черноухий и белощекий, Белобрюхий и чернобокий. Стали думать старик со старухой: - Подрастает наш черноухий. Мы вскормили его и вспоили. Только дать ему имя забыли.

В одном сообщении можно применить несколько подобных стилей. В этом случае нужно просто поменять везде название set на set1, set2 и так далее.

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

<div class="set ">здесь ваш текст</div>

И при написании сообщения добавляем его. Как описано выше.

И сегодня у меня всё. Если возникнут вопросы спрашивайте. Разберёмся. Спасибо что читаете мои шпаргалки. До новых встреч.

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

Введите Ваш email