How to Create RSS Feed Logo with CSS3

By . in Coding. Updated on .

RSS feed logo is one of most commonly used logo in web design, due to the function it referred. You saw many tutorials on drawing the RSS feed logo using graphic software like Photoshop, but how about drawing it purely using CSS3? Yeap, you heard me :-)

In this post I would like to show you the easy way to create a standard RSS feed logo with just CSS3, so follow the tutorial with comprehensive steps and graphics to get your first CSS3 feed logo!

Here’s a preview of what you’ll be creating in a minute. You can also download the source files at the end of the tutorial.

Step 1

Create a HTML file, insert the following code into the file if it is completely empty.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>My First CSS3 RSS Feed Logo</title>
    <style type='text/css'>
        /* Insert Your CSS Here */
    </style>
</head>
<body>
    <!-- Insert Your HTML Here -->
</body>
</html>
Step 2

Insert the code below into the HTML file to make a feed box.

HTML for Feed box

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

CSS for 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: right;
  display: block;
}

This is the result you will achieve:

step 2
Step 3

We will be drawing another box which is located inside the first feed box, so put the HTML code below into the first feed box’s HTML code. We will also add border as barrier here.

HTML for Smaller Feed Box

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

CSS for Smaller Feed Box

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

This is the result you will achieve:

step 3
Step 4

In this step we will be making 1/4 big circle. Put the HTML code of 1/4 big circle into the smaller feed box’s HTML code, and below is its code:

HTML for 1/4 Big Circle

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

CSS for 1/4 Big Circle

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

This is the result you will achieve:

step 4
Step 5

We will be making the 1/4 small circle now, put the HTML code below into the big circle’s HTML code.

HTML for 1/4 Small Circle

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

CSS for 1/4 Small Circle

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

This is the result you will achieve:

step 5
Step 6

In step 6 the smallest circle will be created inside the small circle, so put its HTML code into the small circle’s HTML code.

HTML for Smallest Circle

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

CSS for Smallest 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;
}

This is the result you will achieve:

step 6
Finishing Touch

Search the code, /* overflow: hidden; */ then replace with this code, overflow: hidden;, then yes! You just achieved a CSS3 RSS Feed logo!

finishing touch

Bonus: Add Hover Effect

You won’t want your RSS feed logo without magical hover effect, would you? Just add the CSS style below to achieve it!

CSS for Hover Effect

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

Previews and Downloads

Here are previews of the CSS3 feed logo in varies sizes and a different style. If you can’t achieve certain step, you can download the source files too.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail