Spice up your Hyperlinks!

Now the words 'hyperlink' and 'sexy' rarely frequent the same sentence in my household, but something which appears to have come into fashion lately (namely I'm using it ;)) is the fading in of the hover state on hyperlinks. So instead of simply specifying the :hover state in your CSS, you use JavaScript or CSS3 to spice up the whole hovering thing. Here's what we will be creating, now lets see how we might go about doing it.

First off let's take a look at the CSS3 way - apparently all the cool kids are using it. If we had a link which we wanted to 'sexify' we might do something like:

.spice {
	color:blue;	
	transition: all .2s linear;
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
}

	.spice:hover {
		color: red;
	}

Bam! Right there we have one sexy hyperlink using only one CSS3 transition. So when we hover over a link with the class of 'spice' we should see it fade to a lovely bright red, and then upon mousing out, back to that delicious blue. But what happens if (God forbid) a user visits in IE8 or something?! We have support for Opera, Firefox, Chrome and Safari, but not IE. Well surprise surprise we need to have a fall-back for older browsers. And for that, we will be using jQuery (other JavaScript frameworks are available).

Before we continue I should add that I would always suggest using the CSS3 way over the jQuery method, but in any case this is how we do it:

$(function(){
	var color = '';
	
	$('.spice-jq').hover(function(){
		color = $(this).css('color');
		$(this).animate({'color':'red'},200);
	}, function(){
		$(this).animate({'color':color},200);
	})
});    		

Above we first wait for the DOM to be finished loading, and then create ourselves a variable called 'color' to hold the value of the link's colour in it's normal state (if all your links are the same colour, you can just replace every occurrence of 'color' with whatever colour you want). We then animate the colour of the link back and fourth using the hover() function. But before you wonder why the code above doesn't work on your site, I should add that for colour animations, the jQuery Color Plugin is required - so go ahead and include that in your page before the above script.

So now we could using something like Modernizr to detect if the user's browser has CSS3 transitions support, and if not, whack the above jQuery code onto our page. And with that, you should now have a set of beautiful links on your site that make it that little bit slicker.

Adding Vignettes to Images with CSS

Vignettes are something we've been able to add to images in Photoshop for many years - it describes the technique of reducing clarity towards the edges of images by reducing things like saturation and brightness, and can often give an image a different quality. It was for that reason that I decided I wanted to use them in my designs, but I certainly didn't want to use images that were pre-composed with the effect, and so decided it would be simple to add them using CSS. What I didn't know, was that there were many things conspiring to prevent me achieving the effect properly. So without further adieu, allow me to share my experience with you.

I first read Trent Walton's article on vignetting and implemented that on the site, but soon realised its shortcomings. Firstly the use of negative z-indexing played havoc with my backgrounds - this is because its fine if you have an all-white background, but if you have an image, it simply throws the picture behind it. And secondly I found myself frustrated with the fact that you couldn't right click and save the image with ease. I also took a look at Chris Coyier's article on the subject, but once again hit a brick wall.

So after a lot of playing around and many alterations I came up with a solution that is the combination of many techniques that I have come across, and the one use on the site today.

My HTML is as follows.

<figure>	
    <img src="path/to/image" alt="Test image" />
</figure>

The class of left simply floats the element to the left, while I use the following CSS to style the rest.

figure {
	position: relative;
	display: block; 
}

	figure.vignette img {
		z-index: 1;
		position: relative;
		display: block;
	}

	figure::before {
		content: "";
		position: absolute;
		top: -1em;
		bottom: -1em;
		left: -1em;
		right: -1em;
	}

	figure.vignette::after {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		content: "";
		z-index: 2;
		pointer-events: none;
		width:100%;
		height:100%;
		box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
		-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
		-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}

So the main styling of the figure element simply makes sure it is visible and sets it's position to relative, as does the styling of the image within it; but it is the code that follows that does all the magic. We use the pseudo ::before and ::after to apply the vignette effect. If you are unfamiliar with those selectors, visit W3's article on the subject. You can increase the intensity of the vignette by altering the box-shadow property to have a less transparent shadow, or bigger radius. You could even have different colours by altering the same property.

And that's it! I haven't found any inherent problems with this technique just yet, and although this method isn't really apply a vignette in the traditional sense, I feel it does a pretty good imitation of it.