3d css стрічка

Зараз практично на будь-якому сайті можна знайти елемент, який створює ефект обсягу. Він дуже цікаво виглядає і привертає погляд. І в цій статті я розповім як створити 3D стрічку, яку можна буде застосувати, наприклад, при оформленні записів на своєму сайті або щоб виділити якийсь заголовок, а також для багато чого іншого.

Приклад стрічки можна побачити тут:

Подивитися прімерСкачать

HTML частина - 3D CSS стрічечка

Для цього нам знадобиться основний блок з ідентифікатором container, де буде знаходитися меню і блок з стрічкою:

123456789101112131415161718192021

lt;div id="Container"gt;lt;div class="Menu"gt;lt;ulgt;lt;li class="L1"gt; lt;a href="#"gt; Головнаlt;/agt; lt;/ligt;lt;li class="L2"gt; lt;a href="#"gt; Про автораlt;/agt; lt;/ligt;lt;li class="L3"gt; lt;a href="#"gt; Роботиlt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt;lt;div class="Bubble"gt;lt;div class="Rectangle"gt; lt;h2gt; 3D CSS стрічкаlt;/h2gt; lt;/divgt;lt;div class="Triangle-l"gt; lt;/divgt;lt;div class="Triangle-r"gt; lt;/divgt;lt;div class="Info"gt;lt;h2gt; Lorem ipsum dolor sit amet!lt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia arcu id tincidunt rutrum. Etiam sagittis urna ineros consectetur, et fermentum magna bibendum.lt;/pgt;lt;pgt; Phasellus id convallis velit, sed pellentesque turpis. Ut eu leo lectus. Cras a dui eu erat condimentum mattis sed vitae mi.lt;/pgt;lt;/divgt;lt;/divgt;lt;/divgt;

CSS частина

Блоку з ідентифікатором container зробимо по центру c відступом зверху в 50 пікселів (px) і ширина блоку буде 400 пікселів (px):

Відео: 3D-transform на прикладі перевороту блоку

1234	div#container {margin: 50px auto 0px auto-width: 400px-}

І зараз розберемося з блоком який з стрічкою. Там є порожні блоки (з класами triangle-l і triangle-r), Ці блоки будуть виглядати як маленькі трикутники і створювати обсяг нашої стрічці:

Відео: Стрічки і не тільки на чистому CSS - одкровення

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960

.bubble {clear: both-margin: 0px auto-width: 350px-background: #fff--moz-border-radius: 10px--khtml-border-radius: 10px--webkit-border-radius: 10px--moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3)--khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3)--webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3)-position: relative-z-index: 90-}.rectangle {background: # 7f9db9-height: 50px-width: 380px-position: relative-left:-15px-top: 30px-float: left--moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55)--khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55)--webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55)-z-index: 100-}.rectangle h2 {font-size: 30px-color: #fff-padding-top: 6px-text-shadow: 1px 1px 2px rgba(0,0,0,0.2)-text-align: center-}.triangle-l {border-color: transparent # 7d90a3 transparent transparent-border-style:solid-border-width:15px-height:0px-width:0px-position: relative-left: -30px-top: 65px-z-index: -1-}.triangle-r {border-color: transparent transparent transparent # 7d90a3-border-style:solid-border-width:15px-height:0px-width:0px-position: relative-left: 350px-top: 35px-z-index: -1-}

І додамо відступи для тексту всередині блоку з стрічкою, який має клас info:

Відео: 3D CSS cube rotated with Arduino controller

12345678910111213

.info {padding: 60px 25px 35px 25px-}.info h2 {font-size: 20px-}.info p {padding-top: 10px-font-size: 14px-line-height: 22px-}

А для меню, що зверху блоку (і воно трохи повернуто) призначимо наступні властивості:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

.menu {position: relative-top:3px-left: 50px-z-index: 80-}.menu ul li {-webkit-transform: rotate(-45deg)- / * Тут ми і повертаємо пункти меню * /-moz-transform: rotate(-45deg)- / * Тут ми і повертаємо пункти меню * /width: 50px-overflow: hidden-margin: 10px 0px-padding: 5px 5px 5px 18px-float: left-background: # 7f9db9-text-align: right-}.menu ul li a {color: #fff-text-decoration: none-display:block-}.menu ul li.l1 {background: rgba(131,178,51,0.65)-}.menu ul li.l1: hover {background: rgb(131,178,51)-}.menu ul li.l2 {background: rgba(196,89,30,0.65)-}.menu ul li.l2: hover {background: rgb(196,89,30)-}.menu ul li.l3 {background: rgba(65,117,160,0.65)-}.menu ul li.l3: hover {background: rgb(65,117,160)-}

Відео: 3D Transforms Overview

висновок

Мені завжди подобалися елементи, за допомогою яких можна створити ефект обсягу на сторінці. Це привертає увагу і приємно виглядає. Але дане меню буде не дуже правильно відображатися в IE і Opera. Але браузери удосконалюються з кожним днем і скоро вони всі будуть підтримувати даний ефект.

Успіхів!

джерело: pvmgarage.com

Поділися в соц мережах: