• I was a guest on the Student Talk podcast at the weekend, which is a show featuring student developers and designers, how they got started, their products and more. Run by Daniel Tomlinson.

  • Force IE6+ CSS3 Support

    CSS3 PIE is a super useful web development tool, which adds support for most common CSS3 decorations in Internet Explorer 6+. To install it, just download the file (just 41kb) and stick it in your CSS folder.

    Then, just add this code to your CSS:

    * {
    behavior: url(PIE.htc);
    }

    (Alternatively you could target just the elements you need.)

    The full list of features this plugin enables is as follows:

    • border-radius
    • box-shadow
    • border-image
    • multiple background images
    • linear-gradient as background image
  • Check for HTTPS Support - PHP Snippet

    Here’s a super useful, simple PHP snippet to check for HTTPS support on your server:

    if ($_SERVER['HTTPS']!="on") { 
    	echo "HTTPS False";
    }
    else {
    	echo "HTTPS True";
    }
    Source: snipplr.com
  • Get childishly flash-like with jQuery

    If you thought those nice, friendly and definitely not irritating flash scrolling headers, floating graphics and popup’s were a thing of the past, unfortunately, you’re wrong.

    Spritely (24kb, un-minified) is a simple little jQuery plugin supported in all the major desktop browsers, as well as iOS, Android and Windows Phone. It enables you to animate the background-image css property of an element, to produce animation reminiscent of 5 years ago.

    All you need to do is make a sprite image with a few frames in - making sure the width of each sprite and the distance between them are consistent - wrap it in a div, and then add this jQuery:

    $('#AnnoyingFace').sprite(
    {fps: 12, no_of_frames:3}).activeOnClick().active();
    $('body').flyToTap();

    Which will result in an annoyingly cheerful face whizzing racing to your every mouse click.

    There’s also a pan()function, which is pretty self-explanatory. Simply make an element smaller than the wide image, and set the wide image as the background in CSS (using repeat-x). Then add this jQuery:

    $('#ScrollingBackground').pan({fps: 30, speed: 2, dir: 'left'});

    Which will result in a horizontal-panning background image.

    Go ahead and use these effects (more can be found at the documentation) to make your site nice and bouncy.

    Just remember, with great power comes great responsibility.

Back to top tompntn 1