» »

Светлый образец цитаты с примерами CSS

Светлый образец цитаты с примерами CSS

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

Чтоб понятно было по устройству, за пунктир отвечает dashed в стиле, если он кого то не устраивает, и хочет сделать сплошную полосу, то поменяйте его на solid, что измениться сразу. Есть еще примеры это dotted - где будет точками и double - отвечает за двойную. Как понимаете, что можно кардинально изменить, главное чтоб под дизайн интернет ресурса подходило.

Светлая цитата с желтым оттенком на сайт

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

Код
<blockquote> Здесь ваш контент </blockquote>

CSS:

Код
blockquote {  
  width: auto;  
  margin: 0.28em 0;  
  padding: 0.85em 40px;  
  font-size: 16px;  
  font-family: Georgia, serif;  
  font-style: italic;  
  line-height: 1.45;  
  color: #734607;  
  border-left: 3px dashed #966016;  
  border-radius: 3px;  
  -o-border-radius: 3px;  
  -moz-border-radius: 3px;  
  -webkit-border-radius: 3px;  
  background-color: #f3dbbb;  
}

Где прописано auto, здесь можно выставить на пиксели, как пример замены 754px, как сами посчитаете нужным.
12.05.2017 Просмотров: 344 Комментарий: (7)

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

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

Комментарий: 7
Сопрано
Сопрано 12.05.2017 23:231
0
Можно создать одну тему и туда все цитаты поместить.
tsakonter
tsakonter 12.05.2017 23:312
0
А для чего все в кучу пихать. можно только представить, сколько этих цитат, так в описание ссылки ставить и для ранжирование нормально пойдет.
Kosten
Kosten 12.05.2017 23:353
0
Можно всем скопом, но предпочитаю по отдельности размещать материал.
Сафрон
Сафрон 13.05.2017 11:334
0
Здесь отличие, что шрифт немного больше стандартного, так нужно на всех сделать.
Kosten
Kosten 13.05.2017 12:137
0
Это его еще уменьшил, он явно больше был.
Марковичь
Марковичь 13.05.2017 11:515
0
Эти пунктиры вообще убрать, намного приятнее вид станет, или сделать полной полосой, и закругление здесь не нужно.
Kosten
Kosten 13.05.2017 12:136
0
Так нужно читать все что написано, а не мереть по одному изображению, так классы прописаны под штрих или полную полосу.
avatar