Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.119.137.175
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Повернутый блок с тенью
Сообщение оставлено 29.04.2011 в 17:07:57 | Сообщение #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;  
  }
 
 
   
Сообщение оставлено 29.04.2011 в 17:56:55 | Сообщение #2
Размеры меняются, это лавное спасиб
 
 
   
Сообщение оставлено 30.04.2011 в 02:42:20 | Сообщение #3
biggrin smile
 
 
   
Сообщение оставлено 01.05.2011 в 02:43:39 | Сообщение #4
Ооо спасибо давно искал
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика