[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » О uCoz » Скрипты » Красивый блок на чистом CSS3
Красивый блок на чистом CSS3
Дата: Пятница, 04.04.2014, 13:04:03 | Сообщение # 1
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

Блоки на вашем сайте. Вы думаете, как бы сделать их интересными и необычными, вообще не такими, как у всех. Что-нибудь новенькое для блоков. И сегодня оно у вас будет, если конечно, понравится и захотите забрать себе, а мне почему-то кажется, что захотите. Тогда барабанная дробь...и я представляю вам необычные, стильные и удивительные блоки для вашего сайта, написанные на CSS3.

Смотрим тест на фидле. И теперь приступаем не посредственно к установки

С начала пропишем CSS стиль нашего блока:
Код
.box1{  
width: 300px;  
margin: 40px;  
min-height: 200px;  
position:relative;  
display: inline-block;  
background:#fff;  
background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));  
background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);  
border: 1px solid #ccc;  
-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;  
-moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;  
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;  
-webkit-border-bottom-right-radius: 6px 50px;
-moz-border-radius-bottomright: 6px 50px;  
border-bottom-right-radius:6px 50px;  
}  

.box1:before{  
content: '';  
width: 50px;  
height: 100px;  
position:absolute;  
bottom:0; right:0;  
-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);  
-moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);  
box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);  
z-index:-1;  
-webkit-transform: translate(-35px,-40px)  
skew(0deg,30deg)  
rotate(-25deg);  
-moz-transform: translate(-35px,-40px)  
skew(0deg,32deg)  
rotate(-25deg);  
-o-transform: translate(-35px,-40px)  
skew(0deg,32deg)  
rotate(-25deg);
}  

.box1:after{  
content: '';  
width: 100px;  
height: 100px;  
top:0; left:0;  
position:absolute;  
display: inline-block;  
z-index:-1;  
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);  
-moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);  
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);  
-webkit-transform: rotate(2deg)  
translate(20px,25px)  
skew(20deg);  
-moz-transform: rotate(7deg)  
translate(20px,25px)  
skew(20deg);  
-o-transform: rotate(7deg)  
translate(20px,25px)  
skew(20deg);
transform: rotate(7deg)  
translate(20px,25px)  
skew(20deg);
}


И теперь осталось только вывести наш блок:
Код
<div class="box1">  
<h2>Название блока</h2>  
<p>
Информация  
</p>  
</div>


Всё, наш красивый, стильный, а что самое главное лёгкий блок, установлен!
Как видите я использовал всего один див с классом, что весьма и весьма экономит место в шаблоне

Материал подготовил: Andrey
Прикрепления: 3756303.png(5.3 Kb)
Форум » О uCoz » Скрипты » Красивый блок на чистом CSS3
  • Страница 1 из 1
  • 1
Поиск: