Лента для оформления сайта с использованием только CSS
Оформление лентами различных сайтов является популярным трендом при оформлении веб сайтов. Такой элемент дизайна можно использовать для меню, фона, заголовков и других частей. Для простых лент вполне можно использовать CSS, чтобы уменьшить количество загружаемых в бразуер пользователя изображений.
Лентаочка на CSS
Для построения такой ленты используется трюк формирования треугольников - на концах ленты и тени на сгибах.
Полный код со стилями CSS и необходимой разметкой HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ленточка на CSS | Материалы сайта RUSELLER.COM</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#main {
border: 1px solid #fff;
padding: 100px;
}
#menu {
background: #c66969;
width: 500px;
height: 50px;
color: #fff;
font-size: 18px;
text-align: center;
position: relative;
top: -20px;
}
#menu span {
position: relative;
top: 13px;
}
.cont {
background: #b14444;
width: 100px;
height: 50px;
}
.edge-right {
border-color: #b14444 white #b14444 #b14444;
border-style:solid;
border-width:25px;
width:0;
height:0;
position: relative;
}
.edge-left {
border-color: #b14444 #b14444 #b14444 white;
border-style:solid;
border-width:25px;
width:0;
height:0;
position: relative;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.edge-right-small {
position: absolute;
top: 138px;
left: 734px;
border-color: #fff #fff #b14444 #873434;
border-style:solid;
border-width:0 0 21px 25px ;
width:0;
height:0;
}
.edge-left-small {
position: absolute;
top: 138px;
left: 258px;
border-color: #b14444 #873434 #b14444 red;
border-style:solid;
border-width:0 25px 21px 0;
width:0;
height:0;
}
</style>
</head>
<body>
<div id="main">
<div class="edge-left left"></div>
<div class="cont left"></div>
<div id="menu" class="left"><span>Материалы сайта RUSELLER.COM<span></div>
<div class="cont left"></div>
<div class="edge-right left"></div>
<div class="clear"></div>
</div>
<div class="edge-right-small"></div>
<div class="edge-left-small"></div>
</body>
</html>
Комментарии:
Нету комментариев для вывода...