CSS3 RSS Icon

Well, here we are for week 2 of the CSS3 Icon experiment. This time we will tackle the RSS icon, and as always, not use any images. For this implementation, we are going to keep the mono-chrome look that we did with the Search Icon.

Let’s jump right in:

Again, I am targeting CSS3 here, so it will not work in all browsers. In addition, I am not going to delve too deep into the reasoning here, but I am only showing code that works great in Webkit-based browsers.

The CSS3 RSS Icon

To start, let’s create the HTML:

<div class="rssBox">

  <div class="topRSSLine">

    </div>

  <div class="bottomRSSLine">

    </div>

    <div class="RSScircle">

    </div>

</div>

In this, I have 4 divs. The outer div, rssBox, is like a wrapper and contains all the pieces. The other 3 divs are the 3 separate pieces of the icon, the top line, bottom line, and circle.

Now, let’s try looking at the CSS. We will start with the main wrapper, rssBox.

.rssBox {

position:relative;

height:26px;

width:26px;

}

This is very basic. I am declaring the positioning, so I can make the other items inside positioned relative to this, and declaring the width and height. Declaring the width and height will be important for a future lesson, but really doesn’t do much for us now besides let us know how large our icon is.

Next, let’s take a look at the lines:

.topRSSLine {

height:36px;

width:36px;

border-right:5px solid #000;  

border-radius:18px;

-webkit-transform: rotate(-45deg);

position:absolute;

top:5px;

left:-17px;



}

  

.bottomRSSLine {

height:20px;

width:20px;

border-right:5px solid #000;  

border-radius:10px;

-webkit-transform: rotate(-45deg);

position:absolute;

top:13px;

left:-9px;

}

The code for the 2 of these is almost identical, with just the sizing and positioning changing slightly. Starting at the top, we declare the height and width of the div. Next, we declare the border for the right side ONLY. This is very important, as the RSS Icon is essentially a quarter circle. We can then declare the border radius for the div, making it half of the height and width for the circular look.

At this point, the quarter circle is pointing to the right. Using the “transform” selector in CSS3, we can rotate it back 45 degrees to it’s proper place. Since this is not supported fully, you have to use your favorite browser‘s extension for this (ie. -webkit-).

The last 3 lines in each are positioning the element in the correct placement.

Now, the circle:

.RSScircle {

height:0;

width:0;

border:2px solid #000;

border-radius:3px;

position:absolute;

top:19px;

left:3px;

}

This code is a lot like the ones above, except it is using the border on all sides to complete the circle. It then positioning it where it needs to be to complete the icon.

Now, that’s it. you have a simple, mono-chrome RSS icon built completely using CSS3.