» »

Стиль оформления цитаты с картинкой


Стиль оформления цитаты с картинкой

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

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

Как всегда рассмотрим, как реально будет.

Красивый стиль оформление цитаты

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

Первым делом идем в админ панель в CSS:

Код
blockquote {  
  background-image:url(http://zornet.ru/zorner_ru_1/Veb/87d1a569e41e4471b4bf4611725a360e.jpg);  
  font-size: 14px;  
  color: #fff;  
  border: 2px dotted #26dbfe;  
  padding: 35px;  
  margin:1em 20px;  
  border-radius: 10px;  
  -o-border-radius: 10px;  
  -moz-border-radius: 10px;  
  -webkit-border-radius: 10px;  
}

Чтоб поставить, то вам нужно описание разместить в blockquote, как пример, смотрим ниже.

Код
<blockquote> Здесь ваше описание на фоне, что будет </blockquote>

Если вы решили поставить на модуле форум, то все также, только blockquote уже вписываем на BB коды.
Что по изображению, то можно ставить тематическое и с узорами, главное, чтоб читабельно было.
14.05.2017 Просмотров: 294 Комментарий: (7)

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

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

Комментарий: 7
tsakonter
tsakonter 15.05.2017 00:061
0
Вот такой вид цитаты, можно обыграть и сделать уникальным.
Kosten
Kosten 15.05.2017 03:025
0
По идее, можно любую цитату обыграть, так как она на стилях создана.
Марковичь
Марковичь 15.05.2017 00:102
0
Здесь соглашусь, можно светлый фон поставить, а шрифт темный. Но лучше найти такое изображение, чтоб оно по сторонам только появлялось.
Kosten
Kosten 15.05.2017 03:036
0
Там было изображение изначально, но не понравилось, первое, что нашел в сети, чтоб под светлые знаки.
tsakonter
tsakonter 15.05.2017 02:043
0
Поставил, так нормально, только текст к центру сделан близко.
Kosten
Kosten 15.05.2017 03:047
0
Все можно отрегулировать, все делается в стилях, и подогнать в самим стенкам автоматически меньше делать, там просто уже установлено, так что сами смотрим, стили не такие большие. Если не понятно, то отписать можно и настроим.
ucozmental
ucozmental 15.05.2017 02:194
0
Сам стиль предварительно не чем не отличается от других, но вот с идеей смены изображение, точнее фона, больше нравится.
avatar