Scalable CSS-only RSS icon

A short experiment on how you can create a RSS icon with only HTML and CSS3. With some Javascript help the experiment works in IE 7 and 8. It also works for IE 6 with a small fix that is not included.

Here's the final product:

The page was successfully tested in Firefox, Safari, Chrome, IE 7 & 8 and should degrade nice in all the other browsers.

The HTML

Basically the html is just a bunch of divs:

<div class="rssWrp">
	<div class="secondLineWrp">
		<div class="secondLineOut">
			<div class="secondLineIn"></div>
		</div>
	</div>
	<div class="firstLineWrp">
		<div class="firstLineOut">
			<div class="firstLineIn"></div>
		</div>
	</div>
	<div class="rssDot"></div>
</div>

The CSS

I'll be using only one CSS3 properties: border-radius. As a bonus I also added a shadow with the box-shadow property.

In order to configure the size you would have to play with the .rssWrp class properties. Specially the width, height and the border radius

Here's a look at the code:

/******START CONFIG PART******/

/*size*/
.rssWrp{
	width:10em;
	height:10em;
	-moz-border-radius:1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	-moz-box-shadow: #000 4px 4px 10px;
	-webkit-box-shadow: #000 4px 4px 10px;
	box-shadow: #000 4px 4px 10px;
}

/*box color*/
.rssWrp, .firstLineWrp, .firstLineIn, .secondLineWrp, .secondLineIn{
	background:#1D2626;
}

/*highlight color*/
.rssDot, .firstLineOut, .secondLineOut{
	background:#FFF;
}

/******END CONFIG PART******/


.rssWrp{
	position:relative;
}

.rssDot{
	-moz-border-radius:100em;
	-webkit-border-radius: 100em;
	border-radius: 100em;
	width:20%;
	height:20%;
	float:left;
	z-index:2;
	position:absolute;
	top:70%;
	left:10%;
}

.firstLineWrp{
	width:45%;
	height:45%;
	overflow:hidden;
	position:absolute;
	z-index:1;
	top:45%;
	left:10%;
}

.firstLineOut{
	-moz-border-radius:100em;
	-webkit-border-radius: 100em;
	border-radius: 100em;
	width:200%;
	height:200%;
	margin: 0 0 0 -100%;
	float:left;
}

.firstLineIn{
	-moz-border-radius:100em;
	-webkit-border-radius: 100em;
	border-radius: 100em;
	width:90%;
	height:90%;
	margin: 10% 0 0 0%;
	float:left;
}

.secondLineWrp{
	width:80%;
	height:80%;
	overflow:hidden;
	position:absolute;
	z-index:0;
	top:10%;
	left:10%;
}

.secondLineOut{
	-moz-border-radius:100em;
	-webkit-border-radius: 100em;
	border-radius: 100em;
	width:200%;
	height:200%;
	margin: 0 0 0 -100%;
	float:left;
}
.secondLineIn{
	-moz-border-radius:100em;
	-webkit-border-radius: 100em;
	border-radius: 100em;
	width:92%;
	height:92%;
	margin: 8% 0 0 0;
	float:left;
}

Why not IE?

In order to make it work in IE we need to download and set up the DD_roundies script. There some small limitations but with the proper configuration everything plays nicely.

<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
	DD_roundies.addRule('.rssWrp', '30%');
	DD_roundies.addRule('.rssDot', '100%');
	DD_roundies.addRule('.firstLineOut', '200%');
	DD_roundies.addRule('.firstLineIn', '200%');
	DD_roundies.addRule('.secondLineOut', '200%');
	DD_roundies.addRule('.secondLineIn', '200%');
</script>

See Demo

In the end I can say that this was a successful experiment, since you can have a nice scalable RSS icon for 2.5 KB (including the IE fix but not the DD_roundies which you might already use).

Write a comment

• Required fields are marked with *.

Name:
Email:
Subject:
Comment: *

Help prevent spam - enter security code above:
 

sharkbait
Posts: 5

Re: Scalable CSS-only RSS icon
Reply #7 on : Fri February 19, 2010, 11:01:58

---

nice! :)

Andy
Posts: 5

SVG
Reply #6 on : Mon March 01, 2010, 20:12:07

---

Use SVG instead. IE 9 will support it.

cipa
Posts: 2

Re: Scalable CSS-only RSS icon
Reply #5 on : Mon March 01, 2010, 20:31:14

---

Too bad it won't work in IE7 and 8 :)
Finally some great news from MS. I do hope CSS3 will work correctly

Michael
Posts: 5

MS browsers
Reply #4 on : Thu March 04, 2010, 02:08:48

---

Did MS browsers ever worked "correctly"?

yogesh
Posts: 5

nice css
Reply #3 on : Thu March 04, 2010, 10:07:00

---

this css tutorial is really nice and useful for me

Anonymous
Posts: 5

Re: Scalable CSS-only RSS icon
Reply #2 on : Sat March 06, 2010, 05:37:50

---

Doesn't work in Presto (Opera) yet. And I guess it's the wrong way to do it. This has to be an image. Divs are meaningless containers. Use a picture with an proper alt-tag instead. Nice technique, though.

cipa
Posts: 2

Re: Scalable CSS-only RSS icon
Reply #1 on : Sat March 06, 2010, 06:27:02

---

I'm assuming border-radius is not supported by Opera yet(same on iPhone's safari)

As for the meaningless containers:
- your icon should be clickable, so wrap everything with a link tag and add the title attribute.
- Your link can contain any text you want. Use javascript to remove the text and insert the divs into the link. I might do a short tut about it

Thx for your comment.