I released a jQuery plugin a couple of days ago and I haven’t had time to write about it here until now. The plugin is based on a slightly crazy idea, but it has been getting some good response on Forrst and Twitter (my follower count has tripled quadrupled since the release).

Most people seem to think that it’s a pretty cool plugin, but struggle in coming up with good practical uses of it. It might not be of much use on any “serious” website, but I think it can create quite a nice effect on personal portfolios and presentation pages, if used creatively.

Read More

Tweet buttons are a great way to spread your content to the public. Twitter provides an easy way to include their button on your site, but this comes at the cost of not having a very customizable style.

The button is served inside an iframe, which restricts CSS and Javascript access. This can make it hard to get the button to fit in with the rest of the design. What’s even worse is that while the button wrapper is set at a fixed width, the counter inside isn’t. Once the page starts getting more tweets and the counter increases, the width of the button expands, but since the parent iframe has a fixed width, it’s impossible for us to know the actual width of the button.

Something that can also be seen as an issue is the size (46.5 kB) of the widget.js script that Twitter injects with the default button. In most cases though, this script file should already be in the visitor’s cache.

Read More

Out of curiosity, I started coding on a script to get the accent colors of external websites, kind of like Chrome does it in the most visited sites thumbnails. The script can be used to automatically give your outgoing links appropriate colors and make them look more interesting.

The script works by calculating the dominant color of the site’s favicon, which usually works pretty well to determine the web page’s signature color. I’m using a canvas object to analyze the pixel data, which restricts the browser suppport to more modern browsers. It would be possible to widen the browser support by parsing the image file data directly, but considering that favicons come in many different formats, this would require too much work and code for such a small visual effect.

CORS is used to connect to getFavicon, a service by Jason Cartwright that retrieves the favicon of any given URL. There is also a PHP proxy file that you can use on your own server as fallback for browsers without CORS support.

I’ve created a pretty demo page for the script, check it out below.

Demo

The system clipboard is a feature that most of us heavy computer users probably couldn’t survive a day without. While it’s mostly used for copying and pasting text, images can also be stored in the clipboard, by for example using the print screen key. Today I want to share with you how you can access these images with a bit of Javascript code. This works in modern versions of Chrome and Firefox, but the technique differs a bit between them.
Read More

I’ve been trying out different things that you can do with the CSS mask property lately. With a CSS mask, you can mask or clip any element to a desired shape. The mask is either a PNG image, or an SVG image.

I coupled this with the CSS transform and transition properties, and came up with a pretty cool concept for an image gallery.

I’ve put together a demo for Chrome and Webkit nightly builds. Firefox also supports the CSS mask property, but doesn’t seem to play well with rotated masked images, so I’ve only used -webkit prefixes for this demo.

I’ll run through all the different steps in making this gallery wheel below, starting with the markup.

Read More