Как сделать логотип RSS только при помощи CSS и HTML

Как сделать логотип RSS только при помощи CSS и HTMLИ так, сегодня мы расскажем вам как сделать логотип вашего потока RSS при помощи CSS и HTML с нуля.

Нам понадобится один файла. Если вы хотите использовать эту технику в реальном проекте, то, конечно же, вам понадобиться 2 файла. Первый это index.html, а второй styles.css. Первый файл нам нужен для того чтобы описать нашу иконку, а второй чтобы задать ей определённые стили. Но сегодня это просто урок, так что стили можно описать и в файле index.html

И так, откройте только что созданный файл index.html и внесите туда следующие строки.

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>My First CSS3 RSS Feed Logo</title>  
    <style type='text/css'>  
        - Здесь вы будете описывать ваши стили-  
    </style>  
</head>  
<body>  
    - А сюда впишите код HTML -  
</body>  
</html> 

Это стандартные строки, так что я думаю их не стоит объяснять.

Сначала мы опишем стиль для основы нашей иконки — т.е. для прямоугольника. Как видно из рисунка, он оранжевый и имеет закруглённые углы, небольшую тень справа и снизу, а также внутренние границы нежно абрикосового цвета.
Зададим нашу область.

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

Стиль будет выглядеть следующим образом

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

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

Вставьте следующие строки  в раздел для HTML кода, внутрь первой области. (т.е. внутрь первого span)

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

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

Соответствующий 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; */

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

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

Урок написан Ирэмом Кендени

 



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *