How to Create the RSS Feed Logo with CSS3: Step-by-Step

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:

Create a feed box

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:

Draw another box inside the first feed box

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:

Create 1/4 large circle

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:

Create 1/4 small circle

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:

Create the smallest circle

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

Logo completed