Лента 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

<div>
    <div>
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Об авторе</a></li>
            <li><a href="#">Работы</a></li>
        </ul>
    </div>
 
    <div>
        <div><h3>3D CSS лента</h3></div>
        <div></div>
        <div></div>
        <div>
            <h3>Заголовок</h3>
            <p>Основной текст</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

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 h3 {
    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 h3 {
    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

Лента статей и уроков по HTML и CSS

Александр

25.01.2020, 00:41

Решил использовать этот плагин lazysizes с ним всё работает отлично. Спасибо!

Саша

24.01.2020, 21:58

Здравствуйте, помогите пожалуйста, почему-то перестала работать форма обратной связи, но недавно все работало хорошо. Код вызова сниппета в AjaxForm почему-то…

Александр

24.01.2020, 18:14

Спасибо!

Александр Мальцев

23.01.2020, 16:39

Привет! Эти изменения можно осуществить правкой js файла этого компонента. Например, для того чтобы сделать кнопку «Загрузить ещё» видимой и недоступной…

Егор

23.01.2020, 15:37

Спасибо. Это и нужно.На wordpress делал повторитель в админке, только для одного аккордеона примерно так на PHP: $acoord_id = 0; Ну а в цикле: $acoord_id++; #collapse_<?php…

Александр Мальцев

23.01.2020, 14:15

Здравствуйте! Библиотеку, приведённую выше для добавления к карусели свайпа лучше не использовать. Она не очень удачная. Если вам нужно добавить свайп…

Александр

21.01.2020, 18:41

Оказывается всё на много проще, чем я думал. Спасибо Вам!

Александр Мальцев

21.01.2020, 13:52

Здравствуйте! Проверьте наличие чанков и id ресурсов, которые вы используете в конструкциях вызова сниппетов.

Александр Мальцев

21.01.2020, 13:44

Почти правильно. Это достаточно установить в 2 местах: — в process.php — в любом месте после подключения файла process-forms.js: var form1 = new…

Александр Мальцев

21.01.2020, 12:43

Здравствуйте! Да, так отлично! Будет прокрутка до указанного элемента с длительностью этого процесса в 1000 миллисекунд.

CSS3 Лента — Поснов Андрей

Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h3>.

<h3>My Heading</h3>

Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.

/* элемент с контентом */
#page {
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #333;
}
h3 {
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 30px 10px 10px -71px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используемposition: relative чтобы при необходимости можно было позиционировать другие элементы ленты.

Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.

h3:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before.

Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.

h3:before {
	content: ' ';
	position: absolute;
	width: 30px;
	height: 0;
	left: -30px;
	top: 12px;
	border-width: 20px 10px;
	border-style: solid;
	border-color: #999 #999 #999 transparent;
}

Цвет границы у псевдоэлемента должен совпадать с цветом фона h3, поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.

CSS3 Лента