< Pete Goodman Web developer >

Labs - A load of bollocks

Sunday 26th September 2010, 16:50

A site to display animated gifs full-screen in 'modern' browsers that support CSS background-size. This new property means it's possible to automatically scale a background image as large as possible within an available area.

A load of bollocks screensaver

Here's an example of two HTML blocks, one using this new selector to scale up an image, and one not.

 
<div class="clearfix">
    <div class="block" id="contain"></div>
    <div class="block"></div>
</div>

 
.block {
    float:left;
    width:225px;
    height:225px;
    background: url(http://aloadofbollocks.com/_includes/img/bombs/booth-gears-small.gif) #000 center center no-repeat;
}
#contain {
    -moz-background-size: contain;
    background-size: contain;
    margin-right:25px;
}

The site is split into two parts. When an individual gif is selected it shows a loading icon, which is swapped out when the proper image has finished loading. An example: http://aloadofbollocks.com/monkey-riding-goat

When visiting the home page the latest 10 gifs are displayed. It's possible to reorder these by popularity, or pull out the next 10 (both via ajax).

It uses a custom config file and the PHP parse_ini_file function to check the IP address of the visitor against a preset list, to see whether the user is able to add a new gif.

The add form uses live form validation on blur and after some content has been typed.

Once an image url has been entered, it uses the PHP getimagesize function to test the mimetype to see if it is a valid gif.

It uses Zero clipboard to allow links to be copied to the clipboard with a simple click.

It has custom fonts from font squirrel and a mobile stylesheet optimised for iphone and android.

The source code for this site is available from Github.

Update - 16/08/2011:

Now available on Twitter - when a new gif is added, it tweets a link automatically...

Comments

Be the first person to comment on this lab...

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.