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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

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

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

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

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

border: 5px solid #ccc;

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

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

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

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 1
  1. Константин

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: