Лого www.SiteHere.ru

3D CSS ленточка

3D CSS ленточка

Сейчас практически на любом сайте можно найти элемент, который создает эффект объема. Он очень интересно смотрится и привлекает взгляд. И в этой статье я расскажу как создать 3D ленточку, которую можно будет применить, например, при оформлении записей на своём сайте или чтобы выделить какой-то заголовок, а также для многого другого.

Пример ленточки можно увидеть здесь:

Посмотреть примерСкачать

HTML часть — 3D CSS ленточка

Для этого нам понадобится основной блок <div> с идентификатором container, где будет находиться меню и блок с ленточкой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="container">
    <div class="menu">
        <ul>
            <li class="l1"><a href="#">Главная</a></li>
            <li class="l2"><a href="#">Об авторе</a></li>
            <li class="l3"><a href="#">Работы</a></li>
        </ul>
    </div>
 
    <div class="bubble">
        <div class="rectangle"><h2>3D CSS лента</h2></div>
        <div class="triangle-l"></div>
        <div class="triangle-r"></div>
        <div class="info">
            <h2>Lorem ipsum dolor sit amet!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia arcu id tincidunt rutrum. Etiam sagittis urna in 
               eros consectetur, et fermentum magna bibendum.</p>
            <p>Phasellus id convallis velit, sed pellentesque turpis. Ut eu leo lectus. Cras a dui eu erat condimentum mattis sed vitae mi.</p>
        </div>
    </div>
</div>

CSS часть

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

1
2
3
4
div#container {
    margin: 50px auto 0px auto;
    width: 400px;
}

И сейчас разберемся с блоком который с ленточкой. Там есть пустые блоки(с классами triangle-l и triangle-r), эти блоки будут выглядеть как маленькие треугольники и создавать объем нашей ленточке:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.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:

1
2
3
4
5
6
7
8
9
10
11
12
13
.info {
    padding: 60px 25px 35px 25px;
}
 
.info h2 {
    font-size: 20px;
}
 
.info p {
    padding-top: 10px;
    font-size: 14px;
    line-height: 22px;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.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);
}

Вывод

Мне всегда нравились элементы, с помощью которых можно создать эффект объема на странице. Это привлекает внимание и приятно смотрится. Но данное меню будет не совсем правильно отображаться в IE и Opera. Но браузеры совершенствуются с каждым днем и скоро они все будут поддерживать данный эффект.

Успехов!

Источник: pvmgarage.com

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *