[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Лист для текста с эффектом отгибания для ucoz
offtop
Дата: Воскресенье, 19.05.2013, 07:04 | Сообщение # 1
Оффлайн
Пользователи
Сообщений: 216
IP: Скрытная информация


Лист может содержать не только текст но и любые другие элементы.Можно изменить всю цветовую компоновку и размеры воспользовавшись комментариями в программном коде примера.В работе элемента применяются свойства CSS3

Данный блок примените там, где вам это будет необходимо:

Код
<div id="listeffect">  
  <strong>Лист для текста с эффектом отгибания</strong>  
  <p>Разумеется что можно применить не только к тексту</p>  
  </div>  
  <style>  
  #listeffect {  
  position: relative;  
  /* - Ширина листа - */  
  width: 90%;  
  /* - Цвет фона - */  
  background: #ddd;  
  /* - Округлость краёв - */  
  -o-border-radius: 4px;  
  -ms-border-radius: 4px;  
  border-radius: 4px;  
  /* - Внутренние отступы - */  
  padding: 2em 1.5em;  
  /* - Цвет текста - */  
  color: rgba(0,0,0, .8);  
  /* - Тени текста - */  
  -ms-text-shadow: 0 1px 0 #fff;  
  -o-text-shadow: 0 1px 0 #fff;  
  text-shadow: 0 1px 0 #fff;  
  /* - Расстояние между строками - */  
  line-height: 1.5;  
  /* - Внешние отступы = 20px с верху и с низу - */  
  margin: 20px auto;  
  }  
  /* - Изменить угол отгиба,менять угол значениями (-3deg) и (3deg) - */  
  #listeffect:before, #listeffect:after {  
  z-index: -1;  
  position: absolute;  
  content: "";  
  bottom: 15px;  
  left: 10px;  
  width: 50%;  
  top: 80%;  
  max-width:300px;  
  background: rgba(0, 0, 0, 0.7);  
  -o-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);  
  -ms-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);  
  -o-transform: rotate(-3deg);  
  -ms-transform: rotate(-3deg);  
  transform: rotate(-3deg);  
  }  
  #listeffect:after {  
  -webkit-transform: rotate(3deg);  
  -moz-transform: rotate(3deg);  
  -o-transform: rotate(3deg);  
  -ms-transform: rotate(3deg);  
  transform: rotate(3deg);  
  right: 10px;  
  left: auto;  
  }  
  </style>


.
Прикрепления: 3359293.png (12.9 Kb)
  • Страница 1 из 1
  • 1
Поиск: