Apple Effect in IE

[PrateekSaxena]

I found out a way with which you can make the popular apple effect through Internet Explorer -

The following tutorial will teach you how to make the reflection part using features from Internet Explorer. First copy this image and take a slice of it of width 1px and height 240px and name it as “headerbg.png” . You will have to make two <H1> tags having the same text but one of them enclosed in a DIV called reflect-

<h1>Prateek Saxena</h1><div id=”reflect”><h1>Prateek Saxena</h1></div>

Now for the “#reflect” DIV. You will have to use the filters that IE provides to do so. Please note that this will not work on Firefox. You will have to write the following CSS for the “#reflect” <DIV> -

#reflect{position: absolute;top:84px;left:20px;filter: flipv alpha(Opacity=10, FinishOpacity=5, Style=3);}

And finally now for the header. Here the “headerbg.png” will come into play. Just write the following CSS for the header and put the <H1> tags inside it.

#header{width: 100%;height: 240px;background-image: url(”headerbg.png”);color: white;padding: 0px;padding-left: 20px;padding-top: 57px;border: solid;border-width:0px;border-bottom-width: 1px;border-color: #404040;}

This will only work with internet Explorer as its makers decided to put this feature in it. As Firefox is completely W3C compliant, everything will look Hotch Potch on FF. If you have any queries relating to this tutorial, leave a comment or email me at prateek.saxena@yahoo.com

[Err]

lol. That was one of the first things I learned before all this validation jibber-jabber I know now.

[PrateekSaxena]

he he