Вредоносное ПО (malware) - это назойливые или опасные программы,...
Перевод: Влад Мержевич
В моей прошлой статье мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.
Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега
.
My Heading
Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.
/* элемент с контентом */ #page { width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; border: 1px solid #333; } h2 { 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 нулевой ширины и высоты.
H2: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 .
Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.
H2: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; }
Цвет границы у псевдоэлемента должен совпадать с цветом фона h2 , поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.
Пожалуйста, ознакомьтесь с демонстрационной страницей где показаны все три стиля ленты. Как и ожидалось, это работает в IE8, IE9, Firefox, Chrome, Safari и Opera. IE6 и IE7 показывают изящную деградацию и отображают основной заголовок. Весь код CSS содержится внутри HTML.
В последнее время, просматривая различные сайты, я вижу тенденцию дизайнеров к переходу на использование трехмерности. Таким образом раскрывается “глубина” сайта, эти тени, вдавленность текста, иконок, кнопок — все это делает сайт живущим в трех измерениях. Но красота, как известно, требует жертв. Делаем тень блоку
— нужен формат PNG, делаем вдавленные буквы
в логотипе — готовимся к совершенно нескромному весу картинки с изображением. В некоторых случаях помогает CSS3, который умеет очень многое, при наличии прямых рук
Сегодня сделаем наши руки немного более прямыми. Я расскажу о том, как сделать 3D ленту(это такая модная нынче у веб-дизайнеров штуковина) с помощью CSS. Никаких картинок, только код.
В итоге у нас должно получиться что-то вроде этого:
Создадим стандартный HTML документ:
сайт
В секции 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 ленточку, которую можно будет применить, например, при оформлении записей на своём сайте или чтобы выделить какой-то заголовок, а также для многого другого.
Пример ленточки можно увидеть здесь:
Скачать
HTML часть — 3D CSS ленточка
Для этого нам понадобится основной блок Блока с идентификатором container
сделаем по центру c отступом сверху в 50 пикселей(px) и ширина блока будет 400 пикселей(px): И сейчас разберемся с блоком который с ленточкой. Там есть пустые блоки(с классами triangle-l
и triangle-r
), эти блоки будут выглядеть как маленькие треугольники и создавать объем нашей ленточке: И добавим отступы для текста внутри блока с ленточкой, который имеет класс info
: А для меню, которое сверху блока(и оно немного повернуто) присвоим следующие свойства: Мне всегда нравились элементы, с помощью которых можно создать эффект объема на странице. Это привлекает внимание и приятно смотрится. Но данное меню будет не совсем правильно отображаться в IE и Opera. Но браузеры совершенствуются с каждым днем и скоро они все будут поддерживать данный эффект.
с идентификатором container
, где будет находиться меню и блок с ленточкой:
CSS часть
1
2
3
4
div#container
{
margin
:
50px
auto
0px
auto
;
width
:
400px
;
}
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
;
}
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
)
;
}
Вывод
Рекомендуем почитать
Лучшие программы для восстановления данных с любых носителей информации....
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
