Страница 1 из 11
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Красивый вид цитаты <blockquote> с тенями
Красивый вид цитаты <blockquote> с тенями
Kosten
Дата: Воскресенье, 20.08.2017, 22:51 | Сообщение # 1
Администраторы
Сообщений:15268
Награды: 49


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

Смотрим демонстрацию



Установка:

HTML код

Код
<blockquote>
  Вы можете поставить такой вид на комментарий, а точнее на цитаты, что на светлом сайте будет красиво смотреться.
  
  С уважением администратор сайта ZorNet.Ru
</blockquote>


CSS:

Код
blockquote p {
  font-size: 16px;
  font-weight: bold
}

blockquote {
  position: relative;
  width: 85%;
  padding: 1em;
  margin: 2em 10px 4em;
  background: #FFF;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-border-radius: 4px
}

blockquote:before,
blockquote:after {
  content: "";
  position: absolute;
  z-index: -2;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  max-width: 300px;
  -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg)
}

blockquote:after {
  right: 10px;
  left: auto;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg)
}
Прикрепления: 5676535.png(13Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 20.08.2017, 22:53 | Сообщение # 2
Администраторы
Сообщений:15268
Награды: 49


Ранее размещал на файлах и вы можете посмотреть как можно редактировать и что выйдет по дизайн и смотреться визуально.
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Красивый вид цитаты <blockquote> с тенями
Страница 1 из 11
Поиск: