Spinning and fading out/in icons with CSS3

This is an experiment with CSS3 ingredients. What we want to achieve is a smooth spinning and fading out/in effect with two icons.

Both icons hold the same position. One of them stands below the other and it is opaque. The other is transparent. On rollover both start spinning and switch transparency in one second.

Take a look at the effect

Here comes the HTML code:

<h1>
	 <a href="#"><span class="logo"><img src="..." alt="" /></span></a>
	 <a href="#"><span class="logo_off"><img src="..." alt="" /></span></a>	
	</h1>
	

And here’s is the CSS code, which is more interesting.

	 h1{
	 width: 283px;
	 height: 283px;
	 -webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;
	 position: relative;
	 text-align: left;
	   }

	h1:hover{
	 -webkit-transform: rotate(360deg);
	 -moz-transform: rotate(360deg);
	 -o-transform: rotate(360deg);
	 transform: rotate(360deg);
	}

	span.logo{
	 opacity: 1;
	 -webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;   
	 position: absolute;
	 width: 283px;
	 height: 283px;
	}

	h1:hover span.logo{
	 opacity: 0;
	}

	span.logo_off{
	 opacity: 0;
	 webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;   
	 position: absolute;
	 width: 283px;
	 height: 283px;        
	}

	h1:hover span.logo_off{
	 opacity: 1;
	}
	

Take a look at the effect

For h1 we define the size of the icons and the spinning, which is linear and lasts one second.

Both span tags include the icons. We also define a linear animation for one second, but this time it is about the fade out/fade in effect.

As I mentioned above this is just an experiment. If you have any simpler way to achieve the same result (no, without JavaScript please), do share your ideas in the comments below.

UPDATE: Firefox has an issue with the effect which breaks there. Add text-align: left; for h1 to pass it by.

Better RSS 2.0 Templates in Expression Engine

In details:

• The new template merges the feeds of different weblogs of the same website.
• It solves the following issue: when a published blog post is being edited it reappears in the feed reader as new.
• It solves the following issue: Feeds look unformatted at all. No paragraphs, lists, images etc. The new template shows the feed the way it should.
• It shows the category and/or tags of the post. Both category and tags are clickable and transfer the user to the relevant areas of the website.
• It brings the Tweetmeme button which shows how many times the post has been retweeted. Of course the button is interactive.

This new template has been tested in Google reader, NetNewsWire and Fever.

You can find it in the official Wiki of Expression Engine.

Please test it and make it better. You can add your comment here or in the Forum of Expression Engine.

CSS hacks

CSS hacks are lines of code inside a CSS file which replace certain code with another in order to achieve the best possible design for all browsers.

Actually most of the hacks have to do with Internet Explorer 6 and below. Everybody knows that IE has caused the most troubles in Web design and it still does.

The following hacks are simple solutions which can be easily applied, not a complete guide to CSS hacks.

The !important hacks

#nav {
border: 1px solid #ccc; !important;
border: 1px solid #ccc;
}

This hack is based on the fact that IE6 (and below) cannot treat many properties in a rule. Thus, IE will read the second property and it will ignore the first, while in the modern browsers the !important will prevail.

Since old IE cannot treats dotted lines as dashed, dotted borders look ugly. Thanks to this hack we have an at least solid line as a border for IE.

IE7 knows how to treat dotted lines at last.

The star hack

a:hover {
border: 1px dotted #ccc;
}

* html a:hover {
border: 1px solid #ccc;
}

The first part of the code applies a rule and the second overrides it. This is something that old versions of IE understand.

So, as it happened before, the dotted border is bypassed by IE.

The ch­ild selector hack

html>body{
background: url(back.png);
}

This hack hides from old versions of IE the image back.png.

This happens thanks to the child selector “>” which cannot be recognized by IE. The modern browsers, including IE7, read it and apply the background image.

If this back.png image was a transparent one, this hack might have been a very convenient solution. As everybody knows transparent .png files are also not recognized by old IE.

The attribute selector hack

div[id="content"] {
background: url(back.png);
}

Like before, there is a selector, the attribute selector “[id=”...”]”, which means nothing to IE6 and below. The result is a background image which can be seen in modern browsers but not in old versions of IE.

Apart from these hacks there is another way to solve problems caused by Internet Explorer: the Conditional Comments. I wrote about them a short time ago. I can’t recommend the one solution or the other but little by little I find hacks more convenient for me.