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
Оформление простенькое, но со вкусом. Можно подобрать цвета под свой сайт.
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
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
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 даёт полупрозрачность.
Оранжевым выделила длину полосы сверху.
Комментарии со спамом удаляются.