Latest articles

Quickly compare your HTML with the design

When I develop a website I always try to make it look pixel perfect. To do this I previously had to go through these steps to compare my HTML with the design (in 99% of the cases a PSD):

  • Take a screenshot of the webpage
  • Open the screenshot in Photoshop
  • Drag the screenshot to the design file
  • Make it the top layer
  • Take the opacity down to 50%
  • Compare and measure pixels

This easily becomes really time consuming since I have to do this hundreds times during the development.

Looking for a better solution

I thought it would be cool if I could just lower the opacity of my browser instead of having to compare with screenshots. After lots of Googling I found this application called Afloat ( http://infinite-labs.net/afloat/ ). It’s main features are not the opacity thing and it’s lacking some of the features I want. But still it’s a hundred times faster than my previous comparing method.

This application can put the opacity down on any Cocoa application so it works for Chrome and Safari, but not for Firefox. This is fine for me though since my main develop browser is Chrome. If it’s not your developer browser yet, Paul Irish has a few demos on Chromes developer tools. This one is essential.

What would be even better?

I would want an application just like Afloat but more suited to me needs. First of all: the only main feature I want is the opacity thing – remove the rest. Then I would like to have the ability to nudge the browser window pixel by pixel with my keyboard. The hardest part is always to get it exactly on top on the design.

The best would be if this was built as a chrome extension, but I don’t think extensions can control the application window. Perhaps in the future :)

Tags: ,
Comments: 1

Printing CSS background images

Normally I try to avoid using the <img> tag when I display anything that isn’t a picture. This is how I would do a logotype for example:

1
<h1 id="logotype"><a href="/" class="ir">My Dummy Title</a></h1>
1
2
.ir { display: block; text-indent: -9999px; overflow: hidden; }
#logotype a { width: 100px; height: 100px; background: url('../images/general/logotype.png'); }

.ir is my class for image replacement, which I usually end up using multiple times in one site

The problem with printing

The problem happens when I want to print the page, but have my logotype at the paper. Normally, printing strips every background and background image of the page. This is good because it will save some inc in your printer, but sometimes it can be of more importance to keep the identity of a webpage.

The solution 1

My commander-in-chief Vincent ( http://boiardt.se ) suggested me to try a technique to get around this, using the :before pseudo selector to insert a image before the logotype element. I thought it was genius so I instantly tried this:

1
2
3
4
@media print {
#logotype { position: relative; }
#logotype:before { content: url('../images/general/logotype.png'); position: absolute; left: 0; top: 0; width: 100px; height: 100px; }
}

It worked – great stuff! Now I headed over to my virtual machine to try it out in IE. Nothing showed in either version 7, 8 or 9. Buu! I decided to not think about IE for a moment.

Improved solution

Thinking just one small step further, I came up with an ever nicer solution that didn’t involve any pseudo selectors. And it’s also a lot cleaner and clear way to do it. Happy one-liner!

1
2
3
@media print {
#logotype a { content: url('../images/general/logotype.png'); }
}

A JavaScript (jQuery) solution for IE

I failed to come up with a CSS solution for IE, but successfully came up with a JavaScript solution. IE offers the onbeforeprint event which we can use to make some magic:

1
2
3
4
5
6
7
8
function replace_bg(){
  var el = $('#logotype a');
  el.html('<img src=' + el.css('background-image').slice(4, -1) + '>').css('text-indent', 0);
}
 
$(function() {
  window.onbeforeprint=replace_bg;
});

Demo

http://labs.fbergman.se/print-bg

Still I have not come up for CSS-only solution for IE. If anyone knows how to beat it, please let me and the world know about it!

Tags:
Comments: 1

Computed typography

I come across alot of great web typography in my never ending journey through internet, and sometimes I’m just too lazy to bring up the web inspector to see how it’s actually made with CSS. Inspired by the WhatFont Bookmarklet, I created this bookmarklet for anyone to see the computed typography on a webpage. It has never been as easy to copy some great typography out there.

Demo

Click it, and drag it to your bookmarks bar if you like it:
Computed typography

Repository

Yeah, it’s on GitHub
https://github.com/frederfred/Computed-typography

Tags: , ,
Comments: 3

jQuery flide – A basic slideshow plugin

I have always liked to create my own code, and not just grab someone else scripts without knowing whats really going on. I benefit from it in several ways:

  • Education – I learn alot by writing everything myself.
  • Total control – Some plugins offers a lot of customization and some offer none. The ones that offers alot leaves you with alot of potentially unnecessary code, and the ones with no options leaves you with too little control. Booth scenarios are far from ideal.
  • It’s fun! I like what I do and I like those small tweaks that just makes it a liiitle bit better.

Demo

I have put up a basic demo site where you can see how it works. I tried to make it as easy as possible for anyone to build upon it. No fancy styling. http://labs.fbergman.se/flide/

Repository

Clone it or fork it. It’s a public repository at GitHub which you find here: https://github.com/frederfred/jQuery-flide

Tags: , ,
Comments: 0

Capture screen color to clipboard in mac os x

A few days ago, I was looking for a tool that could copy the color from a pixel into the clipboard. I was tired of this procedure:

  1. Take a screenshot a specific area with cmd+shift+4
  2. Open it with Photoshop
  3. Zoom to the picture
  4. Use the eyedropper tool to grab a specific color
  5. Open the color picker
  6. Copy the hex-code from the color picker

Going native

I have previously used the native DigitalColor Meter application (found in Applications/Utilities) and tried to memorize the values. I finally found the magic shortcut for copying the values as text: cmd+shift+c! This will save me alot of time in the future, and hopefully someone else too.

Remember to change the output value to what you prefer in the dropdown. (I use RGB as Hex Value, 8bit 99% of the time).

DigitalColor Meter

Pasting into TextMate

One negative thing when you copy the color is that it will always be capitals. I prefer to write my hex-codes in lowercase, so when you paste #C0FFEE, just select it and use the shortcut ctrl+shift+u to convert the selection lowercase

Tags: , ,
Comments: 1

Avoid z-index problems by keeping them together

The problem

A common misstake I see in CSS is that people tend to use really high z-indexes. I often see this: z-index: 9999; This is not incorrect, but it’s very confusing, since it’s never(?) 9999 layers on a web page.

Keep z-indexes together

A simple trick to avoid a z-index mess is to group your z-index and keep them all at the same place. This gives you a great overview and you can easily just add 1 to the highest element to be on top.

Here is what it could look like:

1
2
3
4
5
6
7
/* @group z-index */
.nav	{ z-index: 5; }
.divider	{ z-index: 4; }
#flutter .intro	{ z-index: 3; }
#flutter .arrow	{ z-index: 2; }
#loader	{ z-index: 1; }
/* @end */

If you still like to use high indexes, check here for how high you can go!

Tags: ,
Comments: 0

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Comments: 1