3D лента на чистом CSS

23.04.2011

В последнее время, просматривая различные сайты, я вижу тенденцию дизайнеров к переходу на использование трехмерности. Таким образом раскрывается “глубина” сайта, эти тени, вдавленность текста, иконок, кнопок — все это делает сайт живущим в трех измерениях. Но красота, как известно, требует жертв. Делаем тень блоку — нужен формат PNG, делаем вдавленные буквы в логотипе — готовимся к совершенно нескромному весу картинки с изображением. В некоторых случаях помогает CSS3, который умеет очень многое, при наличии прямых рук

Сегодня сделаем наши руки немного более прямыми. Я расскажу о том, как сделать 3D ленту(это такая модная нынче у веб-дизайнеров штуковина) с помощью CSS. Никаких картинок, только код.

Поехали!

В итоге у нас должно получиться что-то вроде этого:

Создадим стандартный HTML документ:

<div class="wrapper">
<div class="ribbon-wrapper">
<div class="ribbon-front">
<div class="front-text">gering111.com</div>
</div>
<div class="ribbon-edge-topleft"></div>
<div class="ribbon-edge-topright"></div>
<div class="ribbon-edge-bottomleft"></div>
<div class="ribbon-edge-bottomright"></div>
<div class="ribbon-back-left"></div>
<div class="ribbon-back-right"></div>
</div>
</div>

В секции HEAD подключаем файл стилей. В секции BODY создаем класс .wrapper, своего рода “обертка” для содержимого, чтобы блокам внутри него было к чему привязываться. Дальше идет .ribbon-wrapper, тоже самое для нашей ленты. Ниже собственно формируем саму ленту.

Код HTML не так интересен, как CSS, скажу только что вся лента состоит из верхней части, 4-х уголков (тени) и двух задних частей фигуры. Соответственно, объявляем 7 блоков, которые и будем форматировать.

body {
background-color: #2574b0
}
.wrapper {
position:relative;
margin:200px
}
.ribbon-wrapper{
position: relative;
width:600px
}
.ribbon-front{
background-color: #393939;
height: 100px;
width: 360px;
position: relative;
left:-30px;
z-index: 2
}
.front-text{
text-align:center;
padding-top:30px;
font:30px Georgia;
color:#999
}
.ribbon-front,.ribbon-back-left,.ribbon-back-right{
-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);
-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55)
}

Думаю из кода выше все ясно? Используем селектор z-index для поднятия верхнего блока фигуры над всеми остальными (если вкратце, чем больше у блока этот самый индекс, тем выше он находится в слое, независимо от места его объявления. Если индекс не указывается, приоритет блоков соответствует месту объявления, то есть ранее объявленный блок будет НИЖЕ более поздних ). Селектор -box-shadow задает блоку тень. Вместо параметра цвета указываем  селектор rgba, тот же цвет в HEX формате, но с добавлением четвертого параметра — прозрачности.

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
position: absolute;
z-index:1;
border-style:solid;
height:0px;
width:0px
}
.ribbon-edge-topleft,
.ribbon-edge-topright {
}
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
top:100px
}
.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
left: -30px;
border-color:transparent #000000 transparent transparent
}
.ribbon-edge-topleft {
top: -10px;
border-width:10px 20px 0 0
}
.ribbon-edge-bottomleft {
border-width: 0 20px 0px 0
}
.ribbon-edge-topright,
.ribbon-edge-bottomright {
left: 310px;
border-color:transparent transparent transparent #000000;
}
.ribbon-edge-topright {
top: -10px;
border-width: 10px 0 0 20px
}
.ribbon-edge-bottomright {
border-width: 0 0 0px 20px
}
.ribbon-back-left {
position:absolute;
top: -10px;
left: -110px;
width: 100px;
height: 100px;
background-color:#393939;
z-index:0
}
.ribbon-back-right {
position:absolute;
top: -10px;
right: 188px;
width: 100px;
height: 100px;
background-color:#393939;
z-index:0
}

Оставшаяся часть кода CSS — позиционирование блоков относительно друг друга. Ничего сверхъестественного. Обратите внимание на z-index у блоков .ribbon-back-left и .ribbon-back-right, его значение 0, меньше, чем у верхнего блока, поэтому в потоке они идут под верхним, как нам и необходимо.

На этом на сегодня все, можно скачать примеры кода, чтобы не «париться» самому Или посмотреть пример 3D ленты.

,

Комментариев: 3

  1. GerinG

    Я пожалуй задумаюсь над этим. Так действительно будет лучше

    Ответить
  2. sioburn

    Виктор, а почему бы вам не писать комментарии прямо в коде без картинок и страшных серых стрелок на картинках?

    Ответить