Skip to main content
CSS is fun and cool and I like it.

Fade One Image to Another Menu

Make a CSS sprite image, with the top half and the bottom half being the two images you want to animate between. The jQuery adds a <span> tag, and adds the bottom half of the sprite image as its background. As you hover on and off, the span animates between fully transparent and fully opaque, fading one image into another.


<ul id="menu">
       <li id="home"><a href="#">home</a></li>
       <li id="about"><a href="#">about</a></li>
       <li id="services"><a href="#">services</a></li>
       <li id="contact"><a href="#">contact</a></li>


ul#menu li a{float:left;display:block;background:url("images/menu.png")  
Read article “Fade One Image to Another Menu”

End Articles with Ivy Leaf

p:last-child:after {
       content: "\2766"; /* Here comes the ivy leaf */
       font-size: 150%; /* Makes the leaf larger than the normal text */
       padding-left: 10px; /* Leaf won't clash with the last letter of the text */
       float: right; /* Horizontal position is set to the right edge of the column */
       position: relative; /* This is just an homage to Albert Einstein */
       top: 15px /*Vertical distance from the last line of text */
Read article “End Articles with Ivy Leaf”

Stop IE Page Load Flicker

Otherwise known as Fajax (fake ajax). For example, when submitting a form and the next page is mostly similar to the new page, the entire page isn’t whited out and redrawn, it blends smoothly to the next (IE only).

<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
Read article “Stop IE Page Load Flicker”

RSS Generator

You’ll need a MySQL database with a a table called `rss_feed`. In that table there are 3 colums: item title (which is the name a person will see for an item), the item link (which is the location of the page with the item on it), and description (which tells what the feed is about). Put the file in a folder called feed and you’re feed will be available at

Remember to change the feed title, link and image … Read article “RSS Generator”


Prevent Image Hotlinking

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yourdomain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpg|gif|bmp|png)$ /images/dontsteal.jpg [L]

Images linked to from anywhere else than your website are redirected to a custom graphic. Do note though, that this would affect people reading posts through RSS readers as well.

Also allow search engines

RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mydomain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?google\.(.+)/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?(.*\.)?google\.(.+)/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?bing\.(.+)/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?(.*\.)?bing\.(.+)/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yahoo\.(.+)/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?(.*\.)?yahoo\.(.+)/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|png)$ 
Read article “Prevent Image Hotlinking”