» »

Цитата для сайта в стиле алых стрелок


Цитата для сайта в стиле алых стрелок

Оригинально по своему стили создана цитата, где нет не каких обводов, а только стрелки по правую и левую сторону, как вверх и в низ. Также можно сделать подпись, так как нет не каких обводов и все будет смотреться по этому поводу корректно. Больше, такой вид подойдет на светлый фон, на нем он более ярче видеться и воспринимается визуально.

Стрелки сами в красном оттенке, но это можно сказать стандартный вид обозрение у них, но все же на стилях, где можно изменить цветовую гамму, и подогнать под свой ресурс, чтоб отлично вписалось. По умолчанию ширина выставлена 427px, что можете прибавить или отнять, и есть другая возможность.поставить auto, что автоматом, установка происходит на всю ширину.

Приступаем к установке:

Нужно описание или текст поставить в blockquote, чтоб появилась рамка такая.

Как пример

Код
<blockquote>
  <p>На сайте ZORNET.RU найдете скрипты и стили для создание нового сайта, также есть форум, где можете задать вопрос и вам на его ответят, на счет помощи, здесь как повезет</p>
  <p>Админ: Kosten</p>
  </blockquote>


Остается прописать стиль в CSS:

Код
blockquote {
  position: relative;
  width: 427px;
}

blockquote::before,
blockquote::after {
  display: block;
  color: #8A0000;
  font-size: 50px;
  position: absolute;
}

blockquote::before {
  content: "\00AB";
  left: -25px;
  top: -20px ;
}

blockquote::after {
  bottom: -16px;
  content: "\00BB";
  right: -25px;
}

p {
  padding-left: 22px;
}

Если у вас создал файл и в нем размещены стили, то этот также можно закинуть в него.
13.05.2017 Просмотров: 304 Комментарий: (3)

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

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

Комментарий: 3
Сафрон
Сафрон 13.05.2017 11:311
0
Эта цитата больше на блог подойдет, где пишут свое и оригинально, что можно подпись сделать.
Марковичь
Марковичь 13.05.2017 11:492
0
Такой дизайн под код сделать, цитат много, а коды чтоб размещать, все одинаковы.
csafrones
csafrones 13.05.2017 12:063
0
Так под коды идёт то же на стилях, что можно с правой стороны стенку оставить а остальное на фон страницы сделать по цвету. И получится, что только по аравуё сторону будет дизайн.
avatar