Java, UX, HTML, CSS, WEB-design

10 простых фрагментов CSS для создания красивых цитат

[ad_1]

Зачем изобретать элементы дизайна колес, которые уже есть в Интернете бесплатно? Цитаты остаются одним из основных элементов веб-сайтов с большим количеством текста, и они бывают разных стилей.

Я выбрал лучшие бесплатные цитаты, которые вы можете найти. В каждом из этих дизайнов используется чистый код CSS, поэтому их легко воспроизвести.

НЕОГРАНИЧЕННЫЕ ЗАГРУЗКИ: шаблоны электронной почты, администратора, целевой страницы и веб-сайта

Только начиная с $16.50 в месяц!

Циркулярная цитата

Возможно, самая уникальная и стильная цитата из всего этого поста — цитата из литературного круга.

Он расположен на ярко-оранжевом фоне, поэтому для вашего типичного макета это может оказаться непрактичным. Но с небольшими корректировками цвета он будет хорошо смотреться на белом фоне независимо от макета.

Самая впечатляющая часть заключается в том, что каждый элемент создан с использованием чистого CSS, включая шаблон закругленного круга. Это действительно прагматичная цитата, которая также раздвигает границы CSS.

Шаблоны БК

Для более ручных примеров ознакомьтесь с этими шаблонами цитат, созданными разработчиком Дереком Уилденом.

Это снова основано исключительно на CSS3 с разными классами для каждой цитаты. Последний из 3 имеет элемент нижнего колонтитула для ссылки на источник цитаты. Это необязательная функция, которая нравится некоторым людям, но, конечно, не обязательна для простого веб-сайта.

Это показывает, как многого вы можете достичь с помощью уникальных шрифтов и некоторых незначительных настроек CSS.

Тетрадный лист

В это может быть трудно поверить, но эта блокнотная цитата полностью создана с помощью кода CSS3. Никаких фоновых изображений, никаких векторов, только CSS-градиенты и трансформации.

Я не могу сказать, скольким людям этот дизайн будет полезен. Это фантастическая карточка для заметок, которая действительно повторяет стиль бумаги. Но независимо от того, как его можно использовать, этот дизайн более чем невероятен, и он доказывает, как далеко продвинулся CSS.

HTML полностью соответствует современным блок-кавычкам, и это должно работать во всех современных браузерах. Волшебное использование веб-технологий, если я когда-либо видел его.

Классные цитаты

Иногда имеет смысл включить фотографию цитируемого человека. Это может показаться сложным, но вы можете клонировать эти цитаты Эндрю Райта, чтобы получить такой эффект на своем сайте.

Ручка Эндрю использует заполнители для изображений, поэтому они выглядят немного… просто. Но ничто не мешает вам изменить некоторые цвета, обновить шрифты и добавить фото, чтобы оживить ваши цитаты.

Очень простой дизайн, и его довольно легко изменить самостоятельно.

Простой блок

Это, безусловно, моя любимая цитата, потому что она действительно может работать на любом веб-сайте. Разработчик Харм Путман использует cite атрибут из цитаты, чтобы заполнить цитату внизу.

Мне очень нравятся разделительные полосы, которые четко отделяют цитату от остального контента. Это включает в себя небольшой значок кавычки, закрепленный посередине, чтобы пользователь знал, что это явно цитата.

Изящный, элегантный и простой. Три черты, которые хорошо работают на любом веб-сайте.

Серый блок

Для более мрачного подхода ознакомьтесь с этой серой цитатой, которая при изменении размера может удвоиться как цитата.

Он имеет довольно чистый дизайн с использованием блок-кавычек Font Awesome и живого текста. Я думаю, что это выглядело бы намного лучше с более сильным шрифтом, но это, безусловно, разборчиво с чем угодно, что вы используете.

Я рассматриваю это как прочную «базу» для создания и оформления собственной цитаты.

Автоматические котировки

Этот дизайн Люка Уоттса больше похож на цитату, чем на цитату. Цитируемый текст смещается в сторону от основного текста, но все же привлекает внимание яркими цветами и кавычками.

Это называется автоматической цитатой, потому что она добавляет кавычки в дизайн через CSS. Таким образом, вы можете просто обернуть свой текст соответствующим тегом, и он автоматически стилизует его цитатами. Довольно мило!

Однако в качестве цитаты это было бы довольно просто. Я думаю, что это лучше всего работает в качестве цитаты и хорошо выполняет свою работу.

Поднятая блок-котировка

Вы можете многое сделать с помощью теней CSS, чтобы создать глубину и ясность. Эта рельефная цитата Лукаса Дитриха довольно проста, и ее очень легко клонировать.

Он имеет один фоновый цвет и довольно четкую тень в нижней части. Это также использует специальный шрифт Google под названием Bitter для вертикальных кавычек.

Если у вас более темный макет или вы хотите немного изменить тень, этот стиль цитаты подойдет практически для любого веб-проекта.

Чередующиеся цитаты

Эти чередующиеся цитаты Томми Ходжинса доказывают, что для создания фантастических блок-кавычек многого не нужно.

Добавляя небольшую серую рамку с одной стороны, вы отделяете текст от остальной части страницы. Он будет четко выделяться на фоне тела страницы, что значительно упрощает просмотр любой страницы.

Кроме того, чередующиеся стили позволяют добавлять их в любой понравившейся вам ориентации.

Цитата о материальном дизайне

И последнее, но не менее важное: я нашел эту крутую цитату из материала, в которой используются похожие цвета и стили из правил материального дизайна Google.

Фоновая иконка — это то, что действительно выделяет это и делает его похожим на настоящую цитату. Я думаю, что цвет шрифта немного светлее, но его всегда можно настроить для использования на вашем собственном веб-сайте.

Это самая крутая цитата в стиле материала, которую вы найдете, и она абсолютно бесплатна.

Все эти стили блок-цитата великолепны, но, конечно, не единственные. Вы можете найти много других онлайн с большим разнообразием на выбор. Поэтому, если вы хотите просмотреть больше, проверьте тег blockquote на CodePen, чтобы узнать, что еще там есть.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 простых фрагментов CSS для создания красивых цитат

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 10 простых фрагментов CSS для создания красивых цитат

Название: 10 простых фрагментов CSS для создания красивых цитат . Краткое описание: [ad_1] ⭐ Зачем изобретать элементы дизайна колес, к . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»