Всем доброго времени суток. Сегодня опять пост о том, как красиво оформить участок текста в сообщении. Сделать его более ярким и переливающимся. Эта тема немного поднималась в шпаргалке красивое оформление заголовка. По тому же принципу выделим какой-нибудь фрагмент текста. И более подробно разберём варианты такого оформления.
Нам понадобится для этого вот такой код.
Первая часть кода это оформление текста в спокойном состоянии. Вторая, которую я выделила синим цветом, изменения при наведении курсора. Если поменять стили на свои, изменить цвет, закругление углов, размер рамки, то можно добиться другого эффекта. Например такого.
Тут просто убрали из первого варианта значение border-radius:15px;.
Ну и ещё, к примеру, увеличим закругление углов у рамки с правой и с левой стороны. Изменим в коде свойства border-left:5px и border-right:5px. И поменяем цветовой эффект. Имеем следующее.

Нам понадобится для этого вот такой код.
<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>
Это мы получаем в итоге.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>
И при написании сообщения добавляем его. Как описано выше.
И сегодня у меня всё. Если возникнут вопросы спрашивайте. Разберёмся. Спасибо что читаете мои шпаргалки. До новых встреч.
И сегодня у меня всё. Если возникнут вопросы спрашивайте. Разберёмся. Спасибо что читаете мои шпаргалки. До новых встреч.
здесь можно оформить подписку на новые шпаргалки
Вика привет. Красивое оформление, ничего не скажешь. Я бы у себя много чего применила и своих, и твоих решений. Но вот последнее время занялась немного оптимизацией блога и думаю, как поисковики относятся ко всем эти фишкам в наших блогах? Или спустить все на авось, и так пройдет. Но по последним новостям у поисковиков снова изменились правила ранжирования.
ОтветитьУдалитьОля, привет. Ну что-ты всё установить не возможно. Это просто как вариант. Главное, чтобы выбор был. Фишек много не надо это точно. В начале ведения блога все мы пробуем почти всё. в конце-концов останавливаемся на чём-то одном. А насчёт ранжирования -каждый год какую-то новую встряску устраивают. Ничто не стоит на месте. Не угнаться.
ОтветитьУдалитьЗдравствуйте, Виктория! Я так и не поняла - как поисковики относятся к подобным вставкам? Положительно, отрицательно или нейтрально?
ОтветитьУдалитьСмотрите. Вот у меня подобным образом оформлен сам код в сообщении. На протяжении всего времени ведения блога я им пользуюсь. На самом деле этот код на CSS и он куда безобиднее тяжёлых фото на сайте или не нужных гаджетов. Те же ссылки на сторонние сайты куда больше тянут вес и не приветствуются поисковиками.Всё имеет место быть , но в меру. Видела блоги, на которых это применяется постоянно. Тот же http://blogodel.com/.
УдалитьИзвините, что не по теме. А что такое "тяжелые" фото?
УдалитьПосмотрите последний комментарий к этому посту. там тоже такой вопрос задавали.http://www.shpargalochki.ru/2015/03/vsplyvajushhee-opisanie-u-kartinki.html#more
ОтветитьУдалитьМне иногда надо как то выделить цитирование, пожалуй попробую заключить его в рамку, как в вашей шпаргалке.
ОтветитьУдалитьНасчёт цитирования. Тут нужно вместо set вставить везде blockquote .
УдалитьДобрый вечер, Вика! хочу воспользоваться Вашим советом, но у меня нет этих знаков ]]> Что делать, пожалуйста, подскажите.
ОтветитьУдалитьДобрый вечер, Вика! хочу воспользоваться Вашим советом, но у меня нет этих знаков ]]> Что делать, пожалуйста, подскажите.
ОтветитьУдалитьИрина, ]]> в каждом шаблоне есть. Прочитайте здесь как это найти. http://www.shpargalochki.ru/2014/04/stili-css-v-shablon-bloga.html#more
УдалитьЗдравствуйте,Вика!Попробую.
ОтветитьУдалитьВика, спасибо большое.
ОтветитьУдалитьВика, спасибо большое.
ОтветитьУдалитьЗдравствуйте,Вика!Попробую.
ОтветитьУдалитьВсё должно получиться.
Удалить