ZorNet.Ru — сайт для вебмастера » Графика для сайта » Цитата CSS светлая в кавычках для сайта

Цитата CSS светлая в кавычках для сайта

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

Для того, чтоб она появилась, нужно заключить описание в blockquote:

Код

<blockquote> Здесь как раз и будет любое описание </blockquote>

CSS

Код

blockquote {
  background: #f7f7f7;
  border-left: 1px solid #bbb;
  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;
}

Все, что нам нужно было сделать, и теперь вы можете применять ее на своем портале.

22 Мая 2017 Просмотров: 1449 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 2
Порядок вывода комментариев: Kolinkor 23 Мая 2017 16:05¹ 0 Кавычки какие то не очень выходят. Kosten 23 Мая 2017 16:18² 0 Какие есть, хотя согласен, что другие совершенно по другому смотрелись.