2 370 Скрипты / Buttons

Логотип RSS с помощью CSS3

Сделаем логотип 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 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 эффекта (эффекта при наведении):

Скачать 215Загрузок 2,27 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи