Сделаем логотип RSS ленты не с помощью photoshop, а с помощью CSS3.

Начнем по порядку, с общей структуры:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Логотип RSS на CSS3</title>
    <style type='text/css'>
        - Сюда вставляем CSS  -
    </style>
</head>
<body>
    - Сюда вставляем HTML -
</body>
</html>

 

Вставим вот этот html внутри тегов body:

<span class='feed-box'>
</span><!-- .feed-box -->

А вот такие CSS стили в теги style:

span.feed-box{
    display:block;
    width:200px;
    height:200px;
    margin:0 auto;
    background:#F9A004;
    box-shadow:
        1px 1px 0 #C27C03,
        2px 2px 0 #C27C03,
        3px 3px 0 #C27C03,
        4px 4px 0 #C27C03,
        5px 5px 0 #C27C03,
        6px 6px 0 #C27C03;
    -moz-box-shadow:
        1px 1px 0 #C27C03,
        2px 2px 0 #C27C03,
        3px 3px 0 #C27C03,
        4px 4px 0 #C27C03,
        5px 5px 0 #C27C03,
        6px 6px 0 #C27C03;
    -webkit-box-shadow:
        1px 1px 0 #C27C03,
        2px 2px 0 #C27C03,
        3px 3px 0 #C27C03,
        4px 4px 0 #C27C03,
        5px 5px 0 #C27C03,
        6px 6px 0 #C27C03;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
span.feed-box *{
    float: right;
    display: block;
}

В итоге результатом будет такой оранжевый квадрат с тенью:

Далее нарисуем ещё один квадрат с границей, который будет находиться внутри первого.

Для этого помещаем ниже приведенный код, внутри первого:

<span class='feed-box-in'>
</span><!-- .feed-box-in -->

И в стили дописываем:

span.feed-box .feed-box-in{
    border: 4px solid #FFC563;
    width: 184px;
    height: 184px;
    margin: 4px 4px 0 0;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    /* overflow: hidden; */
}

Результатом будет такой вот квадрат:

Далее нарисуем четвертинку круга, код html приведенный ниже вставляем внутри предыдущего, как в матрешку:

 <span class='feed-quarter-circle-big'>
 </span><!-- .feed-quarter-circle-big -->

Стили дописываем такие:

span.feed-box .feed-box-in .feed-quarter-circle-big{
    margin: 16px 16px 0 0;
    width: 260px;
    height: 260px;
    border: 30px solid #FFDEA5;
    -moz-border-radius: 260px;
    -webkit-border-radius: 260px;
    border-radius: 260px;
}

Итогом, пока что, будет вот такое:

Далее рисуем четвертинку меньшего диаметра и продолжаем разбирать матрешку, вставляем код внутри предыдущего:

<span class='feed-quarter-circle-small'>
</span><!-- .feed-quarter-circle-small -->

Стили дописываем такие:

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
    margin: 16px 16px 0 0;
    width: 176px;
    height: 176px;
    border: 26px solid #FFDEA5;
    -moz-border-radius: 176px;
    -webkit-border-radius: 176px;
    border-radius: 176px
}

Результатом будут два круга и квадрат:

Теперь нарисуем маленький круг и поместим его внутри преыдущего:

<span class='feed-circle'> </span><!-- .circle -->

Стили такие:

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
    margin: 24px 24px 0 0;
    background: #FFDEA5;
    width: 70px;
    height: 70px;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px
}

Результат такой:

И наконец, в стилях CSS, где мы за комментировали строчку у классов span.feed-box .feed-box-in

 /* overflow: hidden; */

Просто расскомментируем её, чтобы скрыть  не нужные нам части кругов.

И дополнительно вот такие CSS для создания hover эффекта (эффекта при наведении):

span.feed-box:hover{
    background:#07C103;
    box-shadow:
        1px 1px 0 #058E02,
        2px 2px 0 #058E02,
        3px 3px 0 #058E02,
        4px 4px 0 #058E02,
        5px 5px 0 #058E02,
        6px 6px 0 #058E02;
    -moz-box-shadow:
        1px 1px 0 #058E02,
        2px 2px 0 #058E02,
        3px 3px 0 #058E02,
        4px 4px 0 #058E02,
        5px 5px 0 #058E02,
        6px 6px 0 #058E02;
    -webkit-box-shadow:
        1px 1px 0 #058E02,
        2px 2px 0 #058E02,
        3px 3px 0 #058E02,
        4px 4px 0 #058E02,
        5px 5px 0 #058E02,
        6px 6px 0 #058E02;
}
span.feed-box:hover .feed-box-in{
    border-color: #58FC55;
}
span.feed-box:hover .feed-box-in .feed-quarter-circle-big,
span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
    border-color: #B9FFB7;
}
span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
    background: #B9FFB7;
}

СКАЧАТЬСкачек: 113
2,27 Kb
Кто скачал?

ДЕМОПосмотреть
пример