HTML и CSS 1

Как делать в css оформление цитат?

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

Конечно, рассмотрим только общие стилевые правила, потому что в каждом случае это должно быть уникальное оформление. Например, у меня выглядит так:

Это какая-нибудь красивая цитата известного (или не очень) человека.

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

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

Итак, рамка делается свойством border. Первый параметр отвечает за толщину линии, второй — за тип, третий — за цвет. Пример:

border: 5px solid #ccc;

Цвет, как вы понимаете, можно написать в любом формате. В итоге получим пятипиксельную сплошную рамку (solid — это сплошной) серого цвета. Чтобы оформлять все цитаты на странице используют селектор blockquote, именно в этот тег заключают большие цитаты.

Что еще мы видим в оформлении? Во-первых, это цвет фона, отличный от фонового цвета страницы. Это задается с помощью свойства background-color, тут никаких откровений нет. Во-вторых, серые рамки со всех сторон, кроме левой. Этого можно легко добиться так:

border: общие стили для всех сторон;
border-left: ...;

Кроме этого, используются внутренние и внешние отступы (padding и margin), но это совсем базовые свойства css, они используются практически везде. Ну а что у нас самое интересное в этом оформлении? Это, конечно же, картинка снизу, которая создает иллюзия, будто блок немного приподнят.

Да-да, это именно картинка, хотя на css3 такое можно сделать и чисто тенями. Но в данном случае речь идет о такой картинке:blocks

Самому блоку с цитатой задается относительное позиционирование (position: relative). Это никак не влияет на его положение, зато позволяет внутри него позиционировать элементы абсолютно, прописывая им нужные координаты, что и сделано для нашей картинки. В частности, был создан псевдоэлемент before и с помощью абсолютного позиционирования его пододвинули так, чтобы добиться нужного внешнего вида. О псевдоэлементах вы можете прочитать здесь, а о позиционировании — тут.

В общем, свойств при оформлении цитат может применяться достаточно много, тут я не буду перечислять все остальные. Если вы хорошо знаете css, то вас ограничивает лишь ваша фантазия, либо фантазия дизайнера.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

  • Константин

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

    2016-06-28 в 12:00 | Ответить