A nice effect when hovering over thumbnails is to change the opacity, so that it has that fade in and out effect.

<ul class="thumbnails">
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
</ul>

Take the above example, a simple list of images. Let's apply the basic styling for it...

ul.thumbnails { list-style: none; margin: 0; padding: 0; }
ul.thumbnails li { float: left; margin: 10px; width: 50px; height: 50px; }
ul.thumbnails li img { filter: alpha(opacity=60); /* IE only */ opacity: .60; /* All other browsers */ }

As you can see all of the thumbnails will have a default opacity of 60%. Now comes the jQuery script to add the fade effect...

$(document).ready(function(){
	$('ul.thumbnails li').hover(function(){
		$('img', this).stop().animate({opacity: 1});
	}, function() {
		$('img', this).stop().animate({opacity: 0.6});
	});
});

And that's all there is to it!

This just goes to show what you can do with CSS these days as Román Cortés demonstrates with his awesome spinning coke can example.

I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image).

With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can - my favourite drink.

Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little - below 5kb - and easy to understand I hope.

Even if this effect is mainly CSS1 and some bits of CSS2 - for the scrolling div, overflow: auto property -, it is not going to work in IE6, because it doesn’t support background-attachment: fixed. I’ve tested it and it works in IE8, Firefox 3.5, Chrome 3, Safari 4 and Opera 10. Also, the code validates.

Check it out at http://www.romancortes.com/blog/pure-css-coke-can/

Inspired by Andrew Sellick's Simple 3D Carousel using Mootools I needed a jQuery version of the script, source code of which is below (tested with jQuery 1.4).

Please refer to the original tutorial for instructions and a working demo.

var count = 0;
var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;
var imageDivs = '';
var numberOfElements = 0;
var carousel = '';
var speedTest = '';

$(document).ready(function(){

	carousel = $('#carousel');
	imageDivs = $('#carousel div');
	numberOfElements = imageDivs.length;

	setInterval('startCarousel()', 40);

	carousel.mousemove(function(event) {
		tempX = event.clientX;
		speed = (tempX - centerX) / 2500;
	});
});

function startCarousel(){

	for(i=0; i < numberOfElements; i++){

		angle = i * ( Math.PI * 2 ) / numberOfElements;

		posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
		posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );

		imageDivWidth = posY/3;
		imageDivZIndex = Math.round(imageDivWidth)+100;

		$('#carousel div').eq(i).css({'position': 'absolute', 'left': posX + 'px', 'top': posY + 'px', 'width': imageDivWidth + 'px', 'zIndex': imageDivZIndex});

		angle += speed;
	}
	count++;
}

I find it frustrating getting into London these days as there are always problems on the tube that causes delays.

To take action we have launched a new service dubbed "Tweet the Tube" which provides live updates whenever a tube service changes status, pulled straight from the Transport for London website and checked every 5 minutes.

All you have to do is follow "tweetthetube" on twitter: http://twitter.com/tweetthetube

Feel free to leave comments/suggestions on this page.

» November 2011 - improved code click here to view

There are many tools around that will help cache your website to increase speed and performance, such as eAccelerator and APC. However these usually require installation on your web server, thus rendering them useless for people who use shared hosting and don’t have access to the server.

Using some simple PHP code we can quite effectively cache a webpage, useful for sites that are database driven and have a large amount of queries or high volumes of traffic.

First we need to setup the folder where the cached files are stored, making sure it has read/write permissions (CHMOD to 0777 – see your FTP client documentation on how to do this).

Next create a file called cache.php which contains the following code:

Read more »