Лента для оформления сайта с использованием только 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>


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GfiTg70AP4w/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Лента для оформления сайта с использованием только CSS | | 2012-06-19 11:59:40 | | Статьи Web-мастеру | | Оформление лентами различных сайтов является популярным трендом при оформлении веб сайтов. Такой элемент дизайна можно использовать для меню, фона, заголовков и других частей. Для простых лент вполне | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: