350s gallery

Aug 12, 2011

I randomly made this little webpage to showcase a lot of 350×200 openers I made for online articles 🙂

It’s a pretty simple script built on top of jquery:

<style type="text/css">
body {
    margin:0;
    overflow:hidden;
}
</style>
<script type="text/javascript">
$(function(){
    $("div").mousemove(function(e){
      height = $(window).height();
        width = $(window).width();
        percent = e.clientY * 100 / height;
        move = ($("#box").height()-height) * percent / 100;
        $("body").scrollTop(move);
 
        percent2 = e.clientX * 100 / width;
        move2 = ($("#box").width()-width) * percent2 / 100;
        $("body").scrollLeft(move2);
    });
});
</script>

The CSS hides the scrollbars and removes the default margins from the body.

Then the Javascipt adds an event handler that will fire every time the mouse moves on top of a div – which is always since the page is pretty much just one giant div. After that it determines what percent of the window you cursor is currently sitting at, and then translates that to the same percentage of the size of that giant div and scrolls the window accordingly. So regardless of the size of the window you’ll be able to move it around to see all the contents of the div.

Scroll around the box below to see the random goodness:

Convert a website to PDF

Aug 9, 2011

Ever come across a website and wish you could save it for later? For offline reading on an iPod – or just to save it for prosperity? The you’re in luck 🙂 When I wanted to save a copy of an online tutorial I looked up the site Web 2 PDF. It was easy to use and only took a few seconds to turn an entire web page into a PDF. I was impressed by how close it looked to the original and it kept all of the text selectable.

If you’re lucky enough to have a full version of Acrobat you can even combine all the PDFs together to make your very own DRM free eBook 🙂

http://www.web2pdfconvert.com/

Japanese Color Guide

Aug 4, 2011

While attending my online Japanese class one of the other students shared a link to the lovely Japanese Color Guide site. What is cool about this site is that it has translations for a heap of different colors next to a sample of the color itself. They don’t have every color under the sun, but it’s a nice resource if you’ve ever wondered how to say vermillion in Japanese (Syu-iro by the way.)

http://www.color-guide.com/e_index.shtml

Boag World Podcast

Jul 26, 2011

I’ve been on the lookout for a designer/developer podcast to help me keep up with new trends and improve my knowledge of the industry. While trying out the Sitepoint Podcast they had Paul Boag as a guest on one of their older episodes and he spoke about his own Podcast, Boagworld, so I thought I’d mosey on over there and give it a try.

This podcast first started as your normal weekly deal, but recently the format has been completely re-hauled to be “season” based. Where it has a group of episodes all revolving around one main topic. Currently they are Podcasting the entire process of redesigning the website. I love how transparent they’re being about the process, and it’s really great to learn about each step in detail. I’d highly recommend giving it a listen 🙂

http://boagworld.com/

Pure CSS GUI icons

Jul 21, 2011

While I was listening to Sitepoint’s 118th Podcast the other day and they mentioned a very interesting CSS 3 experiment. Sadly this won’t be working with IE just yet so it’s not something we can put to use right away, but the idea of Pure CSS icons is quite neat 🙂 The use of pseudo elements to create the icons out of pure CSS is truly innovative and makes me start to think about all the code that could be cleaned up by taking advantage of pseudo elements as opposed to adding in more DIVs to get certain background and border effects…

Regardless, it’s an interesting peek in to what we’ll be able to achieve once CSS 3 is fully supported

http://nicolasgallagher.com/pure-css-gui-icons/demo/