E-Mail:

Apple Effect in Internet Explorer

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 at yahoo.com

[tags]photoshop, internet explorer, effect[/tags]

What Do You Think?

 

Want to Start a Blog Here for Free?

Are you an expert in one subject or another? If your goal is to help others and dispense hard-earned information back to the community, stake a claim on your very own Lockergnome blog today! You can write about anything - no matter the topic. Sign-up to start blogging!

websites - Feb 25, 2007

Google Apps

people - Feb 17, 2007

People Don’t Change

50 queries / 0.396 seconds.