Blog

Color on hover social icons: workflow

There is a time and place for starting stuff from scratch, and a time and place for using what someone else has made.  jQuery plugins range from the teeny tiny to the bloated, so knowing what you're setting out to achieve is really important.

I wanted to create some grayscale icons with a hover effect.  I've been trying to use more "Flat design" at the moment, it might get old pretty quickly, but there is no ignoring the fact its pretty on-trend right now.  I could redraw the icons in an HTML5 canvas grayscaled, but to be honest it seems like overkill!  I decided better was to grab png versions, and then animate a css background.

1. Drawing the icons

Don't be silly, some quick googling of flat social icons pretty quickly leads us to this great repository by danleech, called Simple Icons.  I grabbed these.

2. CSS

First I dumped all the icons I knew I wanted into one Photoshop file.  I saved-as a .psd before I carried on, so often with sprite sheets I need to resize, add to, recolour etc, and it always makes sense to have a build file.  Next I had to find all the image positions - oh yep, there's an app for that called Sprite Cow which pretty quickly gave me everything I needed for my .scss file, which I use Codekit to preprocess.

style.scss

.youtube-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat 0 -48px;
	}
}
.stumble-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat -33px -48px;
	}
}
.facebook-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat 0 -81px;
	}
}
.twitter-icon{
	background:$midgrey;
	a{
		background: url('images/sprit-sheet.png') no-repeat -33px -81px;
	}
}

3. jQuery

Anyone who has used jQuery for longer than about a month knows that it won't animate colours.  Dag nammit!  Google it.  Ah, here we go! So now we just use my favourite hover function, jQuery hover uses two arguments, one for when the mouse enters, and one for when the mouse leaves the element.

So, right now they're all just grey... I need to look up every single colour for all the icons - this could take a while. Oh, no hang on! Turns out there is a website called Brand Colors, and its a one pager with just every major social brand out there on it.  I can store this hex value on each element as an HTML5 data- attribute, and then grab it with jquery.

html

<li data-color='#c4302b'><a href="#youtube">#</a></li>

jQuery

to_color = $(this).attr("data-color");

So, now we're pretty much ready to go with the hover function:

jQuery

$("#social-icons li").hover(function(){
	to_color = $(this).attr("data-color");
	from_color = "#eaeaea";
	$(this).animate({backgroundColor: to_color}, 100);
}, function(){
	$(this).animate({backgroundColor: from_color}, 300);
})

 

A little bug

Ah that should have just worked, and it does! But if I quickly hover over all of them back and forth they all queue their animations and the animations keep happening!  Google.  Turns out you just need to put a stop in there on the animate!

$("#social-icons li").hover(function(){
	to_color = $(this).attr("data-color");
	from_color = "#eaeaea";
	$(this).stop().animate({backgroundColor: to_color}, 100);
}, function(){
	$(this).stop().animate({backgroundColor: from_color}, 300);
})

 

Summary

Well that wasn't so bad after all!

I just thought I'd doff my cap to all these great little apps you can use to make your work flow faster and, more importantly, fun. There are so many tools out there and if you don't use them, you're going to get left behind pretty quickly.



Ends:

Update to Email Protector

After the last couple of projects I found it necessary to update my PHP email protector function so that now it can have text in the link (as opposed to before, where it would be the email address wrapped in a link to the same email address), and also it can be returned, rather than printed straight to the page - for use in other functions or to save to a database.

It now looks a little something like this:

<?php 
function php_split_js_make_email($phpemail,$text='',$echo=true)
	{
		$pieces = explode("@", $phpemail);
		
		$return = '
			<script type="text/javascript">
			var a = "<a href='mailto:";
			var b = "' . $pieces[0] . '";
			var c = "' . $pieces[1] .'";
			var d = "' class='email'>";
			var e = "</a>";';
		if($text != ''){
			$return .= 'document.write(a+b+"@"+c+d+'.$text.'+e);';
		}else{
			$return .= 'document.write(a+b+"@"+c+d+b+"@"+c+e);';
		}
		$return .= '
			</script>
			<noscript>Please enable JavaScript to view emails</noscript>';
		if($echo == true)
		{
			echo $return;
		}else{
			return $return;
		}

	}
?>

Ends:

SVG jQuery darts board interface

Open interface

 
My brother recently needed a darts board interface that someone could click on.

Now, everyone who's tried using absolute positioning of multiple divs to create some kind of graphical interface knows, its a total nightmare! But one thing I did know, is that making a darts board in Illustrator isn't much different from creating a pie chart : )

I'd also just read a great article by Chris Coyier about using SVG's, but what had really caught my attention at the time of reading was the fact that you could select different paths using jQuery - which was exactly what I wanted! I could do away with rectangular divs with png background images - really important for registering where the user clicked the mouse.

And the best bit of anything Gareth needs doing, it only ever has to work in Chrome! I knocked up the darts board pretty quickly, then named every single layer in Illustrator super neatly and accurately. Check out the finished product here:

http://djave.co.uk/free-svg-dartboard/

 


Ends:

Favicons

I was recently making a favicon for the guys at Twist Media. I bought myself a book recently called The Icon Handbook. Its full of really beautifully crafted icons and gives you a new appreciation for these little poems (to steal the description from the first pages of the book). It covers some of the techniques for getting a full size logo and crunching it down to really small, without losing quality.

Anyway, here is my first attempt at really trying to make the text on a 32x32 icon stand out, before and after:

Before favicon   After favicon

The simplest way to create your own wordpress gallery

Using the wordpress gallery shortcode

Customise wordpress' built in gallery

The wordpress built-in gallery is awesome, but I recently needed to customise it. I came across a very comprehensive tutorial over here shibashake.com, but it just got too complicated.

The gallery function basically outputs some code that looks like [gallery ids="1,2,3"]. I just needed to grab these.

// Remove the shortcode function that is already there
remove_shortcode('gallery');
// Add our new one
add_shortcode('gallery', 'djave_gallery_shortcode');

// Define the new gallery function
function djave_gallery_shortcode($atts) {
	// Define some variables
	global $post;
	$retour;
	// Grab the shortcode atts - the important one here is 'ids'
	// Also, set a default image size
	extract(shortcode_atts(array(
		'id' => $post->ID,
		'ids' => "",
		'image_size' => 'medium',
	), $atts));
	// Turn the ids into an array we can loop over
	$image_ids = explode(",", $ids);
	
	// Loop over the array
	foreach($image_ids as $image_id):
		// Grab each image attachment
		$img = wp_get_attachment_image($image_id, $image_size, false);
		// Add it to the return data
		$retour .= $img;
	endforeach;

	// Return that data!
	return $retour;
}

Wrap tags or divs around images in Wordpress gallery

You can add any styling you like to the gallery inside of that foreach loop - like wrapping the images with divs or adding the captions, and you could even call it a second time if you wanted to add thumbnails or reuse the same images.