» »

Вывод цитаты blockquote для сайта

Вывод цитаты blockquote для сайта

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

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

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

Для начало ищем, что у нас будет в цитате написано, и по сторонам устанавливаем теги.

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

Подключаем стили, это можно сделать через CSS или под них создать файл, но также делаем на страницу.

Код
blockquote {  
  margin: 3% 0 1% 0;  
  padding: 1% 4%;  
  font-size: 1em;  
  font-style: italic;  
  color: #c1c1c1;  
  border: 1px dashed #484848;  
  border-radius: 2px;  
  -o-border-radius: 2px;  
  -moz-border-radius: 2px;  
  -webkit-border-radius: 2px;  
  background-color: #252525;  
}

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

(rip Бармен) - он же JoniDen
2017-05-12 Просмотров: 726 Комментарий: (5)

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

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

Комментарий: 5
Марковичь
Марковичь 2017-05-12 22:011
0
Больше на оформление текста похоже, но и цитата тоже не чего, на темный, не думаю, что на светлый подойдет, хоть и в стилях сделать.
JoniDen
JoniDen 2017-05-12 22:093
0
Надо я уже устал говорить, я тестирую на темном сайте. И фон у цитаты будет темный, в css можно под себя изменить цвет (не фон).
Kosten
Kosten 2017-05-12 22:052
0
Так и написано, что можно применить как рамку на оформление, но и по своему назначению, виде фитаты на сайте.
Kosten
Kosten 2017-05-13 00:544
0
Если так визуально прикинуть, то и на темном фоне не затеряться.

avatar
ana4220 2018-03-05 02:135
0
Ставим в таблицу стилей (CSS) в самом низу и будет счастье.
/* ==== начало blockquote ==== */
blockquote {
margin: 3% 0 1% 0;
padding: 1% 4%;
color: #c1c1c1;
border: 1px dashed #228B22;
border-radius: 10px;
background-color: #B0E0E6;
}
/* ==== конец blockquote ==== */
avatar