А как сделать рамку типа, как "цитата". Тип рамка с подсветкой вокруг, прям в блоге.Цитата в html обозначается тегом <blockquote>. Пример,
<blockquote>А как сделать рамку типа, как "цитата". Тип рамка с подсветкой вокруг, прям в блоге.</blockquote>
Ответ на вышеназванный вопрос - посредством стилей CSS.
blockquote { /* код */ }Для пользователей Blogger: "Шаблон"-"Дизайнер шаблонов"-"Дополнительно"-"Добавить CSS"- и после внесения стилей нажимаем кнопку "Применить к блогу".
.post-body blockquote { /* код */ }
Вот здесь пригодятся знания о свойстве 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>
29 комментариев:
Не поделитесь?
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;}
не помогает убрать ширину
.blockquote {display: inline;}
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;
}
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>
Куда нужно вставлять код?
HTML:
<blockquote><div class="drop-shadow lifted">
<p>Lifted corners</p>
</div></blockquote>
размещаете тут http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css
Как в Ваших комментариях я могу показывать код?
Код из комментария 18 добавьте в Сообщение на вкладке "HTML" - см. http://shpargalkablog.ru/2012/11/nastroit-blogger.html#redaktor
2. Код из комментария 18 нужно будет доавлять в каждом Сообщении, что неудобно.
3. Нужно сделать так, чтобы весь код можно было вставить в гаджет HTML/JavaScript и чтобы он срабатывал автоматом при вставке цитаты в Сообщение. Тогда не нужно будет редактировать шаблон и тело Сообщения, а если запретить гаджету показываться на Главной, то и не увеличится время загрузки.
Что скажете, Наталья?
<style>
/* код CSS */
</style>
ниже HTML
Или вы добавляете стили на весь шаблон, а HTML вставляете по мере необходимости. Тогда CSS будет присутствовать на ВСЕХ страницах.
Или стили (см. http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html#fon) в шаблоне окружаете условиями.
Или стили вносите в Сообщение вместе с HTML.
Никаких гаджетов не нужно.