[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Блоки с загнутыми углами
CEZARДата: Понедельник, 06.06.2011, 12:56 | Сообщение # 1
Генерал-майор
Группа: Проверенные
Сообщений: 460
Награды: 1
Репутация: 17
Статус: Offline
блок, который будем закруглять:

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


css код:
Code
.curled {  
  position:relative;  
  width:40%;  
  padding:1em;  
  margin:2em 10px 4em;  
  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;  
  border:1px solid #efefef;  
  -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;  
  border-radius:0 0 120px 120px / 0 0 6px 6px;  
  }  

  .curled:before,  
  .curled:after {  
  content:"";  
  position:absolute;  
  z-index:-2;  
  bottom:12px;  
  left:10px;  
  width:50%;  
  height:55%;  
  max-width:200px;  
  -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);  
  -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);  
  box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);  
  -webkit-transform:skew(-8deg) rotate(-3deg);  
  -moz-transform:skew(-8deg) rotate(-3deg);  
  -ms-transform:skew(-8deg) rotate(-3deg);  
  -o-transform:skew(-8deg) rotate(-3deg);  
  transform:skew(-8deg) rotate(-3deg);  
  }  

  .curled:after {  
  right:10px;  
  left:auto;  
  -webkit-transform:skew(8deg) rotate(3deg);  
  -moz-transform:skew(8deg) rotate(3deg);  
  -ms-transform:skew(8deg) rotate(3deg);  
  -o-transform:skew(8deg) rotate(3deg);  
  transform:skew(8deg) rotate(3deg);  
  }  
  .curled p {  
  font-size:16px;  
  font-weight:bold;  
  }
 
  • Страница 1 из 1
  • 1
Поиск:

Copyright life-ucoz.my1.ri ©Life-uCoz.my1.ru
Бесплатный конструктор сайтовuCoz