CSS Touchs

[J4m!3]

Ever wondered how people make images fade and then un-fade when you hover the mouse over the, in this tutorial you will find out just how this ever wondered how people make images fade and then un-fade when you hover the mouse over them, in this tutorial you will find out just how this happens and how to do it. To start off you must place this code between the head tags.

<style type="text/css">
        .highlightit img{
        filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50);
        -moz-opacity: 0.5;
        }
       .highlightit:hover img{
        filter:progid:DXImageTransform.Microsoft.Alpha(opa city=100);
        -moz-opacity: 1;
        </style>

After this you have to have every image that you want highlighted, code looking like this:

<a href="Link here" class="highlightit">[img]Image          path here[/img]</a>

You can edit the opacity of the image whens normal and got the mouse above it by typing a new number in the opacity brackets, for example:

(opacity=30)

---------------------------------


In this tutorial you will learn how to completely customise the colour of your links. Put this in the head tags.

<style type="text/css">
        <!--
        a.linkStyleName:link {color: white}
        a.linkStyleName:visited {color: red; }
        a.linkStyleName:hover {color: pink; }
        a.linkStyleName:active {color: yellow; }
        -->
        </style>

Change the colours to suit your site, right now everytime you want to apply this code to your links. Your links should now look like this:

<a href="Link Goes Here" class="linkStyleName">Text          Here</a>

Copyright Jamie Salvage.

 

[J4m!3]

No one?

 

[Breakpoint]

i dont know css but interesting

 

[Maverick]

Nice little tut. Thanks for sharing.

 

[Wybe]

This is sweet man. I kinda always bookmark sites I know use this technique, because I plan on using it some time, but ofcourse I always forget etc. etc. This has really laid it out right in front of me :P Perfect, thanks!

 

[Rive]

Great tutorial, very interesting and helpful.





_______________________________________
Brochures Printing Services
"Attempt the impossible in order to improve your work."

 

[Martin Brinkmann]

how about a css tut that shows how to create a design that looks similar in different browsers, that would come in handy right now.

thanks for the other tips

 

[dongan]

cool one.