Оформляем цитаты в Блоггер

Не могла пройти мимо красиво оформленных цитат. Нашла код на зарубежном сайте. Если кто-то из вас не видел такое оформление – читайте статью.

Красивое оформление блочной цитаты

Все предложенные варианты устанавливаются в шаблон, выше тега ]]></b:skin>
1 стиль

blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}

Цвет полос можно поменять. Что менять, я выделила в коде синим. 
2 стиль

blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding: 30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none repeat scroll 0 0 #FFFFFF;content: "";height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display: block;content: "";height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width: 25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}

Здесь также меняем в коде цвета.
1 цвет — большой овал
2 цвет — большой круг
3 цвет — маленький кружок
А вот так стиль выглядит — оригинально, не правда ли?

Стиль 3

blockquote{padding:20px 30px;text-align:left;
background: #999 no-repeat right;
color: #fff;font-size: 16px;line-height: 1.4;
border: 0;border-radius: 10px;margin: 0 30px 10px;display: block;
box-shadow: 11px 10px 0px #555;}

Меняем фон - #999
Меняем цвет текста - #fff
Меняем цвет нижнего фона - #555
Помимо цвета, можно поменять размер текста - 16px
А также радиус закругления углов - 10px. Чем больше значение, тем округлее углы, нулевое значение — углы прямые. Кстати, смотрится тоже красиво.
Можно увеличить или уменьшить нижний фон - 11px 10px
А ниже сам стиль. Код дан на оформление в серых тонах.