{"id":10690,"date":"2011-11-03T21:01:13","date_gmt":"2011-11-03T13:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10690"},"modified":"2025-04-04T00:43:37","modified_gmt":"2025-04-03T16:43:37","slug":"rss-feed-logo-with-css3","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/rss-feed-logo-with-css3\/","title":{"rendered":"How to Create RSS Feed Logo with CSS3"},"content":{"rendered":"

RSS feed logo<\/a> 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<\/strong>? Yeap, you heard me :-)<\/p>\n

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

Here\u2019s a preview<\/a> of what you\u2019ll be creating in a minute. You can also download the source files at the end of the tutorial.<\/p>\n

Step 1<\/h3>\n

Create a HTML file, insert the following code into the file if it is completely empty.<\/p>\n

\r\n<html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n    <title>My First CSS3 RSS Feed Logo<\/title>\r\n    <style type='text\/css'>\r\n        \/* Insert Your CSS Here *\/\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <!-- Insert Your HTML Here -->\r\n<\/body>\r\n<\/html><\/pre>\n
Step 2<\/h3>\n
Insert the code below into the HTML file to make a feed box.<\/p>\n
HTML for Feed box<\/strong><\/p>\n
\r\n <span class='feed-box'>\r\n <\/span><!-- .feed-box -->\r\n <\/pre>\n
CSS for Feed box<\/strong><\/p>\n
span.feed-box {\r\n  display: block;\r\n  width: 200px;\r\n  height: 200px;\r\n  margin: 0 auto;\r\n  background: #F9A004;\r\n  box-shadow: 1px 1px 0 #C27C03,\r\n              2px 2px 0 #C27C03,\r\n              3px 3px 0 #C27C03,\r\n              4px 4px 0 #C27C03,\r\n              5px 5px 0 #C27C03,\r\n              6px 6px 0 #C27C03;\r\n  -moz-box-shadow: 1px 1px 0 #C27C03,\r\n                   2px 2px 0 #C27C03,\r\n                   3px 3px 0 #C27C03,\r\n                   4px 4px 0 #C27C03,\r\n                   5px 5px 0 #C27C03,\r\n                   6px 6px 0 #C27C03;\r\n  -webkit-box-shadow: 1px 1px 0 #C27C03,\r\n                      2px 2px 0 #C27C03,\r\n                      3px 3px 0 #C27C03,\r\n                      4px 4px 0 #C27C03,\r\n                      5px 5px 0 #C27C03,\r\n                      6px 6px 0 #C27C03;\r\n  -moz-border-radius: 20px;\r\n  -webkit-border-radius: 20px;\r\n  border-radius: 20px;\r\n}\r\n\r\nspan.feed-box * {\r\n  float: right;\r\n  display: block;\r\n}\r\n<\/pre>\n
This is the result you will achieve:<\/p>\n
\"step<\/figure>\n
Step 3<\/h3>\n
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\u2019s HTML code. We will also add border as barrier here.<\/p>\n
HTML for Smaller Feed Box<\/strong><\/p>\n
\r\n <span class='feed-box-in'>\r\n <\/span><!-- .feed-box-in -->\r\n <\/pre>\n
CSS for Smaller Feed Box<\/strong><\/p>\n
\r\nspan.feed-box .feed-box-in {\r\n  border: 4px solid #FFC563;\r\n  width: 184px;\r\n  height: 184px;\r\n  margin: 4px 4px 0 0;\r\n  -moz-border-radius: 20px;\r\n  -webkit-border-radius: 20px;\r\n  border-radius: 20px;\r\n}\r\n<\/pre>\n
This is the result you will achieve:<\/p>\n
\"step<\/figure>\n
Step 4<\/h3>\n
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\u2019s HTML code, and below is its code:<\/p>\n
HTML for 1\/4 Big Circle<\/strong><\/p>\n
\r\n <span class='feed-quarter-circle-big'>\r\n <\/span><!-- .feed-quarter-circle-big -->\r\n <\/pre>\n
CSS for 1\/4 Big Circle<\/strong><\/p>\n
\r\n span.feed-box .feed-box-in .feed-quarter-circle-big{\r\n margin: 16px 16px 0 0;\r\n width: 260px;\r\n height: 260px;\r\n border: 30px solid #FFDEA5;\r\n -moz-border-radius: 260px;\r\n -webkit-border-radius: 260px;\r\n border-radius: 260px;\r\n }<\/pre>\n
This is the result you will achieve:<\/p>\n
\"step<\/figure>\n
Step 5<\/h3>\n
We will be making the 1\/4 small circle now, put the HTML code below into the big circle\u2019s HTML code.<\/p>\n
HTML for 1\/4 Small Circle<\/strong><\/p>\n
\r\n <span class='feed-quarter-circle-small'>\r\n <\/span><!-- .feed-quarter-circle-small -->\r\n <\/pre>\n
CSS for 1\/4 Small Circle<\/strong><\/p>\n
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small {\r\n  margin: 16px 16px 0 0;\r\n  width: 176px;\r\n  height: 176px;\r\n  border: 26px solid #FFDEA5;\r\n  -moz-border-radius: 176px;\r\n  -webkit-border-radius: 176px;\r\n  border-radius: 176px;\r\n}\r\n<\/pre>\n
This is the result you will achieve:<\/p>\n
\"step<\/figure>\n
Step 6<\/h3>\n
In step 6 the smallest circle will be created inside the small circle, so put its HTML code into the small circle\u2019s HTML code.<\/p>\n
HTML for Smallest Circle<\/strong><\/p>\n
\r\n <span class='feed-circle'> <\/span><!-- .circle -->\r\n <\/pre>\n
CSS for Smallest circle<\/strong><\/p>\n
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle {\r\n    margin: 24px 24px 0 0;\r\n    background: #FFDEA5;\r\n    width: 70px;\r\n    height: 70px;\r\n    -moz-border-radius: 70px;\r\n    -webkit-border-radius: 70px;\r\n    border-radius: 70px;\r\n}\r\n<\/pre>\n
This is the result you will achieve:<\/p>\n
\"step<\/figure>\n
Finishing Touch<\/h3>\n
Search the code, \/* overflow: hidden; *\/<\/code> then replace with this code, overflow: hidden;<\/code>, then yes! You just achieved a CSS3 RSS Feed logo!<\/p>\n
\"finishing<\/figure>\n
Bonus: Add Hover Effect<\/h2>\n
You won\u2019t want your RSS feed logo without magical hover effect, would you? Just add the CSS style below to achieve it!<\/p>\n
CSS for Hover Effect<\/strong><\/p>\n
span.feed-box:hover {\r\n  background: #07C103;\r\n  box-shadow:\r\n    1px 1px 0 #058E02,\r\n    2px 2px 0 #058E02,\r\n    3px 3px 0 #058E02,\r\n    4px 4px 0 #058E02,\r\n    5px 5px 0 #058E02,\r\n    6px 6px 0 #058E02;\r\n  -moz-box-shadow:\r\n    1px 1px 0 #058E02,\r\n    2px 2px 0 #058E02,\r\n    3px 3px 0 #058E02,\r\n    4px 4px 0 #058E02,\r\n    5px 5px 0 #058E02,\r\n    6px 6px 0 #058E02;\r\n  -webkit-box-shadow:\r\n    1px 1px 0 #058E02,\r\n    2px 2px 0 #058E02,\r\n    3px 3px 0 #058E02,\r\n    4px 4px 0 #058E02,\r\n    5px 5px 0 #058E02,\r\n    6px 6px 0 #058E02;\r\n}\r\n\r\nspan.feed-box:hover .feed-box-in {\r\n  border-color: #58FC55;\r\n}\r\n\r\nspan.feed-box:hover .feed-box-in .feed-quarter-circle-big,\r\nspan.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small {\r\n  border-color: #B9FFB7;\r\n}\r\n\r\nspan.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle {\r\n  background: #B9FFB7;\r\n}\r\n<\/pre>\n
Previews and Downloads<\/h2>\n
Here are previews of the CSS3 feed logo in varies sizes and a different style. If you can\u2019t achieve certain step, you can download the source files too.<\/p>\n