» »

Цитата 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.05.2017 Просмотров: 226 Комментарий: (2)

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

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

Комментарий: 2
Brung
Brung 23.05.2017 16:051
0
Кавычки какие то не очень выходят.
Kosten
Kosten 23.05.2017 16:182
0
Какие есть, хотя согласен, что другие совершенно по другому смотрелись.
avatar