OK, cool might be a stretch, but I think it’s cool, and I’m in charge here. Admittedly it’s sorta random, like the lime at the top right of my blog here, but I went ahead and added a lizard to my personal site. I was cruising stock exchange, looking for cliffs for some reason, I forget why now, and I came across this dude. I said “Self, wtf is a lizard doing showing up in my results for ‘cliff’? No matter, that is too cool not to put into play somewhere.” Of course I couldn’t think of a ‘professional’ need for a money-metal blue and orange lizard chilling on the rocks, so he landed on my site.

Here’s how I incorporated him:

• Trimmed out the background in Photoshop
• Gave the image a nice shadow in Photoshop
• Made a new div in the bottom include .php file on my web pages, set the CSS so it was right-aligned, gave it a high z-index so it would be always on top no matter what size the screen/browser is
• Dropped the image into said div
• Hacked around accordingly so it works in FireFox and IE7
• Punted for IE 6 (the image is a .png, and I need it’s transparency); I wrote some javascript to hide the div in this crap-tastic browser -  so IE6 users, you lose! But you probably hate this site already anyway since I use transparent png’s here, too, so you lose twice. Get a better browser!

Here is my final CSS code that worked in FF and IE7:

div#lizard{
position: fixed;
bottom: -20px;
right: 0;
width: 100%;
text-align: right;
margin: 0;
padding: 0;
clear: both;
display: none;
z-index: 10;
}
div#lizard img{
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
}
 

The main div for the image has “display: none” and then I switch it to be visible in my javascript browser detection.