Оформить цитату в html
Как сделать кавычки только по контуру, как здесь? Общая реализация есть, только ещё cite по правой стороне нужно выровнять.
blockquote < position: relative; background: #fafafa; padding: 1rem; margin: 1rem; background: #fff; border: 2px solid #ccc; >cite span:first-child < color: #aeadad; font-style: normal; >cite span:last-child < color: black; font-weight: bold; font-style: normal; >blockquote:before < color: gray; position: absolute; top: -10px; left: -10px; background-color: white; text-align: center; width: 45px; height: 40px; color: gray; content: "\1F676"; font-size: 4em; line-height: 1em; >blockquote:after
«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»
Автор цитаты: Альберт Эйнштейн
Отслеживать
4,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
задан 1 апр 2018 в 19:16
Black Fire Black Fire
479 1 1 золотой знак 3 3 серебряных знака 17 17 бронзовых знаков
кавычки только по контуру — имеется ввиду не закрашенные?
1 апр 2018 в 20:17
@Grundy, скорее всего, так как на картинке не закрашены
1 апр 2018 в 20:38
да, именно не закрашенные.
1 апр 2018 в 21:01
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Решение на SVG . Не слишком красиво выглядит, можно поместить svg в отдельный файл с соответствующим расширением, затем вставить его в псевдоэлемент в качестве background . Толщина, цвет контура кавычек и заливка контролируется с помощью свойств stroke , stroke-width & fill .
* < box-sizing: border-box; >*::before, *::after < content: ""; display: table; clear: both; >blockquote < position: relative; background: #fafafa; padding: 1rem; margin: 1rem; background: #fff; border: 2px solid #ccc; >p < float: left; >cite < display: flex; flex-wrap: wrap; float: right; margin-right: 20px; >cite span:first-child < color: #aeadad; font-style: normal; >cite span:last-child < color: black; font-weight: bold; font-style: normal; >#v1 < position: absolute; top: -10px; left: -10px; background: white; >#v2 < position: absolute; bottom: -11px; right: -11px; background: white; >path
«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»
Автор цитаты: Альберт Эйнштейн
Красивое оформление цитат на сайте
Цитата — дословная выдержка (отрывок) из какого-либо текста с указанием авторства или источника.
Википедия
Цитаты обычно используются на сайтах, где периодически публикуются новости, статьи, пресс-релизы о компании и т.п. Также цитаты пользуются большой популярностью в социальных сетях, поэтому посты с цитатами, как правило, очень быстро набирают кучу лайков и расшариваний. Красивое оформление цитат позволит не только донести интересную информацию до своих подписчиков, но и закрепить визуальное восприятие бренда или компании.
В этом уроке представлены различные приёмы оформления цитат, которые вы можете использовать в своих проектах.
Для добавления цитат на веб-страницы используются следующие теги:
1) — используется для цитирования больших фрагментов текста. Отделяет их от остального текста с помощью разрыва строк.
От перца, верно, начинают всем перечить. От уксуса - куксятся, от горчицы - огорчаются, от лука - лукавят, от вина - винятся, а от сдобы - добреют. Как жалко, что никто об этом не знает. Всё было бы так просто! Ели бы сдобу и добрели!
Льюис Кэрролл. Приключения Алисы в Стране чудес
Элемент имеет следующие стили по умолчанию:
blockquote
2) — используется для выделения коротких строчных цитат внутри абзаца.
Как говорил Говард Джейкобсон, Не важно, кто и по какому случаю первым сказал эти слова; важно, какое применение нашел им ты.
3) — предназначен для указания url источника, названия работы или имени автора.
В примерах используется шрифт Lato и иконочный шрифт Font Awesome.
Примеры оформления цитат
Пример 1.
Fashion is not.
blockquote < margin: 0; background: white; border-top: 5px solid #EAF9F9; border-bottom: 5px solid #EAF9F9; color: #3A3C55; padding: 30px 30px 30px 90px; position: relative; font-family: 'Lato', sans-serif; font-weight: 300; >blockquote:before < content: "\201C"; font-family: serif; position: absolute; left: 20px; top: 20px; color: white; background: #FB6652; width: 50px; height: 50px; border-radius: 50%; font-size: 50px; line-height: 1.35; text-align: center; >blockquote p < margin: 0 0 16px; font-size: 22px; letter-spacing: .05em; line-height: 1.4; >blockquote cite
Пример 2.
I invented my life.
blockquote < margin: 0; background: #F0F0F1; color: #333334; padding: 20px 30px; position: relative; border-left: 35px solid #DFDEDE; font-family: 'Lato', sans-serif; >blockquote:before < content: "\201C"; font-family: serif; position: absolute; left: -29px; top: 5px; color: #BCBCBC; font-size: 50px; text-shadow: 1px 2px 0 white; >blockquote p < margin: 0 0 16px; font-size: 20px; letter-spacing: .05em; line-height: 1.4; >blockquote cite
Пример 3.
The most courageous act.
blockquote < margin: 0; background: #FFF4E0; color: #474C4F; padding: 30px; position: relative; text-align: center; text-transform: uppercase; font-family: 'Lato', sans-serif; >blockquote:before < content: "\f10d"; font-family: FontAwesome; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); top: 14px; color: #474C4F; font-size: 20px; background: #FFF4E0; padding: 0 15px; >blockquote:after < content: ""; position: absolute; left: 15px; top: 20px; right: 15px; height: 4px; border-top: 1px dotted #474C4F; border-bottom: 1px dotted #474C4F; >blockquote p < font-size: 20px; letter-spacing: .05em; line-height: 1.4; >blockquote cite
Пример 4.
Look for the woman.
blockquote < margin: 0; background: #FDFBFB; color: #5F5F5F; padding: 30px 30px 30px 80px; position: relative; font-family: 'Lato', sans-serif; >blockquote:before < content: "\1F676"; position: absolute; z-index: 2; left: 30px; top: 15px; width: 60px; height: 60px; border-radius: 50%; text-align: center; line-height: 80px; color: #F2EAD7; font-size: 50px; background: rgba(188,231,250, .7); >blockquote:after < content: ""; position: absolute; left: 34px; top: 19px; width: 60px; height: 60px; border-radius: 50%; background: rgba(242,124,176, .7); >blockquote p < font-size: 24px; letter-spacing: .05em; line-height: 1.4; margin: 0 0 16px; position: relative; z-index: 3; >blockquote cite
Пример 5.
Elegance does not.
blockquote < margin: 0; background: #FFF1DE; color: #58554B; padding: 30px; border-radius: 5px; font-family: 'Lato', sans-serif; >blockquote p < margin-top: 0; font-size: 24px; >blockquote footer < position: relative; padding-left: 80px; line-height: 60px; >blockquote footer:before < content: "\f10d\00A0\00A0\f10e"; font-family: FontAwesome; color: white; width: 60px; height: 60px; text-align: center; border-radius: 50%; position: absolute; left: 5px; background: #F29987; box-shadow: inset 0 1px 0 #D4E8EF, 0 0 0 5px rgba(0,0,0,.1); text-shadow: 1px 1px 2px rgba(0,0,0,.2) >blockquote cite
Пример 6.
Success is often.
blockquote < margin: 0; background: white; border: 15px solid #FDE640; border-radius: 8px; text-align: center; color: #58554B; padding: 30px 50px; font-family: 'Lato', sans-serif; >blockquote p < margin-top: 0; font-size: 22px; line-height: 1.25; >blockquote span < background: #FDE640; box-shadow: -20px 0 #FDE640, 20px 0 #FDE640; position: relative; >blockquote span:before < content: "\201C"; font-family: serif; position: absolute; font-size: 60px; left: -50px; top: 10px; line-height: 0; >blockquote span:after < content: "\201D"; font-family: serif; position: absolute; font-size: 60px; right: -50px; bottom: -10px; line-height: 0; >blockquote cite
Пример 7.
Elegance is not.
blockquote < background: linear-gradient(135deg, #F6EEDB 50%, #F4FEF9 50%); padding: 50px 30px; text-align: center; position: relative; color: #49152C; padding: 30px 50px; font-family: 'Lato', sans-serif; >blockquote p < font-size: 22px; margin-top: 30px; >blockquote p:before < content: "\201C"; font-size: 100px; color: #EA6844; font-family: serif; position: absolute; top: 0; left: 50%; transform: translateX(-50%); >blockquote cite
Пример 8.
I don't know.
blockquote < margin: 0; background: #FFF4ED; padding: 40px; color: #3F484D; position: relative; font-family: 'Lato', sans-serif; text-align: center; >blockquote:before, blockquote:after < font-size: 45px; color: #3CA1D9; position: absolute; height: 2px; left: 40px; right: 40px; line-height: .5; background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%); font-family: serif; >blockquote:before < content: "\201C"; top: 30px; >blockquote:after < content: "\201D"; bottom: 30px; >blockquote p < font-size: 20px; >blockquote footer < margin-bottom: 1em; >blockquote cite
Пример 9.
Since everything is in our heads, we had better not lose them.
blockquote < margin: 0; color: #231E28; padding: 30px 30px 30px 60px; border-left: 8px solid #CBDDE7; position: relative; background: #FAF8EB; font-family: 'Lato', sans-serif; font-weight: 300; >blockquote:before < content: "\201C"; font-family: Arial; color: #CBDDE7; font-size: 70px; position: absolute; left: 15px; top: 5px; >blockquote p
Пример 10.
Don't spend time beating on a wall, hoping to transform it into a door.
blockquote < margin: 0; background: #BCE8EA; color: #131314; padding: 30px 30px 30px 90px; position: relative; font-family: 'Lato', sans-serif; >blockquote:before < content: "\201C"; font-family: serif; position: absolute; top: 20px; left: 16px; color: black; width: 40px; height: 40px; border-radius: 50%; background: white; font-size: 40px; font-weight: bold; text-align: center; line-height: 50px; >blockquote:after < content: ""; width: 4px; background: white; position:absolute; left: 70px; top: 20px; bottom: 20px; >blockquote p < margin-top: 0; font-size: 24px; font-weight: 300; >blockquote cite
Оформление цитат css: Красивое оформление цитат на сайте с помощью CSS – Оформление цитат на CSS
Цитаты на сегодняшний день являются неотъемлемой частью любого мало-мальски серьезного интернет проекта, да и одностраничные сайтики нет-нет да и вставят что нибудь этакое в форме цитаты.
Вставить, это мы все горазды, у многих же возникает проблема с оформлением цитат. В первую очередь цель цитирования — это привлечь внимание посетителя впечатав умную мысль, свою или чужую.
Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны. Распространенный вид цитаты – это наклонный текст или фон в виде кавычки. Тут уж все зависит от неуемной фантазии «человеков».
В WordPress цитаты оформляются автоматом и обусловлены стилем Вашего шаблона. Или же с помощью отличного плагина : WP-Note. Если у вас тематический блог и вы хотите подчеркнуть свою мысль в статье, то такое выделение слов c помощью этого плагина несомненно привлечет внимание читателя, да и смотрится это красиво.
С WordPress все понятно, нас интересует как оформить цитату на HTML-странице если нет возможности использования сторонних продуктов. Если вам не хочется возиться с картинками, то вполне можно обойтись оформлением с помошью CSS: сделать рамочку или просто отделить текст пунктирной границей.
Давайте наконец рассмотрим несколько примеров, как оформить цитату с помощью CSS кода.
Пример 1:
Цвет текста необязательно делать ярче, потому как 2 границы – верхняя и нижняя шириной в 3 пикселя заметно выделят цитату.
CSS код:
blockquote
Изгаляясь над кодом стиля, можно экспериментировать с внешним видом до бесконечности.
Пример 2:
Блок сразу заметен в тексте благодаря яркой границе слева.
CSS код:
blockquote
Такой вариант хорошо подойдет не только для цитат, но и например, для выделения кода, ссылок для скачивания, и т.д…
Пример 3:
Рискованный вариант. Прекрасно подойдет для случаев, когда цитата должна обязательно привлечь внимание читателя, призывая его что-то делать, или наборот не делать.
“… Здесь мерилом работы считают усталость…”
CSS код:
blockquote < border: 3px 0 solid #000; margin: 10px 40px; >blockquote p
Пример 4:
Довольно строгий, аскетичный вариант оформления. Подойдет для сайтов, где текст является основной частью дизайна, нежели красивые рисунки.
Раскаяться никогда не поздно, а согрешить можно и опоздать.
CSS код:
blockquote < border-left: solid 3px #333; padding-left:1px; margin: 10px 40px; >blockquote p
Пример 5:
Ну уж совсем простенький способ оформления цитаты, только благодаря наклонному стилю шрифта Georgia, тексту придается некая стилизация и его наверняка захочется прочесть.
” Бог у всех один – провайдеры разные.“
CSS код:
blockquote
Посмотрели примеры, теперь делайте выбор и вперед. Код CSS соответственно добавьте в свой файл стилей .cssПри написании какой-нибудь нетленной мысли, просто обнесите ее тегами blockquote и довольные собой любуйтесь результатом.
Расскажите, а как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы?
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Как красиво оформить цитаты на CSS — Технический блог
Тег предназначен для выделения цитат внутри документа. Как правило текст, обозначенный этим тегом, отображается в виде блока с отступами слева и справа, а также с отбивкой сверху и снизу. В этой статье я расскажу как «красиво» его оформить у себя на сайте с помощью CSS.
Примеры оформления тега blockquote на html
На момент написания этой инструкции блоки цитат на моем сайте на WordPress выглядят так:
Как настроить blockquote на css
В простейшем случае нужно изменить фон блока (мы помним, что тег blockquote является блочным элементом CSS), добавить бордюрчик и отступы. У меня это выглядит так:
blockquote
Псевдоэлемент :before
Вы спросите, а как же знак «i» перед цитатой (на других сайтах вы так же можете увидеть кавычку(и) и другие символы)? Чтобы добавить больше «украшательств» мы используем всевдоэлемент тегов :before , который применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется.
У меня на сайте CSS стили псевдоэлемента :before для тега blockquote выглядят так:
blockquote:before
Иконочные шрифты для сайта
Как вы успели заметить для вывода значка «i» я использовал специальный иконочный шрифт Awesome. Чтобы его использовать у себя на сайте вам нужно подключить следующий файл CSS стилей у себя на сайте перед закрывающим тегом :
Выводы
Используя CSS стили можно выделить блоки цитат оформленные тегом blockquote на фоне содержимого сайта. А при помощи превдотегов
:before, :after и иконочных шрифтов это оформление будет еще краше.
Благодарности
При написании статьи были использованы следующие источники:
- http://htmlbook.ru/html/blockquote
- https://zaurmag.ru/priemy-verstki-html-css/ikonochnye-shrifty-dlya-sajta-chto-eto-i-kak-ispolzovat.html
- http://wordsmall.ru/html-i-css/oformleniya-citaty-teg-blockquote.html
ОБРАЗЦЫ ЦИТАТ С ПРИМЕРАМИ CSS КОДА ДЛЯ КРАСИВОГО ОФОРМЛЕНИЯ СТАТЕЙ ~ Страницы Интернета
18 Образцов — примеров, как красиво оформить цитату с помощью CSS кода. Оформление цитируемых блоков является неотъемлемой частью любого мало-мальски серьёзного сайта или блога. Цитаты в умеренных количествах украшают текст и создают впечатление основательности. CSS Код добавляется в файл стилей .css Текст который нужно выделить, привлечь внимание, заключается в теги < blockquote >< /blockquote > или к параграфу добавляется стиль < p >< /p >
Образцы CSS кода брались из разных источников и публикуются как есть. Если вас интересует чистота кода, рекомендуем изучить css и сделать правки.
Разные способы оформления цитат:
CSS Код можно получить нажав на ссылку под образцом цитаты блока
- Посмотреть CSS Код блока:
- Посмотреть CSS Код цитаты:
- Посмотреть CSS Код блока:
- Посмотреть CSS Код:
Css блок для выделения большого текста. При наведении курсора боковая полоса-бордюр меняется. Demo: http://mmktricks.blogspot.ru/2013/01/stylish-blockquote-for-blogger-with.html
- Посмотреть CSS Код:
- Посмотреть CSS Код:
- Посмотреть CSS Код:
- Посмотреть CSS Код:
- Посмотреть CSS Код:
- Посмотреть CSS Код:
- Получить CSS Код:
- Получить CSS Код:
- Получить CSS Код:
- CSS Код блока:
Оформление ссылок для скачивания с файлообменников
- CSS Код ссылок:
- CSS Код ссылок:
- CSS Код ссылок:
Вот пожалуй и всё! По аналогии делаются врезки в статье, примечания, заметки и т.д. Всё зависит от вашей фантазии и знаний CSS.
http://editlw.ru/articles.php?article_id=288
Источник: EditLw.Ru
Тег цитаты html. Красивое оформление цитаты css
Для создания цитат в языке HTML используются два элемента: блочный элемент и строчный элемент . Тег используется для отображения длинных цитат, занимающих целый абзац и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. Внутри него могут присутствовать другие элементы форматирования текста.
Элемент используется для коротких цитат, являющихся частью текущего абзаца. Как правило, браузеры заключают содержимое элемента в кавычки. Обычно в состав цитаты не входят символы разрыва строки, и цитата считается элементом текстового уровня.
Для обоих элементов может быть указан атрибут CITE , значением которого является URL-aдpec цитируемоrо фраrмента.
Пример: длинные и короткие цитаты
- Попробуй сам »
можно легко определить с помощью вертикального отвеса.
Как сказал А. А. Милн, некоторые люди говорят с животными.
Зенит — это наивысшая для наблюдателя точка на небосклоне
в вертикальном направлении, которую, как известно,
можно легко определить с помощью вертикального отвеса.
Как сказал А. А. Милн, некоторые люди говорят с животными.
Тег
Аббревиатура — принятое на письме сокращение слов или слово, составленное из нескольких частей друrих слов (ВУЗ, НИИ, исполком и др.). При употреблении в тексте какого-либо акронима или аббревиатуры следует воспользоваться тегом . С помощью атрибута «title» можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте «title». Чтобы отличать аббревиатуры от обычноro текста, они подчеркиваются пунктирной линией.
Пример: Аббревиатура
- Попробуй сам »
NАSА проводит несколько невероятных космических экспериментов.
Пp. Стивен Хокинг — физик-теоретик и космолог.
NАSА проводит несколько невероятных
космических экспериментов.
Пp. Стивен Хокинг — физик-теоретик и космолог.
Тег
Тег используется для указания контактной информации, адреса и телефонов. Он может содержать почтовый адрес, а также адрес электронной почты или номер телефона. Большинство браузеров отображают содержимое элемента шрифтом с курсивным начертанием.
Пример: Адрес
- Попробуй сам »
Теги и
Тег используется при оформлении ссылки на какой-то первоисточник, например на книгу, веб-сайт или научную работу, для обозначения упоминаемого источника. Часто используется в списках литературы, при указании aвторских прав или упоминании имени владельца ресурса. Браузеры отображают содержимое элемента шрифтом с курсивным начертанием.
Тег используется для обозначения определения какого-либо нового термина. Объяснение нового термина (научного концепта или узкопрофильного названия) в тексте называется «определением». Элемент можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.
Пример: Источники и определения
- Попробуй сам »
на просмотр фильма Красный дракон Стивена Хопкинса.
Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости
Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма Красный дракон Стивена Хопкинса.
— векторная величина, направление её вектора совпадает
с направлением скорости
Тег
Тег управляет направлением отображаемого текста. Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево).
Пример: Направление текста
- Попробуй сам »
Оформляем цитаты, стильно и современно!
Сегодня мы собираемся создать некоторые привлекательные стили для оформления блоков с цитатами. Используя текстуры, круги, и псевдо-элементы, можно значительно оживить блоки с цитатами или советами.
Пожалуйста, обратите внимание: результат этого урока будет работать, как задумано, только в браузерах, которые поддерживают соответствующие свойства CSS.
Мы будем опускать префиксы браузеров в примерах кода в статье. Но вы, конечно, можете найти их в исходных файлах.
HTML-разметка
Разметка для цитат будет следующей:
Div с классом mb-thumb будет присутствовать не во всех примерах. В примере 3 мы его добавим как дочерний по отношению к div-у с классом mb-attribution.
CSS
Давайте сначала определим некоторые общие стили:
@font-face font-family: ‘icons’;
src: url(«font/icons.eot»);
src:
url(«font/icons.eot?#iefix») format(’embedded-opentype’),
url(«font/icons.woff») format(‘woff’),
url(«font/icons.ttf») format(‘truetype’),
url(«font/icons.svg#icons») format(‘svg’);
font-weight: normal;
font-style: normal;
>
/* Let’s set and reset some common styles */
.mb-wrap width: 300px;
margin: 20px auto;
padding: 20px;
position: relative;
>
.mb-wrap p margin: 0;
padding: 0;
>
.mb-wrap blockquote margin: 0;
padding: 0;
position: relative;
>
.mb-wrap cite font-style: normal;
>
Мы добавляем шрифт с иконками, который мы будем использовать в примерах. Мы также установим некоторые стили по умолчанию для блока с цитатой и для внутренних элементов. Обратите внимание, что некоторые элементы имеют стили по умолчанию, поэтому нам нужно их «сбросить».
Пример 1
Первый пример будет иметь кожанный фон и круглый эскиз для украшения.
Итак, в первую очередь определим стили для всей оболочки. Мы зададим ей текстурный фон и переопределим ширину:
.mb-style-1 background: #363738 url(../images/dark_leather.jpg) repeat top left;
margin-top: 100px;
padding-top: 100px;
width: 400px;
color: #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
border-top: 10px solid #fff;
>
Круглый эскиз будет приподнят при помощи отрицательного значения для top. Полупрозрачные границы добавят некоторый особый стиль:
.mb-style-1 .mb-thumb display: block;
width: 180px;
height: 180px;
border: 10px solid rgba(255,255,255,0.5);
border-radius: 50%;
background: url(../images/Dartagnan-musketeers.jpg) no-repeat center center;
position: absolute;
left: 50%;
top: -90px;
margin: 0 0 0 -90px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
>
Для добавления кавычек мы будем использовать шрифт с иконками, который мы подключили раньше, и псевдо-классы :before и :after.
.mb-style-1 blockquote:before,
.mb-style-1 blockquote:after font-family: ‘icons’;
position: absolute;
font-size: 70px;
top: -95px;
color: #242526;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
>
.mb-style-1 blockquote:before content: ‘\275d’;
>
.mb-style-1 blockquote:after right: 0px;
content: ‘\e800’;
>
Стили для текстовых элементов будут выглядеть следующим образом:
.mb-style-1 blockquote p font-family: Cambria, Georgia, serif;
font-style: italic;
font-size: 25px;
border-bottom: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 1px 0 rgba(255,255,255,0.1);
padding: 10px 10px 20px 10px;
text-align: center;
margin: 0 0 20px 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
>
.mb-style-1 .mb-attribution text-align: right;
>
.mb-style-1 .mb-author text-transform: uppercase;
font-size: 20px;
font-weight: bold;
color: #1b1c1d;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
>
.mb-style-1 cite a color: #f0f0f0;
font-style: italic;
font-family: Cambria, Georgia, serif;
text-shadow: 1px 1px 1px rgba(0,0,0,0.7)
>
.mb-style-1 cite a:hover text-shadow: 2px 2px 3px rgba(0,0,0,0.9)
>
И это был первый пример! Давайте перейдем к следующему.
Пример 2
Пример 2 будет иметь модный асимметричный стиль с закругленным элементом с левого бока. Сверху мы хотим разместить круг с кавычками. Итак, давайте сначала добавим отступ к цитате, чтобы сдвинуть её вниз:
.mb-style-2 blockquote padding-top: 150px;
>
Круг имеет следующие стили:
.mb-style-2 blockquote:after font-family: ‘icons’;
background: rgba(235,150,108,0.8);
width: 130px;
height: 130px;
border-radius: 50%;
content: ‘\275e’;
position: absolute;
font-size: 70px;
line-height: 130px;
text-align: center;
top: 0px;
left: 50%;
margin-left: -65px;
color: rgba(255,255,255,0.5);
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
>
Мы отцентрировали круг по горизонтали, установив left равный 50% и отрицательный левый отступ, равный половине его ширины.
Теперь давайте добавим закругленный элемент с помощью другого псевдо-элемента. Мы установим его ширину и высоту равную 500px, border-radius — 50%, и только левую границу. Это создаст нужную форму:
.mb-style-2 blockquote:before content: »;
width: 500px;
height: 500px;
border-radius: 50%;
border-left: 5px solid rgba(235,150,108,0.1);
position: absolute;
top: 0px;
left: -50px;
z-index: -1;
>
Для параграфа будет установлен display: inline, потому что мы хотим разделить строки:
.mb-style-2 blockquote p font-family: Baskerville, Georgia, serif;
font-size: 28px;
font-style: italic;
background: rgba(255,255,255,0.5);
display: inline;
color: rgba(235,150,108,0.8);
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
line-height: 46px;
box-shadow: 0 -6px 0 rgba(235,150,108,0.2);
>
И, наконец, давайте определим стили для остальных текстовых элементов:
.mb-style-2 .mb-attribution text-align: right;
>
.mb-style-2 .mb-author text-transform: uppercase;
font-size: 18px;
padding-top: 10px;
font-weight: bold;
color: #d48158;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
>
.mb-style-2 cite a color: #d7aa94;
font-style: italic;
>
.mb-style-2 cite a:hover color: #d48158;
>
Пример 3
В третьем примере, мы хотим увеличить область с текстом и установить тень для цитаты:
.mb-style-3 blockquote background: #fff;
padding: 30px;
border-radius: 5px;
box-shadow:
inset 0 2px 0 rgba(188, 147, 200, 0.7),
-5px -4px 25px rgba(0, 0, 0, 0.3);
>
Мы добавим маленькую стрелку, указывающую вниз, используя технику, предлагаемую в CSS Arrow Please!
.mb-style-3 blockquote:after,
.mb-style-3 blockquote:before top: 100%;
border: solid transparent;
content: » «;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
>
.mb-style-3 blockquote:after border-top-color: #ffffff;
border-width: 10px;
left: 65%;
margin-left: -10px;
>
.mb-style-3 blockquote:before border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
>
Параграфы будут иметь следующие стили:
.mb-style-3 blockquote p font-family: ‘Alegreya’, serif;
font-size: 24px;
color: #b4b4b4;
font-weight: 400;
line-height: 40px;
font-style: italic;
text-indent: 100px;
position: relative;
>
Теперь мы будем добавлять кавычки cлева с помощью псевдо-элемента :before:
.mb-style-3 blockquote p:before content: ‘\201C’;
font-family: serif;
font-style: normal;
font-weight: 700;
position: absolute;
font-size: 175px;
top: 0px;
left: -105px;
color: rgba(188, 147, 200, 1);
text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
>
Часть со ссылкой и автором будет иметь большой отступ справа, потому что мы добавим туда эскиз:
.mb-style-3 .mb-attribution text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
>
Блок с эскизом будет в виде маленького кружка с изображением автора в качестве фона:
.mb-style-3 .mb-thumb display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url(../images/bronte.jpg) no-repeat center center;
position: absolute;
right: 10px;
bottom: 5px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
>
Добавим остальные стили для текста:
.mb-style-3 .mb-author font-family: ‘Alegreya SC’, serif;
font-weight: 700;
font-size: 18px;
color: rgba(188, 147, 200, 1);
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
>
.mb-style-3 cite a font-family: ‘Alegreya’, serif;
font-weight: 700;
font-style: italic;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
>
.mb-style-3 cite a:hover color: rgba(188, 147, 200, 1);
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
>
Пример 4
Этот пример немного сложнее. Мы создадим большой темный блок, с большого размера цитатой. Образ автора будет установлен в качестве фона:
.mb-style-4 width: 600px;
padding: 20px 240px 50px 20px;
background: #444 url(../images/dickens.jpg) no-repeat 140% 25%;
overflow: hidden;
box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
>
Параграф будут иметь RGBA значение для цвета. Это позволит нам определить значение для полупрозрачности:
.mb-style-4 blockquote p color: rgba(255,255,255,0.95);
font-size: 21px;
line-height: 26px;
text-align: right;
color: #999;
text-transform: uppercase;
font-weight: bold;
>
Тег span будет иметь особый стиль. Мы повернем его немного и установим ему большой размер текста и цвет:
.mb-style-4 blockquote p span font-weight: 700;
color: #fcf779;
font-size: 58px;
line-height: 58px;
display: block;
padding: 10px;
text-shadow: 7px 7px 2px rgba(0,0,0,0.2);
transform: rotate(-7deg) translateY(10px);
>
Добавим кавычки из нашего шрифта с помощью псевдо-класса :before:
.mb-style-4 blockquote p span:before font-family: ‘icons’;
content: ‘\275d’;
font-weight: normal;
opacity: 0.1;
font-size: 136px;
position: absolute;
color: #fff;
top: -50px;
left: -25px;
transform: rotate(45deg);
>
Зададим им небольшую полупрозрачность, и повернем на 45 градусов.
Блок с подписью будет повернут таким образом, что мы можем видеть только треугольник в правом углу:
.mb-style-4 .mb-attribution text-align: right;
text-transform: uppercase;
font-weight: bold;
background: #222;
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
text-align: center;
padding: 30px;
transform: rotate(-40deg) translate(175px, 110px);
>
Давайте добавим тире перед автором цитаты:
.mb-style-4 .mb-author:before content: ‘\2014’;
padding-right: 4px;
>
.mb-style-4 .mb-attribution cite a color: #777;
>
.mb-style-4 .mb-attribution cite a:hover color: #fcf779;
>
Пример 5
Пятый пример будет выглядеть как набор окружностей. Мы будем использовать несколько теней для элемента с цитатой, чтобы достичь этого сделаем следующее:
.mb-style-5 blockquote text-align: center;
background: #333;
width: 350px;
height: 350px;
padding: 60px;
border-radius: 50%;
box-shadow:
inset 0 0 0 10px #333,
inset 0 0 0 12px rgba(255,255,255,0.6),
80px 0 0 rgba(255,255,255,0.3),
-80px 0 0 rgba(255,255,255,0.3),
50px 0 0 rgba(60,185,145,0.2),
-50px 0 0 rgba(185,60,60,0.2);
>
Зададим стили для абзаца:
.mb-style-5 blockquote p color: #fff;
font-size: 20px;
font-weight: 400;
padding-top: 25px;
text-transform: uppercase;
text-shadow: 0 0 1px #fff, 0 1px 1px #000;
font-family: ‘Annie Use Your Telescope’, cursive;
>
Для того, чтобы разделить цитату, мы поставим последнюю её часть в span и зададим отступы:
.mb-style-5 blockquote p span display: block;
position: relative;
padding-top: 40px;
margin-top: 40px;
border-top: 1px solid rgba(255,255,255,0.3);
>
Давайте добавим маленький круг с кавычками:
.mb-style-5 blockquote p span:before position: absolute;
width: 50px;
height: 50px;
background: #ddd;
content: «\275d»;
font-size: 40px;
color: #333;
top: 0px;
left: 50%;
margin: -25px 0 0 -25px;
border-radius: 50%;
>
И, наконец, некоторые стили для других текстовых элементов:
.mb-style-5 .mb-attribution text-align: center;
font-family: ‘Annie Use Your Telescope’, cursive;
padding: 20px;
font-size: 16px;
>
.mb-style-5 cite a:hover color: #000;
>
Пример 6
Последний пример будет выглядеть как Polaroid, при этом мы не будем использовать изображения. Давайте вначале зададим стили для оболочки:
.mb-style-6 width: 350px;
height: 400px;
background: #fff;
border-radius: 4px;
>
Добавим некоторые симпатичные тени, используя технику Nicolas Gallagher:
/* Shadow style from Nicolas Gallagher: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ */
.mb-style-6:before,
.mb-style-6:after content: «»;
position: absolute;
z-index: -2;
transform: rotate(-3deg);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
height: 20%;
left: 10px;
max-height: 100px;
max-width: 300px;
width: 50%;
>
.mb-style-6:after transform: rotate(3deg);
left: auto;
right: 10px;
>
Цитата будет на темном фоне:
.mb-style-6 blockquote background: #333;
height: 75%;
padding: 30px;
text-align: center;
>
И мы добавим кавычки с правой стороны:
.mb-style-6 blockquote:before color: rgba(255,255,255,0.2);
position: absolute;
content: ‘\0022’;
font-size: 150px;
line-height: 130px;
font-style: italic;
top: 0px;
right: 20px;
font-family: Cambria, Georgia, serif;
>
Параграф будет иметь следующий стиль:
.mb-style-6 blockquote p color: #fff;
font-family: ‘Abril Fatface’, sans-serif;
font-size: 24px;
text-shadow: 1px 1px 1px #000;
>
Давайте добавим некоторый отступ к подписи:
.mb-style-6 .mb-attribution padding: 20px;
>
Имя автора цитаты будет немного повернуто, и мы будем использовать рукописный шрифт, чтобы сделать его похожим на подпись:
.mb-style-6 .mb-author font-size: 24px;
font-family: ‘Dr Sugiyama’, cursive;
-moz-transform: rotate(-4deg);
color: #070d5f;
>
И последнее, но не менее важное, ссылку на цитату:
.mb-style-6 cite a color: #999;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 12px;
>
.mb-style-6 cite a:hover color: #000;
>
Надеюсь, вам понравилось и эти примеры будут полезными для вас!
Демонстрация
Скачать исходные файлы
Перевод статьи с tympanus.net/codrops
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
отсебятина — Оформление цитат — стилизация blockquote с помощью CSS3
Отсебятина от 08 января 2012 года. Теги: HTML CSS
В этой короткой статье я расскажу, как оформить блок цитат с помощью CSS3 и одним или двумя тэгами.
Как это выглядит в вашем браузере (чтобы выделить цитату, она помещена в белый бокс):
То есть как-то не получилось вот так вот «раз!» — и на другую ступеньку вскочить. И это за 20 то лет. Ведь у меня не то что бы не получилось… Получилось! Но как-то средненько. То есть я такой средненький. Ведь мне никто не мешал, не запрещал, то есть я не могу никому сказать: «Вон у меня из-за кого все не так!». И, знаете, какая главная проблема? Мне хватает мозгов все это понять, но не хватает, чтобы изменить.
Как это должно выглядеть:
Если необходимо, чтобы указывался автор цитаты, то меняем HTML-код:
текставтор
Добавляем описание класса в CSS и изменяем одно из правил (в blockquote:after меняем line-height на 6 px):
То есть как-то не получилось вот так вот «раз!» — и на другую ступеньку вскочить. И это за 20 то лет. Ведь у меня не то что бы не получилось… Получилось! Но как-то средненько. То есть я такой средненький. Ведь мне никто не мешал, не запрещал, то есть я не могу никому сказать: «Вон у меня из-за кого все не так!». И, знаете, какая главная проблема? Мне хватает мозгов все это понять, но не хватает, чтобы изменить.
Камиль, «О чём еще говорят мужчины»
Кроссбраузерность (проверял, на том, что есть):
- Mozilla Firefox 9
- Opera 11.60
- IE 8+
Автор, спасибо это просто супер.
Новенького там ничего не появилось ? Ищу что то ординарное…
Оформление цитат
Всем привет и добро пожаловать на SerBlog.ru. Не так часто, но иногда приходится пользоваться тегами (blockquote) цитат на странице. Обычно это происходит в комментариях, когда нужно процитировать ранее опубликованный комментарий, чтобы было понятно кому вы ответили. Или же просто выделить в статье какую-то часть текста, чтобы сделать акцент и привлечь внимание читателя к чему-то очень важному, по вашему мнению. Обычно в таблицах стилей сайтов уже прописано какое-то оформление для этого тега, но в большинстве случаев это оформление ограничивается лишь наклоном текста. Поэтому мы попробуем изменить эту ситуацию и настроить оформление так, как нам нужно. Выглядеть эту будет вот так:
Знать много и не выставлять себя знающим есть нравственная красота. Знать мало и выставлять себя знающим есть болезнь. Только понимая эту болезнь, мы можем избавиться от нее.
Лао Цзы.
Для того, чтобы изменить оформление, нужно открыть таблицу стилей, обычно это style.css и найти там blockquote. Добавить или вставить вместо тех, которые есть примерно такие строчки:
1 2 3 4 5 6 7 8 9
blockquote < background: none repeat scroll 0 0 #FFFFCC; border: 1px solid #DDDDDD; border-radius: 5px 5px 5px 5px; color: gray; font: italic 14px arial; padding: 5px 10px !important; >blockquote:before, blockquote:after
Вот таким образом можно изменить стандартный вид оформления цитат. Изменять их можно как угодно, зависит от вашей фантазии. Еще через CSS можно сделать красивое оформление ссылок.
Css цитаты: Красивое оформление цитат на сайте с помощью CSS – Оформление цитат на CSS
Проблем с оформлением и выводом цитат, на сегодняшний день не существует в принципе. Можно настроить внешний вид блока с текстом как угодно, все зависит от фантазии автора. С помощью таблиц каскадных стилей CSS и новых стандартов в CSS3, возможности для вдохновения практически безграничны. Но не у всех есть склонности и желание фантазировать, вот как раз для этого я и продолжаю начатую серию в статье «Оформление цитат». Новую серию из примеров различных способов оформления цитат.
Правда, необходимо отметить, что не все пользователи cмогут увидеть одинаковый результат.Те кто использует замшелый IE6, например, не увидят закругленные углы у блоков с текстом. Opera начиная с последних версий наконец-то стала поддерживать некоторые новые свойства CSS3.
Наиболее красиво и точно, с выдержкой и отображением всех параметров, при выводе цитат с оформлением с помощью CSS, работают новые версии браузеров Firefox, Chrome и Safari.
Проблемы отображения связаны только с выводом скругленных углов в некоторых браузерах, так как они тупо игнорируют свойство border-radius: В остальном же, все выглядит даже очень не плохо.
И так, чтобы получить блок с цитатой с закругленными углами и темным фоном в файл .css необходимо прописать следующий код:
1 2 3 4 5 6 7
blockquote
На страничке вы получите цитату такого вида:
Использовать такой стиль можно, да и нужно, не ограничиваясь оформлением только лишь цитат. Это так же могут быть и комментарии или просто блоки с какой либо информацией, выводимой на страницах ваших сайтов. Ну, а мы продолжим о цитатах.
Светлый фон с закругленными углами
1 2 3 4 5 6 7 8 9 10
blockquote
В результате мы получим замечательный блок с цитатой без использования файлов с изображениями:
Вы легко можете экспериментировать с закругленными углами. Необходимо лишь помнить одно, что для разных браузеров существуют свои правила . Например Firefox отошел от стандартов и в сравнении с Safari, для «лисицы» существуют свои правила, которые можно регулировать с помощью параметров стилей CSS.
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
Манипулируя данными параметрами не сложно добиться различных результатов в оформлении блоков с цитатами. Например, если возникнет необходимость придать округлость различным углам, что мы и увидим на следующем примере:
1 2 3 4 5 6 7 8 9 10 11
blockquote
В итоге всех не хитрых действий, получается хорошо и добротно оформленный блок с цитатой, и всё так же без использования каких либо картинок:
Не плохо будет смотреться ваша цитата или коммент, если использовать скругление к трем углам из четырех, в стиле так называемого пузыря. Для примера воспользуйтесь следующей структурой кода css:
1 2 3 4 5 6 7 8 9 10 11
blockquote
Что из этого получится при выводе на страницах, можете увидеть на скрине ниже, кажется довольно прилично получилось:
На всех этих незамысловатых примерах, попытался показать простейший способ оформления, практически чего угодно, с помощью нескольких строк кода. Это лишь малая xfcnm всех обширнейших возможностей, которые открываюnся нам с приходом новых стандартов CSS3.
Приверженцам плагинов от WordPress, опережая их возгласы в поддержку оных, спешу заметить, что сам очень даже пользую замечательный плагин для цитат и прочего «WP — Note», в чем сможете убедиться ниже.
Вот раньше признаком готовности сваренных пельменей было их всплытие. Теперь пельмени даже не тонут…
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
14 удивительных примеров css и html Blockquote стилей для настройки блока цитирования/цитат в Blogger и WordPress
Блок цитирования/цитат или Blockquote – это нужная выдержка в письменном документе, который выделяется от основного текста. Мы все любим цитировать великих авторов, но все мы должны публиковать эти великие слова не просто так в контенте, а с использованием красивых блоков для цитат. На зарубежном блоге MBT я наткнулся приблизительно на 14 простых css и html Blockquote стилей для цитирования, которые выглядят очень красивыми. Эти стили цитат дадут вам представление о том, как можно создать и настроить свой собственный блок цитат для своего блога или сайта.
Обратите внимание на каждом из них, каждый из них подходит для любого блога, как для Blogger, так и WordPress. Подробная информация о добавлении блок цитат на свой блог/веб-сайт приведены внизу в разделе установка и настройка.
Блок цитирования с необычными границами и с изображением совы
HTML код Blockquote:
blockquote margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url (http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px;
font: normal .9em «comic sans ms», Courier,»Times New Roman», Times, serif;
color : #000;
border-left: 8px dotted #DAB547;>
blockquote p margin: 0;
padding-top:10px;
>
Блок цитирования с фиолетовой угловой меткой и границей
HTML код Blockquote:
.post blockquote margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url (http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, «Times New Roman», Times, serif;
color : #000;
border-bottom : 5px solid #435388;
>.post blockquote p margin: 0;
padding-top:10px;
>
Блок цитирования в стиле мозаики с изображением в правом углу
HTML код Blockquote:
.post blockquote margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url (http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom;
font: bold .9em «comic sans ms», arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
>.post blockquote p margin: 0;
padding-top:10px;
>
Блоки для цитат с классической левой границей
HTML код Blockquote:
.post blockquote background: #F3F3F1 url (http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, «Times New Roman», Times, serif;
>
.post blockquote p margin: 0;
padding-top: 10px;
>
HTML код Blockquote:
blockquote background: #484B52 url (http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, «Times New Roman»;
>
.post blockquote p margin: 0;
padding-top: 10px;
>
Блок цитирования с красной угловой меткой
HTML код Blockquote:
.post blockquote margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url (http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, «Times New Roman», Times, serif;
color : #000;
border: 1px solid #DDD;
>.post blockquote p margin: 0;
padding-top:10px;
>
Блоки для цитат с кавычками
HTML код Blockquote:
.post blockquote font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url (http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left;
text-indent: 65px;
>
.post blockquote div display: block;
background: url (http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
>.post blockquote p margin: 0;
padding-top:10px;
>
HTML код Blockquote:
.post blockquote font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
>
.post blockquote div display: block;
background: url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
>.post blockquote p margin: 0;
padding-top:10px;
>
HTML код Blockquote:
.post blockquote font:bold italic .9em «comic sans ms», Tahoma, sans-serif;
padding-top: 25px;
margin: 5px;
background: url (http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5kCZUGZI/AAAAAAAACP8/UEMNYwjmokk/s400/left.gif) no-repeat top left;
text-indent: 65px;
color:#6299E4;
>
.post blockquote div display: block;
background: url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb52LlPk-I/AAAAAAAACRE/_MC7HQLGIng/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
>.post blockquote p margin: 0;
padding-top:10px;
>
HTML код Blockquote:
.post blockquote font: italic 1em «comic sans ms», Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left;
text-indent: 65px;
>
.post blockquote div display: block;
background: url (http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
>.post blockquote p margin: 0;
padding-top:10px;
>
Блок цитирования с хорошо выровненным изображением наверху
HTML код Blockquote:
.post blockquote margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url (http://2.bp.blogspot.com/_7wsQzULWIwo/SwhrZPcjY4I/AAAAAAAACRk/qOMm-cht3rw/s1600/block333.gif) no-repeat top;
font: normal 1em «comic sans ms»,Helvetica, Courier,»Times New Roman», Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
>.post blockquote p margin: 0;
padding-top:10px;
>
Блок цитирования с изображением стиля навеса в верхней и нижней части
HTML код Blockquote:
.post blockquotemargin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c7RglzI/AAAAAAAACOU/bwGBdTO2lq4/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
>.post blockquote divbackground : #FFF url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c0v4knI/AAAAAAAACOM/S-iKAwSXT-I/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
>.post blockquote p margin: 0;
padding-top:10px;
>
Блок цитирования с окруженными границами
HTML код Blockquote:
.post blockquote margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url (http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrY8vdJeI/AAAAAAAACRc/8Ed9vrlWWGo/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, «comic sans ms»,Courier,»Times New Roman», Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
>
.post blockquote p margin: 0;
padding-top:10px;
>
Блок цитирования человек обезьянка.
Как только вы получите представление о том, как использовать эти блоки цитат, то вы сможете сами создать художественные и забавные блоки для цитат, как на этом изображение ниже.
HTML код Blockquote:
.post blockquotemargin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url (http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top;
font: normal 1em «comic sans ms», Helvetica, verdana;
color : #666;
>.post blockquote divbackground : #E6F1FA url (http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
>.post blockquote p margin: 0;
padding: 20px;
>
Установка и настройка css Blockquote стилей:
Теперь давайте добавим один из этих удивительных и уникальных Blockquote стилей на ваш блог, для этого выполните следующие действия:
- Перейдите в панель блога на Blogger илиWordPress.
- Сделайте резервную копию своего шаблона.
- На BlogSpot нужно перейти в шаблон >>Изменить HTML, на WordPress, Внешний вид >>Редактор >>style.css.
- Найдите код .postblockquote или blockquote и удалите весь связанный код. В большинстве шаблонов BlogSpot код похож на это:
На WordPress все немножко по-другому, в файле style.css код может выглядеть так:
blockquote — webkit-box-shadow: rgb (221, 221, 221) 4px 4px 4px;
Если вы не смогли найти такой код, то это нормально.
- Теперь на Blogger в том же редакторе шаблонов найдите ]]> и чуть выше ]]> вставьте код одной из понравившихся вам блока цитат. Вот пример кода (только пример!):
.post blockquote margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url (Здесь вставьте ссылку на изображение) no-repeat 350px 5px;
font: normal .9em «comic sans ms», Courier,»Times New Roman», Times, serif;
color : #000;
border: 8px dotted #DAB547;>
.post blockquote p margin: 0;
padding-top:10px;
>
Важные области, которые должны быть настроены, выделены жирным шрифтом.
- padding: Относится к расстоянию текста от Blockquote границ. Идет он в таком порядке ->Высота Право Низ Лево.
- background: Включает в себя цвет фона и изображения блока цитат, используемого в нем. Первые шесть цифр с решеткой (#) значение цвет фона, а ссылка для изображения вставляется вместо жирного текста в этом разделе-> url (Здесь вставьте ссылку на изображение)
- font: Включает в себя шрифт стиля, размера и соответственно типа. Цвета для справки в коде выше.
- color: Относится к цвету текста. Вы можете использовать другой цвет шрифта с помощью любой диаграммой цветов.
- border: Относится к границе ширины, стиля и соответственного цвета.
- Все представленные блоки цитат могут быть настроены аналогично.
- После настройки, наконец, сохраните шаблон и посмотрите на интересные изменения.
Примечание: Для блока цитат с кавычками, стиля с навесов и паренек обезьянка, нужно немного больше кодов. Читайте ниже.
Руководство: Для упомянутых выше блоков цитат вам нужно добавить некоторые дополнительные теги внутри редактора шаблонов блоггер, как описано ниже:
Всякий раз, когда вы что-то будете писать в блоке цитат? внутри создания/написание сообщения в редакторе Blogger просто переключитесь в режим HTML и добавьте два тега, т.е. и между тэгами Blockquote, как показано ниже:
Вот и все! Надеюсь, вам понравилось, убедитесь в том, что вы подписаны на последние CSS и HTML трюки, связанные с Blogger и WordPress блога tidun-soft.ru. Не забудьте рассказать мне, как полезен этот пост был для вас.
Поделиться «14 удивительных примеров css и html Blockquote стилей для настройки блока цитирования/цитат в Blogger и WordPress»
Рекомендую похожие записи::
Стилизация цитат в CSS | Шнайдер блог
Цитирование 一 отличный способ выделить ключевую мысль или важные тезисы, поэтому этот инструмент так часто применяется на сайтах. Чтобы оформить цитату на HTML-странице используется CSS, ровно как и в других случаях, например, при необходимости добавления текстовых эффектов, создания кнопок и пр.. Рассмотрим ряд примеров стилизации цитат.
Во-первых, уточним, что в HTML коде цианата “заключается” в контейнер . Здесь возможны следующие параметры, задаваемые в CSS:
- border 一 граница.
- border-width 一 толщина границы.
- margin 一 отступ цитаты.
- padding 一 отступ внутри цитаты.
Пример 1. Создадим две границы шириной в 4px:
border-top: #999 4px solid;
border-bottom: #999 4px solid;