ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Оформляем блок цитаты с красной кнопкой

Оформляем блок цитаты с красной кнопкой

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

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

При установке, так будет визуально смотреться.

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

Это в само тело описание ставим и заключаем. что хотим вывести.

Код

<blockquote> Здесь вид с кнопкой и описанием </blockquote>

Остается поставить под материал стили в CSS.

Код

blockquote {
  background-color: #c7dfff;
  color: #393940;
  font-family: arial;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
  text-align:center;
  padding: 15px 38px;
  position: relative;
  width: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.64), 0 0 10px rgba(0, 0, 0, 0.06) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.64), 0 0 10px rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.64), 0 0 10px rgba(0, 0, 0, 0.06) inset;
}

blockquote:before{
position:absolute;
margin-top:-33px;
margin-left:-59px;
content:url('http://zornet.ru/zorner_ru_1/Veb/knopa.png');
}
blockquote:after{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
-webkit-box-shadow: 0 19px 7px #888888;
-moz-box-shadow: 0 19px 7px #737070;
box-shadow: 0 19px 7px #928f8f;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}

По умолчанию на этой цитате стояла ширина в пикселях width: 573px, но выставил width: auto; - так, чтоб автоматически ширина устанавливалось.

13 Мая 2017 Просмотров: 1529 Комментариев: (20)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 20
Порядок вывода комментариев: Сафрон 13 Мая 2017 11:33¹ 0 Вот этот стиль больше понравился, видно что тени есть, а чтоб стильно смотрелось, нужно было вывести их по углам, а по центру оставить как есть. Kosten 13 Мая 2017 12:15⁶ 0 Но есть и другие с кнопками, но там идут немного по другому. просто этот сильно от других отличается. Maryges 13 Мая 2017 11:35² 0 Если по углам делать, то стиль нужно переписывать, да вообще там тени лишнее, если на темный ставить, то только на светлый фон выводить. Kosten 13 Мая 2017 11:40³ 0 Хотел на днях залить, но на тестовом сайте не выводил стиль дизайна, не мог понять, и почему то 2 ссылки было в них. Пока разобрался, а точнее погуглил и на стили и нашел такой же, с одной ссылкой и ровно сразу выставил на материал, только кнопку левее больше сделал. csafrones 13 Мая 2017 12:04⁴ 0 Так получается что идёт на систему каталога файлов или блага, а вот на форум с выводом кнопки, чтоб автоматически бы сделать не как или все же можно. Марковичь 13 Мая 2017 12:10⁵ 0 Это почему, на форуме попробуйте, должно работать на bb кодах. Kosten 13 Мая 2017 12:17⁸ 0 Это точно, но проверял на файлах, думаю на форуме нужно тоже проверить. -SAM- 14 Мая 2017 04:36¹⁷ 0 Нет здесь bb-кода. Чтобы работало у всех групп, нужно подключать скрипт отдельный, например, как на вывод bb-кода таблицы, переписать его, чтобы в посты форума писали, к примеру, [blockquote] содержимое [/blockquote] + стили прописать на класс другой. -SAM- 16 Мая 2017 04:51¹⁹ +1 Чтобы понятно было: к bb-кодам отношения нет никакого, но чтобы была возможность публиковать на форуме всем такого вида блоки, нужно такой bb-код, грубо говоря, самому создать. И в этом нам поможет этот материал (как пример). Kosten 13 Мая 2017 12:16⁷ 0 Нет, не идет он только на файлы, на все модули можно попробовать. Kosten 13 Мая 2017 12:20⁹ 0 На форуме не чего не выводит, возможно у кого подключена визуальная форма добавление, то возможно выведет, а так вот если на кнопках, что получается. JoniDen 13 Мая 2017 13:39¹¹ -1 Конечно не выводит, потому что там другой class. Да и если под данный class, попробовать данную цитату она встанет криво. Kosten 13 Мая 2017 13:56¹² 0 Вообще реально - можно поставить? JoniDen 13 Мая 2017 14:52¹³ 0 Ну я поставил данный скрипт, для проверки, использую другой class. И получилось мягко говоря не очень. Scheme 13 Мая 2017 15:39¹⁴ 0 Но как то же делают на кнопках, это под операторы на администрацию, а здесь для всех пользователей. csafrones 13 Мая 2017 16:18¹⁵ 0 Не очень, как понимать, это криво выводит, так можно поправить, или вообще не работает на форуме и не сделать. -SAM- 14 Мая 2017 04:25¹⁶ 0 А чего же нельзя - включите поддержку html, потом пропишите. Kolinkor 13 Мая 2017 12:42¹⁰ 0 Все нормально, и кнопка по теме установлена, мне какой то сайт напоминает, там очень много кнопок для форума, дизайн как раз под него, но здесь чтоб не похоже не было, так держите кнопки. Замените только ссылки. то могут скоро битыми быть и пропадут кнопки. Kosten 14 Мая 2017 20:06¹⁸ 0 -SAM-, изменил стиль, проверил, все корректно отображается на сайте вид материалов и комментариев к нему. Спасибо!
1 2 »