понедельник, 29 февраля 2016 г.
ОБРАЗЦЫ ЦИТАТ С ПРИМЕРАМИ CSS КОДА ДЛЯ КРАСИВОГО ОФОРМЛЕНИЯ СТАТЕЙ
18 Образцов — примеров, как красиво оформить цитату с помощью CSS кода. Оформление цитируемых блоков является неотъемлемой частью любого мало-мальски серьёзного сайта или блога. Цитаты в умеренных количествах украшают текст и создают впечатление основательности. CSS Код добавляется в файл стилей .css Текст который нужно выделить, привлечь внимание, заключается в теги < blockquote > < /blockquote > или к параграфу добавляется стиль < p class="blok или иное название" > < /p >.
Образцы CSS кода брались из разных источников и публикуются как есть. Если вас интересует чистота кода, рекомендуем изучить css и сделать правки.
Разные способы оформления цитат:
CSS Код можно получить нажав на ссылку под образцом цитаты блока
- Посмотреть CSS Код цитаты:.blockquote {
background: #f7f7f7;
border-left:5px solid #FF7F00;
font-style: italic;
margin: 1.5em 10px;
padding: 0.5em 10px;
}
.blockquote:before {
color: #bbb;
content: "\201C"; /* Непечатаемый символ слева */
font-size: 3em;
line-height: 0.1em;
margin-right: 0.2em;
vertical-align: -.4em;
}
.blockquote:after {
color: #bbb;
content: "\201D"; /* Непечатаемый символ справа */
font-size: 3em;
line-height: 0.1em;
vertical-align: -.45em;
}
.blockquote > p:first-child {
display: inline;
}
Css блок для выделения большого текста. При наведении курсора боковая полоса-бордюр меняется. Demo: http://mmktricks.blogspot.ru/2013/01/stylish-blockquote-for-blogger-with.html
Оформление ссылок для скачивания с файлообменников
Вот пожалуй и всё! По аналогии делаются врезки в статье, примечания, заметки и т.д. Всё зависит от вашей фантазии и знаний CSS.
Источник: EditLw.Ru
0 коммент.:
Отправить комментарий