How to create the RSS Feed logo with CSS3

The RSS Feed logo is one of the most commonly used logos in web design. You have seen many tutorials on drawing logo RSS Feed with graphic software like Photoshop, but how to draw it completely with CSS3?

In this article, TipsMake.com will show you an easy way to create a standard RSS Feed logo using only CSS3!

Step 1:

Create an HTML file, insert the following code into the file if it is completely blank.

 My First CSS3 RSS Feed Logo - Insert Your HTML Here - 

Step 2:
Insert the following code into the HTML file to create the feed box.

HTML for the feed box

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

Here are the results you will achieve:

Step 3:

We'll draw another box inside the first feed box, so put the HTML code below into the HTML code of the first feed box. You will also add borders here.

HTML for smaller feed boxes

CSS for the 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; /* overflow: hidden; */ }

Here are the results you will achieve:

Step 4:

In this step we will create 1/4 large circle. Place the HTML code of 1/4 large circle in the HTML code of the smaller feed box as follows:

HTML for 1/4 large circle

CSS for 1/4 large 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; }

Here are the results you will achieve:

Step 5:

Now we will create 1/4 small circle, put the HTML code below into the HTML code of the big circle.

HTML for 1/4 small circle

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 }

Here are the results you will achieve:

Step 6:

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

HTML for the smallest circle

CSS for the 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 }

Here are the results you will achieve:

Finally, find the code /* overflow: hidden; */then replace it with this code overflow: hidden;. You've got the CSS3 RSS Feed logo!