Вы просматриваете материал Лист для текста с эффектом отгибания. Думаю вам понравился материал Лист для текста с эффектом отгибания и вы воспользуетесь им! :)
Автор: Resset Скрипты для ucoz 16.12.2012
Лист для текста с эффектом отгибания
Лист может содержать не только текст но и любые другие элементы.Можно изменить всю цветовую компоновку и размеры воспользовавшись комментариями в программном коде примера.В работе элемента применяются свойства CSS3

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

Code
<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>



Просмотров: 872 Рейтинг: 5.0
Не указан
Всего комментариев: 1
  av11405 | Материал Спам28.01.2013 в 17:28
Добрый день! как можно поместить скрепку сверху листика (путаюсь с позициями)?.... спасибо.
сайт http://sch549.ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]