Scalable CSS-only RSS icon

on 19-Feb-2010 | Comments ( 7 ) Tags: CSS

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 *.

If you have trouble reading the code, click on the code itself to generate a new random code.
 
sharkbait
Posts: 5
Comment
Re: Scalable CSS-only RSS icon
Reply #7 on : Fri February 19, 2010, 10:01:58
nice! :)
Andy
Posts: 5
Comment
SVG
Reply #6 on : Mon March 01, 2010, 19:12:07
Use SVG instead. IE 9 will support it.
cipa
Posts: 2
Comment
Re: Scalable CSS-only RSS icon
Reply #5 on : Mon March 01, 2010, 19: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
Comment
MS browsers
Reply #4 on : Thu March 04, 2010, 01:08:48
Did MS browsers ever worked "correctly"?
yogesh
Posts: 5
Comment
nice css
Reply #3 on : Thu March 04, 2010, 09:07:00
this css tutorial is really nice and useful for me
Anonymous
Posts: 5
Comment
Re: Scalable CSS-only RSS icon
Reply #2 on : Sat March 06, 2010, 04: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
Comment
Re: Scalable CSS-only RSS icon
Reply #1 on : Sat March 06, 2010, 05: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.

Quick modx Evolution Tags

  • cached [[snippet]] or uncached [!snippet!]
  • {{chunk}}
  • [+placeholder+]
  • [*resourceField/TV*]
  • [^timing^]
  • [~link~]

Quick modx Revolution Tags

  • [[snippet]]
  • [[$chunk]]
  • [[+placeholder]]
  • [[*resourceField/TV]]
  • [[~link]]
  • [^timing^]
  • [[++systemSetting]]
  • [[%languageStringKey]]
  • all tags can be called un-cached like: [[! snippet]]

Timing Tags (Evo and Revo)

  • [^qt^] - Query time
  • [^q^] - Query count
  • [^p^] - Parse time
  • [^t^] - Total time
  • [^s^] - Source
© modxRULES! 2009-2014