3 интересных оформления цитаты для Blogger

В сегодняшней статье окончание обзора нескольких стилей оформления цитат на Блоггере. 
Первые статьи можно посмотреть по адресу:
https://inshabashka.blogspot.com/2021/08/stili-dlya-citat-blogger.html
https://inshabashka.blogspot.com/2021/08/oformlenie-citaty-na-podlozhke-iz-kartinki-dlya-blogger.html
Более ранние сообщения:
https://inshabashka.blogspot.com/2018/04/Oformlenie-citaty-v-Blogger.html
https://inshabashka.blogspot.com/2019/06/oformlenie-citaty-s-hover-ehffektom-na-blogger.html
https://inshabashka.blogspot.com/2019/06/oformlyaem-citaty.html
https://inshabashka.blogspot.com/2021/06/slajder-dlya-citat.html
Все предложенные варианты стилей устанавливаются в шаблон: Тема – Изменить HTML. Затем, находим тег ]]></b:skin> и выше него добавляем нужный код.

Стиль цитаты 1

Стиль цитаты 1
Оформление простенькое, но со вкусом. Можно подобрать цвета под свой сайт.
blockquote { background-color: #fff0f0; overflow: auto; width: 450px; padding: 0px 25px 25px 25px; color: black; border: 2px solid #f50029; border-top-right-radius: 100px; -moz-border-radius-topright: 100px; -webkit-border-top-right-radius: 100px; border-bottom-left-radius: 100px; -moz-border-radius-bottomleft: 100px; -webkit-border-bottom-left-radius: 100px; box-shadow: 1px 1px 4px #fddddd; -moz-box-box-shadow: 1px 1px 4px green -web-kit-box-shadow:1px 1px 4px green; -goog-ms-box-shadow: 1px 1px 4px green; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-size: 20px; }
Изменить можно: 
Размер шрифта – выделила в коде красным. 
Цвет обводки – выделила синим цветом. 
Цвет тени – выделила зелёным. 
Фон – отметила оранжевым.

Стиль цитаты 2

стиль 2
Оформление скромное, но заметное и элегантное.
blockquote{border-left: 15px solid #321414; font-family: Play, serif;font-size:20px;text-align: justify;background: #fff;line-height: 1.2; display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666; border-right: 2px solid #321414; box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shad: 2px 2px 15px #ccc;} blockquote::before{font-size: 50px;position: absolute;color: #633;left: 10px;top:5px;font-weight: bold;content: "\201C";}
Меняем в оформлении: 
Цвет текста – выделила красным.
Синим отметила размер и цвет широкой вертикальной полоски по краю.
Оранжевым выделила шрифт и его размер.
Зелёным отметила размер и цвет узкой вертикальной полоски по краю.
Салатовым отметила цвет кавычек.
Голубым – цвет тени блока с цитатой.

Стиль цитаты 3

Стиль цитаты 3
Вариант оформления тоже не броский, но большой значок кавычек не оставит цитату не замеченной.
blockquote { padding: 60px 80px 40px; position: relative; } blockquote { font-family: 'Play'; font-size: 16px; } blockquote:before { position: absolute; font-family: 'FontAwesome'; top: 0; content:"\f10d"; font-size: 100px; color: rgba(0,0,0,0.1); } blockquote::after { content: ""; top: 20px; left: 50%; margin-left: -100px; position: absolute; border-bottom: 3px solid #495518; height: 3px; width: 300px; }
Меняем:
Синим отметила шрифт и его размер.
Зелёным – цвет полосы сверху, и её ширину.
Размер значка цитаты и его цвет – красным цветом. Цвет color: rgba(0,0,0,0.1); - последние цифры оставляем не изменённым. Значение 0,1 даёт полупрозрачность.
Оранжевым выделила длину полосы сверху.
Отправить комментарий

Комментарии со спамом удаляются.