Одной из модных тенденцый в веб дизайне на 2012 год, являться использование ленты с помощью CSS. Использования ленты с помощью CSS, стали достаточно популярными ближе к концу 2011 года. В сети появилось множество уроков, как сделать ленты. Ленты можна использовать для главного меню, или для» плашек» в блоках и сайдбарах. Сегодня я покажу как делать красивые ленты с помощью CSS.

Открываейте тренировочный index.html и style.ss который мы создали в уроке № 1 CSS 3 и HTML 5 с нуля, создаем index.html и style.ss

 

как сделать  красивые ленты с помощью CSS

В  style.css закидывайте  приведенный  ниже стиль:

body {color:#fff; background-color:#fff; margin:0; padding:0;}

#container {
border: 1px solid #fff;
padding: 50px;
}
#title {
background: #790202;
width: 500px;
height: 50px;
color: #fff;
font-size: 18px;
text-align: center;
position: relative;
top: -20px;
}
#title span {
position: relative;
top: 13px;
}
.ribbon {
background: #540505;
width: 100px;
height: 50px;
}
.ribbon-right {
border-color: #540505 white #540505 #540505;
border-style:solid;
border-width:25px;
width:0;
height:0;
position: relative;
}
.ribbon-left {
border-color: #540505 #540505 #540505 white;
border-style:solid;
border-width:25px;
width:0;
height:0;
position: relative;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.ribbon-right-below {
position: absolute;
top: 81px;
left: 677px;
border-color: #fff #fff #540505 #a40000;
border-style:solid;
border-width:0 0 20px 24px ;
width:0;
height:0;
}
.ribbon-left-below {
position: absolute;
top: 81px;
left: 201px;
border-color: #540505 #a40000 #540505 #fff;
border-style:solid;
border-width:0 24px 20px 0;
width:0;
height:0;
}

 

 красивые ленты с помощью CSS

В  index.html скопируйте этот код:

<!doctype html> 

<head>
<meta charset="UTF-8">
<title>Уроки от WCDT</title>
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
 <body>
	<div id="container">
<div class="ribbon-left left"></div>
<div class="ribbon left"></div>
<div id="title" class="left">
<span>Как сделать красивые ленты с помощью CSS (Урок №3)</span>
</div>
<div class="ribbon left"></div>
<div class="ribbon-right left"></div>
<div class="clear"></div>
</div>
<div class="ribbon-right-below"></div>
<div class="ribbon-left-below"></div>

 </body>
</html>

Получиться у вас должно вот так:

Красивые ленты с помощью CSS ( Урок №3 )