Оформление лентами различных сайтов является популярным трендом при оформлении веб сайтов. Такой элемент дизайна можно использовать для меню, фона, заголовков и других частей. Для простых лент вполне можно использовать CSS, чтобы уменьшить количество загружаемых в бразуер пользователя изображений. Для построения такой ленты используется трюк формирования треугольников - на концах ленты и тени на сгибах.
Полный код со стилями CSS и необходимой разметкой HTML:
Code <!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>
|