Бешеный конкурс!
8:00
Автор: Рубрика: CSS-рецепты Один комментарий

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

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

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

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

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

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

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

border: 5px solid #ccc;

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

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

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

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

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

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

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

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

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

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

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

Полный практический курс по HTML5&CSS3

Один комментарий
  • Константин

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

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