Цитата html

А как сделать рамку типа, как "цитата". Тип рамка с подсветкой вокруг, прям в блоге.
Цитата в html обозначается тегом <blockquote>. Пример,
<blockquote>А как сделать рамку типа, как "цитата". Тип рамка с подсветкой вокруг, прям в блоге.</blockquote>
Ответ на вышеназванный вопрос - посредством стилей CSS.
blockquote { /* код */ }
Для пользователей Blogger: "Шаблон"-"Дизайнер шаблонов"-"Дополнительно"-"Добавить CSS"- и после внесения стилей нажимаем кнопку "Применить к блогу".
.post-body blockquote { /* код */ }
Цитата HTML для Blogger
Вот здесь пригодятся знания о свойстве box-shadow: тут и тут можно посмотреть примеры работы с ним. Одним из вариантов я воспользовалась у себя на блоге (см. цитата сверху), немного изменив цифры под дизайн.

Чтобы не было совсем без образцов, посмотрим на этот пример. Автор.
blockquote {
        -webkit-border-radius: 6px;
        border-radius: 6px;
        padding: 15px 10px;
        -webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
        box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
        background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
        background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
        background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
}

Уместно будет смотреться фоновое изображение. Разработчик. Как раз недавно рассказывала про background.
blockquote {
   padding: 18px 10px 18px 70px;
   font: 14px/20px italic Times, serif;
   background: url(http://4.bp.blogspot.com/-46dKh3Wii7o/TmdZi-BHrkI/AAAAAAAACSU/puFYvvosoxU/s400/modelocita2m2.gif) no-repeat scroll 10px 10px rgb(255, 255, 255);
   border: 3px solid #303941;
   border-top: 2px solid #FFFFFF;
   border-bottom: 2px solid #FFFFFF;
} 

Также можно активно экспериментировать со специальными символами. На белом фоне смотрится более эффектно.
blockquote {
    display: table;  
    border-spacing: 10px 10px; } 

blockquote:before, blockquote:after {
    vertical-align: middle;
    font: normal normal 3em Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    display: table-cell; 
    color: #800;
    -moz-transform:matrix(1, 0, 0, 5, 0px, 0px);
    -webkit-transform:matrix(1, 0, 0, 5, 0px, 0px);
    -o-transform:matrix(1, 0, 0, 5, 0px, 0px);} 
   
blockquote:before {content: '<';}

blockquote:after {content: '>';}
Или такие кавычки.
blockquote.pt {
  position:relative;  
  padding: 0 40px 0 40px;
} 

blockquote.pt:before, blockquote.pt:after {
  position:absolute;
  font: bold italic 500% serif;
  color: #800;   
  } 
   
blockquote.pt:before {content: open-quote; left:-30px; top:-20px;}

blockquote.pt:after {content: close-quote; right:10px; bottom: -50px;}

У тега blockquote есть атрибут cite. Он показывает первоисточник и не поддерживается браузерами. С помощью CSS можно продемонстрировать использования данного атрибута.
<style type='text/css'>
blockquote {position:relative; padding-bottom: 22px;}

blockquote:after{ 
  content:"Источник: " attr(cite);
  color: #596169;
  font-size: 80%;
  position:absolute;
  right:10px;
  bottom: -1px;
}
</style>

<blockquote cite="http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.2">... содержание ...</blockquote>
в f t
наверх ↑

29 комментариев:

Анонимный
Интересует код как у вас, у цитат?
Не поделитесь?
Анонимный
И ещё такой момент интересует, как ширину подогнать, то есть допустим фраза из 5 букв а цитата на всю ширину делается.
NMitra
.blockquote {
text-align: justify;
color: #3f0309;
border: 2px solid #d2bf94;
padding: 10px;
-webkit-border-radius:4px;
border-radius:4px;
background:#fff;
-webkit-box-shadow:0 1px 4px #d2bf94, 0 0 40px #f3e7cc inset;
box-shadow:0 1px 4px #d2bf94, 0 0 40px #f3e7cc inset;}
Анонимный
text-align: justify;
не помогает убрать ширину
NMitra
Не понимаю, покажите URL с конкретным примером.
Detsle
http://detsle.blogspot.com/2011/09/blog-post_06.html
NMitra
То есть вы хотите, чтобы значок цитаты был обтекаемым?
Detsle
Нет, чтобы слово пример, после "р" заканчивалась обводка.
NMitra
Это блочный элемент. Добавте

.blockquote {display: inline;}
Detsle
а куда добавлять?
NMitra
В шаблоне ваш код должен выглядеть:

blockquote {
display: inline;
text-align: justify;
padding: 18px 10px 18px 65px;
font: 14px/20px italic Times, serif;
background: url(http://i056.radikal.ru/1109/88/f03457111688.gif) no-repeat scroll 10px 10px rgb(255, 255, 255);
border: 1px solid #303941;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
XaSeR
Неплохо, второй пример мне нравится...будем экпериментировать)
NMitra
Приятно слышать, вариантов превеликое множество. Дерзайте.
Анонимный
Спасибо большое! Теперь у меня красивые цитаты на сайте )))
Mishechka
Наталья, подскажите, как вставить в код цитаты один из вариантов, которые Вы показали в http://shpargalkablog.ru/2011/06/css-box-shadow.html и http://shpargalkablog.ru/2011/06/box-shadow.html?
NMitra
.post-body blockquote {
position:relative;
z-index:1;
}

