Анимированный фон для цитаты или участка текста.

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

Однажды Раневская поскользнулась на улице и упала. Навстречу ей шел какой-то незнакомый мужчина. — Поднимите меня! — попросила Раневская. — Народные артистки на дороге не валяются…

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

blockquote {
width: 90%;
margin:10px auto;
border-top: solid 10px #666;border-left: solid 1px #ccc;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc;
box-shadow:100 2px #999;
background-color: #eee;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
line-height: 15px;
word-wrap: break-word;
text-align: left;
}
blockquote:hover {
border-top: solid 10px #3A74C9;
color: #000000;
background-color: #FFFFFF; 
box-shadow:0 0 5px #999;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgpQPbtGYhzhlI9GUkuD9SJ01550kMr8Dhy0JE45yvkksOzJ8kwv1-9YoYXXtOPUSRNwDLCo8QIlZg5IIJV2yMSfANOoYpg647s5rXnsGDZ8m4JvgkMnXbzc69JHyWH6CbaugW6bF_yA9u/s1600/hover-bg.gif") repeat;
}

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

<blockquote>здесь ваш текст </blockquote>

При предварительном просмотре сообщения анимации не видно. Если всё правильно сделали, то после публикации она появится.
И ещё один вариант оформления цитаты, кода или участка текста. Также с эффектом анимации. Как это работает можно посмотреть на тестовом блоге Код для него такой.

blockquote { line-height: 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGoRUliu-rupctbC2GSEBsox_nAIZjHTsCTqORJGZdGKBDmCVPqTUHmwVgiXnrOFQGGSHoC79c1AvGLJq1mVWGx0B7F5h-Gm7Ti-LP9ERTBvcHlYC3GI-OWO_ly5PXiUbai_O6Kqp9q6Y/s1600/black.png); font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000000; border:solid #999999 1px; border-left:solid #990000 15px; padding: 0 5px 0 10px; margin-left:30px; } blockquote:hover{ background: #FFFFFF; box-shadow:0 0 7px #999; }

Ну вот на сегодня, и всё. Думаю, что кому-нибудь да пригодится моя сегодняшняя шпаргалка.

Удачи всем нам.

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

введите пожалуйста свой email :