You with me.Page.TL - CSS CODE AMAZING WEB TOOL

Code description

.

Code description
.

Background image

<style type="text/css"> body {background-image: url(http://BLAH.GIF);} </style>

Upsidedown links

<style type="text/css"></style>

Fixed background image

<STYLE type=text/css></STYLE>

Embossed links

<style type='text/css'> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style>

Nontiling background image

<STYLE type=text/css> body { background-image: url(YOUR IMAGE); background-attachment: fixed; background-repeat: no-repeat; background-position: top center; } </STYLE>

Capitalize first letter in a paragraph

<style type="text/css">  </style> Then use this code where ever you begin a new paragraph <p>. <p class="myparagraph">YOUR TEXT GOES HERE".</p>

Solid color background

<style type="text/css"> body { background: #FFFF00; } </style>

Link decoration overline

<STYLE type="text/css"></style>

Flip your page to the left side

<STYLE>body{direction:rtl;}</STYLE>

Fixed vertical text left side

<STYLE type=text/css> .vert { position:absolute; left:1px; top:50px; width:1px; writing-mode: tb-rl; } </STYLE> <SPAN class=vert><FONT color=#ff0000>YOUR MESSAGE HERE</FONT></SPAN>

Image links on mouseover

<STYLE type=text/css> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.your image url here);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.your image url here); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.your image url here); filter:alpha(finishopacity=0, style=2); } </STYLE>

No underlined links

<style type="text/css">  </style>

Blured links on mouseover

<style type="text/css"> a:hover img {filter: blur(add = 0, direction = 225, strength = 10)}</style>

Engrave links on mouseover

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.engrave;} </style>

Blured links, normal mouseover

<style type="text/css"> a:link img {filter:blur(add = 0, direction = 225, strength = 10);}a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}</style>

Engrave with normal mouseover

<style type="text/css"> a:link img {filter:progid:dximagetransform.microsoft.engrave;} a:visited img {filter:progid:dximagetransform.microsoft.engrave;} a:hover img {filter:none;} </style>

Invert link color on mouseover

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:invert;} </style>

Invert color with normal mouseover

<style type="text/css"> a:link img {filter:invert;} a:visited img {filter:invert;} a:hover img {filter:none;} </style>

X ray mouseover links

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:xray();} </style>

X-ray with Normal Mouseover

<style type="text/css"> a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;} </style>

Transparent links on mouseover

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:alpha(opacity=60);} </style>

Transparent links with normal mouseover

<style type="text/css"> a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;} </style>

Transforming links with color change

<style type="text/css" > A:hover { color:red; font-size:10pt; font-family: Verdana, Times New Roman, Helvetica, sans-serif; font-style:italic; font-weight:bold; text-decoration:underline; cursor:hand; font-variant:small-caps; text-transform:uppercase; background-color:white; } </style>

Custom cursor