d1z-zone
Повернутый блок с тенью - D1z-ZoNe.Ru Форум
  • Страница 1 из 1
  • 1
Повернутый блок с тенью
StreloK14Дата: Суббота, 30.04.2011, 09.14 | Сообщение # 1
Группа: Пользователи
Сообщений: 47
Репутация: 1

Код блока (вставить туда, где хотите увидеть блок):

Code
<div class="rotated">   
   <p>Содержимое блока</p>   
   </div>

В CSS, в любое место:

Code
.rotated {   
   position:relative;   
   width:40%;   
   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;   
   -webkit-box-shadow:none;   
   -moz-box-shadow:none;   
   box-shadow:none;   
   -webkit-transform:rotate(-3deg);   
   -moz-transform:rotate(-3deg);   
   -ms-transform:rotate(-3deg);   
   -o-transform:rotate(-3deg);   
   transform:rotate(-3deg);   
   }   

   .rotated > :first-child:before {   
   content:"";   
   position:absolute;   
   z-index:-1;   
   top:0px;   
   bottom:0;   
   left:0;   
   right:0px;   
   background:#fff;   
   -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;   
   }   

   .rotated:before,   
   .rotated: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);   
   }   

   .rotated:after {   
   right:10px;   
   left:auto;   
   -webkit-transform:rotate(3deg);   
   -moz-transform:rotate(3deg);   
   -ms-transform:rotate(3deg);   
   -o-transform:rotate(3deg);   
   transform:rotate(3deg);   
   }   

   .rotated p {   
   font-size:16px;   
   font-weight:bold;   
   }

 
dFaCДата: Суббота, 30.04.2011, 10.36 | Сообщение # 2
Группа: Проверенные
Сообщений: 268
Репутация: 3



 
  • Страница 1 из 1
  • 1
Поиск: