#1

Vertically and Horizontally centering using css is probably easier than you think, sure everyone knows how to horizontally center using the old 0 auto margin trick. To get an image/object exactly centered using css, simply apply a negative top margin of half the images height, and a negative left margin of half the images width. For example:

#centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -150px;
}

#2

Have you ever come across a great colour that you just don’t know what it’s hex code is?

Colorzilla is a great firefox add-on, the color picker sits discretely at the bottom left status bar of the browser, to use it just simply click the eye dropper icon and place the ‘cross hair’ any where in the browser and the 6 digit hex code will be displayed. Then right click the eye dropper icon and select cody “#178271″ hex code. I use Colorzilla all the time as 9 times out of 10 the color that I want to know will be on a website therefore there is no need to take a screen shot and take it into Photoshop.

#3

Have you ever come across a killer font you just don’t know the name of well here is a nifty web service that will take an images of the font, analyze the image and give you a list of fonts that match. It’s great! This web service is called WhatTheFont.com

The first step is uploading an image of the font or you can give the link to the image location, for this example I will be using the famous google logo.

Next it will break the text up into individual characters, if it has analyzed a character wrong you can change it manually.

The service will then take the information/images and compare them to the database and provide you with a list fonts that match and their names.

#4

A quick tip for choosing a blending mode in Photoshop on a mac is to use the hot keys SHIFT – + to scroll through the blending modes + will scroll forwards and - backwards.

#5

For this weeks last tip here is a useful jQuery content slider, sure there are loads of sliders already out there however this one is all of them in one with other cool features including slide buttons, tabs, auto playing and a start/stop button and many more, plus I think its one of the best looking one out there. It was created by Chris Coyier, Remy Sharp and Douglas Neiner.

That wraps it up for this weeks quick tips, what did you think of them? leave your thoughts below, don’t hesitate to suggest a quick tip for next weeks article.

Similar Posts

• Creating A Simple Landing Page From PSD For New Sites
• Quick Tips Of The Week – December 23rd 2009
• Social Icons With Cool jQuery Tooltip
• Increasing Your Usability, Productivity And Skills As A Designer
• The Designers Yard Logo Design Process – Photoshop Tutorial