Hongkiat.com: How to Create RSS Feed Logo with CSS3 |
How to Create RSS Feed Logo with CSS3 Posted: 03 Nov 2011 04:26 AM PDT 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 opportunity 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 1Create a HTML file, insert the following code into the file if it is completely empty. <html xmlns="http://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 2Insert 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 3We 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; /* overflow: hidden; */ } This is the result you will achieve: Step 4In 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 5We 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 6In 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: Finishing TouchSearch the code, Bonus: Add Hover EffectYou 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 DownloadsHere 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.
|
You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
No comments:
Post a Comment