Pixel-perfect webpages with just CSS

Pixel-perfect webpages with just CSS

I decided to build my own little tool using nothing but HTML & CSS...

When I first started in web design I had no idea about the different tools available and the different tips & tricks out there that would have made my job easier. Back then I would write web pages by eye, by looking at the design for the page and then matching it as closely as I could by doing nothing other than looking back and forth between the two over and over again.

Since then I have tried a few different tools for making this process as quick and as painless as possible. These tools work by allowing you to overlay your design on top of your HTML, and would either make the design transparent so you can see through it, or allow you to toggle the design on and off. Using these tools made it easy to see just how far I was off when sizing and positioning page elements, and my pages were far truer to the original design than they would have been if had been writing them by eye.

Pixel Perfect

I first discovered Pixel Perfect, an add-on for Firebug, which itself is an add-on for Firefox. It’s probably the most well-known and successful tool for overlaying images over webpages. At first I was happy with it – it was the first tool I tried and I loved the ability to see exactly where everything on the page should be. While it did everything, being a part of software that was also a part of software made it feel clunky and slow. I had to open Firebug to get to it, and Firebug wasn’t always the most responsive add-on out there. The interface wasn’t pretty, and I found managing multiple overlays not very user-friendly.

Still, the other features were good. I could position the image by first dragging it roughly into position and then click buttons to move it along both X & Y axes one pixel at a time to get it perfect. Once in position I could lock it there so I didn’t accidentally move it – a handy feature. It also allowed me to easily adjust the transparency of the image.

The first problem with it was the fact that I had to keep putting the overlay image back every time I refreshed the page, which was a little annoying. I would refresh the page a lot when aligning elements, and having to keep turning the image back on slowed me down. The second problem was the fact that since Firebug 1.10, Pixel Perfect doesn’t work. It was this that made me decide to look at other options rather than wait for it to be fixed.

PerfectPixel

I next tried PefectPixel for Google Chrome, which is Chome’s top extension for overlaying images as Pixel Perfect is currently only for Firefox. I didn’t stay with PerfectPixel for long – the interface was slower & less responsive than Pixel Perfect’s, and you couldn’t lock an image in place. It was worse than Pixel Perfect in another way. You also lost the overlay when you refreshed the page, but atleast with Pixel Perfect Firebug would reappear automatically and you’d be able to turn the image back on with one click. With PerfectPixel you also had to open the interface before you could toggle the image back on – a large waste of time when repeated a lot.

After feeling let down by both of these solutions, I decided to build my own little tool using nothing but HTML & CSS, and here it is:

.designOverlay { 
    position: absolute; left: 0; top: 0; 
    width: 100%; height: 101%; 
    text-align: center; 
}
.designOverlay a { 
    position: fixed; 
    z-index: 6000; 
    width: 40px; height: 40px; 
}
.designOverlay img { 
    position: relative; 
    z-index: 5000; 
    opacity: 0.3; 
}
.overlay-off { 
    left: 55px; top: 15px; 
    background: rgba(113,19,19,0.5); 
}
.overlay-on { 
    left: 15px; top: 15px; 
    background: rgba(19,112,20,0.5); 
}
#no-overlay:target { 
    display: none; 
}
<div class="designOverlay">
    <a class="overlay-off" href="#no-overlay"></a>
    <img id="no-overlay" src="image.png" alt="" />
    <a class="overlay-on" href="#"></a>
</div>

This small amount of code allows you to insert your design onto the page on top of your HTML. It will be positioned in the centre of your browser automatically, no matter how wide it is, and will be at 30% opacity, which is my preffered level of opacity for this. Feel free to change any of this yourself. The great thing about this method is that you can customise it to get it exactly how you want it. It’s also incredible quick and easy to use, and the image will persist no matter how many times you refresh your browser. Simply add it to your pages and go. I add it to the header file that is then included on every page type to make it super easy to add and then remove later when it’s no longer needed.

The code will also place two buttons in the top-left corner of the browser that will allow you to switch the design on and off, using the :target CSS selector. This allows you to toggle the image on and off, and works by adding a tag to the address bar and then doing 2 different actions depending on whether the tag is there or not. In this case, it’s either showing the image or not showing it.

The container around the image is set to 101% of your browser’s height, to ensure that the scroll bar is visible when the image is turned off. This avoids the potential issue of your HTML jumping left and right based on whether the bar is there or not.

Please recommend us if you found this article helpful:
Samuel Claxon
Author
Samuel Claxon
Developer

Published:
20th July, 2012

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all