Сейчас: 30.11.2024, 06:27RSS
  • Страница 1 из 1
  • 1
Модератор форума: unLim  
Повернутый блок с тенью

Дата: Воскресенье, 01.05.2011, 12:38 | Сообщение # 1

So[L]ona[L]







         Сообщений: 273
         Репутация: 13
         Статус: Оффлайн

Скрин - http://imagepost.ru/images/b/lo/block_2.png

сам блок:

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;
}
 
  • Страница 1 из 1
  • 1
Поиск: