Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание логотипа ленты новостей RSS с использованием CSS3

27 августа 2014 | Опубликовано в css | Нет комментариев »

Благодаря своей функции логотип ленты новостей RSS — один из наиболее часто используемых логотипов в веб-дизайне. Вы, скорее всего, встречали много уроков по созданию логотипа ленты новостей RSS с помощью графических редакторов, таких как Photoshop, а как насчет нарисовать этот логотип, использую только CSS3?

 

 

В этом уроке мы покажем простой способ создания стандартного логотипа ленты новостей RSS, использую только CSS3, в деталях и с изображениями.

Вот пример того, что вы сможете создать. Вы сможете скачать исходный код в конце урока.

Шаг 1 

Создаем файл HTML, вставляем в него следующий код.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My First CSS3 RSS Feed Logo</title>
    <style type='text/css'>
        - Вставьте код CSS сюда-
    </style>
</head>
<body>
    - Вставьте код HTML сюда -
</body>
</html> 

Шаг 2 

Вставьте код ниже в HTML, чтобы создать квадратный блок фона.

HTML код для квадратного блока фона:

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

CSS код для квадратного блока фона:

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: rightright;
    display: block;
} 

Вот, что вы получите в результате:

Шаг 3 

Мы нарисуем еще один квадрат, расположенный внутри первого, для этого мы поместим HTML код ниже в первый HTML код для квадратного блока фона. Мы также добавим здесь рамку как границу.

HTML код для маленького внутреннего блока:

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

CSS код для маленького внутреннего блока:

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; */
} 

Вот, что вы получите в результате:

Шаг 4 

В этом шаге мы создадим четверть большого круга. Поместите HTML код четверти большого круга, находящийся ниже, в HTML код для маленького внутреннего блока:

HTML код для четверти большого круга:

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

CSS код для четверти большого круга:

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;
} 

Вот, что вы получите в результате:

Шаг 5 

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

HTML код для четверти малого круга:

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

CSS код для четверти малого круга:

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
} 

Вот, что вы получите в результате:

Шаг 6 

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

HTML код для самого маленького круга:

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

CSS код для самого маленького круга:

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
} 

Вот, что вы получите в результате:

Завершающий штрих 

Поищите в коде строку /* overflow: hidden; */  и замените ее на overflow: hidden; . И все, Вы получили логотип ленты новостей RSS.

Дополнение: добавим эффект при наведении указателя мыши 

Не хватает только добавить эффект при наведении указателя мыши к этому логотипу ленты новостей RSS. Просто добавим стили CSS ниже, чтобы реализовать это.

CSS код для эффекта при наведении указателя мыши:

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;
} 

Демонстрации работы и исходный код 

Вот демонстрации работы логотипа ленты новостей на CSS3 в разных размерах и стилях. Если Вы не можете разобраться в определенном шаге, Вы также можете скачать исходный код.

Демонстрация работы большого логотипа RSS на CSS3

Демонстрация работы среднего логотипа RSS на CSS3

Демонстрация работы малого логотипа RSS на CSS3

Демонстрация работы среднего углубленного логотипа RSS на CSS3

Скачать исходный код логотипа RSS на CSS3

Автор урока Irham Kendeni

Смотрите также:


�


Коментарии запрещены.

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

Случайные статьи



Друзья

    • Самые комментируемые