.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before, .drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}

.drop-shadow p {
font-size:16px;
font-weight:bold;
}

.lifted {border-radius:4px;}

.lifted:before, .lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
transform:rotate(-3deg);
}

.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
transform:rotate(3deg);
}

HTML:
<blockquote><div class="drop-shadow lifted">
            <p>Lifted corners</p>
</div></blockquote>
Mishechka
Что-то не получется...
Куда нужно вставлять код?
NMitra
Код до

HTML:
<blockquote><div class="drop-shadow lifted">
            <p>Lifted corners</p>
</div></blockquote>

размещаете тут http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css
Mishechka
Я так и делал, вставил перед /b:skin. А что делать с нижней частью кода?
Как в Ваших комментариях я могу показывать код?
NMitra
См. http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html
Код из комментария 18 добавьте в Сообщение на вкладке "HTML" - см. http://shpargalkablog.ru/2012/11/nastroit-blogger.html#redaktor
Mishechka
1. Я думаю, что первую часть кода лучше вставлять не перед ]]></b:skin>, а в разделе Posts.
2. Код из комментария 18 нужно будет доавлять в каждом Сообщении, что неудобно.
3. Нужно сделать так, чтобы весь код можно было вставить в гаджет HTML/JavaScript и чтобы он срабатывал автоматом при вставке цитаты в Сообщение. Тогда не нужно будет редактировать шаблон и тело Сообщения, а если запретить гаджету показываться на Главной, то и не увеличится время загрузки.
Что скажете, Наталья?
NMitra
Пожалуйста, как вам будет угодно. Чтобы вставить CSS в гаджет воспользуйтесь тегом

<style>
/* код CSS */
</style>

ниже HTML
Mishechka
Но как сделать чтобы он срабатывал автоматом при вставке цитаты в Сообщение? И куда поставить гаджет?
NMitra
Я не понимаю что вы хотите добиться и зачем.

Или вы добавляете стили на весь шаблон, а HTML вставляете по мере необходимости. Тогда CSS будет присутствовать на ВСЕХ страницах.

Или стили (см. http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html#fon) в шаблоне окружаете условиями.

Или стили вносите в Сообщение вместе с HTML.

Никаких гаджетов не нужно.
NMitra
Лично я делаю так: если CSS мне нужен периодически, то вношу в шаблон, если разово, то - в тело Сообщений.
Mishechka
В стандартном редакторе Сообщений уже есть вставка цитаты, а я просто хочу изменить её внешний вид.
NMitra
См. первый вариант.
Mishechka
Не понял, какой первый вариант?
NMitra
Или вы добавляете стили на весь шаблон, а HTML вставляете по мере необходимости.