Одной из модных тенденцый в веб дизайне на 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>
Получиться у вас должно вот так:
5 Response Comments
Отличный урок, может пригодиться
Урок норм, только вот эти два блока, которые изгиб ленточки имитируют там я не все понял с обводкой
Эта модная, как вы говорите, тенденция была модной года два назад. Вы просто поздно открыли её для себя.
Наберете в гугле «Модные тенденции в веб дизайне на 2012 год» и результат Вас удивить! Ленты снова в строю, мода циклична, все новое хорошо забытое старое 🙂
Первые два комментатора глаголят истину 🙂