Стили оформления цитат для Блогспот
Кроме того, красиво оформленные цитаты делают контент более удобным для восприятия и понимания. Они помогают выделить ключевые мысли и идеи, делая текст структурированным и легким для чтения.
Также, оформление цитат улучшает визуальное восприятие контента и создает положительное впечатление о сайте. Эстетически приятные элементы помогают укрепить имидж сайта и привлечь новых посетителей.
В целом, красиво оформленные цитаты на сайтах играют важную роль в создании качественного и интересного контента, который будет привлекать и удерживать внимание аудитории.
На сайте есть много стилей оформления цитат:
Но сегодня предлагаю посмотреть ещё несколько. Все коды устанавливаем так:
Заходим в шаблон: Тема — Изменить HTML. Находим тег ]]></b:skin> и выше него вставляем выбранный код.
3 стиля цитаты
Стили найдены на https://codepen.io, у автора Mark Boots.
1 вариант
2вариант
3 вариант
blockquote {
--accent-color: rgb(32 32 54);
--bg-color: rgb(30 145 254);
--dot-color: rgb(255 255 255 / .35);
--text-color: rgb(243 243 243);
}
blockquote{
--padding: 1rem;
padding: var(--padding);
color: var(--text-color, black);
font-weight: 600;
background-color: var(--bg-color, white);
display: grid;
gap: 1rem;
background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% );
background-size: 0.5rem 0.5rem;
border-radius: 0.25rem;
box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5)
}
blockquote::before{
--qHeight: 4rem;
content: "";
margin-left: calc(var(--padding) * -1);
margin-top: calc(var(--padding) * -1);
height: var(--qHeight);
width: calc(var(--qHeight) * 1.1);
background-image:
radial-gradient(
circle at bottom right,
transparent calc(var(--qHeight) / 4 - 1px),
var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2),
transparent calc(var(--qHeight) / 2 + 1px)
),
linear-gradient(var(--accent-color, black), var(--accent-color, black));
background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2);
background-position: top left, bottom left;
background-repeat: space no-repeat
}
Чтобы поменять стиль, отрезок, выделенный в коде синим, меняем на:
2 вариант
blockquote{--accent-color: rgb(243 243 243);--bg-color: rgb(33 29 30);--dot-color: rgb(255 255 255 / .125);--text-color: rgb(243 243 243);}
3 вариант
blockquote{--accent-color: rgb(30 145 254);--bg-color: rgb(32 32 54);--dot-color: rgb(255 255 255 / .125);--text-color: rgb(243 243 243);}
Оформление цитаты тенями
blockquote {margin: 3.7em auto;padding: 2em;background: linear-gradient (white, white) padding-box, border-box 0 / cover;border: 2em solid transparent;box-shadow: 5px 3px 30px black;font-size: 1.4em;font-family: 'Lora', serif;font-style: italic;line-height: 1.5;width: 40%;}
Стиль цитаты с цветным текстом (2 варианта)
Цвет текста, пунктирной линии и обычной линии можно менять. Отметила в кодах красным.
1 вариант
blockquote {color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;padding: 21px;line-height: 20px;margin: 30px 40px;float: left;}
2 вариант
blockquote {border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;line-height:18px;font-style:italic;text-align:justify;margin:15px 30px;padding-left:20px;font-family:Georgia,"Times New Roman",Times,serif;}
Стиль цитаты с тенями и широкой полосой
Цвет полосы меняем на свой вкус — выделила красным. Так же можно поменять ширину полосы — выделила синим.
blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;font-size: 16px;padding: 2.1em 1.5em;border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}
Стиль цитаты с двумя линиями и кавычками
Так же можно поменять цвет линий — выделила красным цветом.
blockquote {position: relative;display: block;border-left: 5px solid #21610B;padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}blockquote::before {position: absolute;font-size: 62px;font-weight: bold;content: "\201C";line-height: 1;top: 10px;left: 10px;}
Комментарии со спамом удаляются.