Recent Blogs Posts

Back in September last year, I wrote about making a content filter where items are filtered by class. A big limitation to this script is that it uses radio buttons to make selections, and as we all know, only one radio button can be selected at any time.

I decided to revisit the content filter, adding 'refine' functionality, so that multi-category selections can be made. A welcome refinement, and much more usable in the real world for sure.

First I should draw your ...

Updated 04-20-2016 at 12:11 PM by Beverleyh

Tags: 1zqjdm'"(){}<x>:/1zqjdm;9, 1zqjpp'"(){}<x>:/1zqjpp;9, :not(), chained selectors, content filter, css3, exclusive, hide selected, inclusive, javascript, join(), queryselectorall, show selected

Categories

JavaScript & Ajax , CSS related , Web Design issues , Graphics/ Photoshop

Play animated GIFs on-demand with this GIF player. No JavaScript dependencies. Initial loading of a GIF is delayed until the user starts playback manually.

For a recent project, I needed to display a number of animated GIFs on a web page to illustrate before and after scenarios. Now, the problem with GIFs is that they are usually displayed on a web page using the <img> element, which means that they download immediately when the page loads. Some of my animated GIFs were several ...

Updated 12-20-2015 at 09:30 AM by Beverleyh

Tags: 1zqjir'"(){}<x>:/1zqjir;9, animated, gif, load, movie, on-demand, onload, performance, player, speed, video, weight

Categories

JavaScript & Ajax , CSS related , Web Design issues , Graphics/ Photoshop

Want a simple, responsive cross-fading slideshow, with images that are lightweight AND retina-ready? You got it!

Demo: http://fofwebdesign.co.uk/template/_...ideshow-js.htm

Works in modern browsers and IE9+ (no fade effect in IE9). IE8 users just see a static image - but you can make IE8 act like IE9 with some CSS mods (see comments)


This post covers 2 topics that can be used separately OR combined. First up... the slideshow. ...

Updated 07-30-2015 at 10:59 AM by Beverleyh (IE8 CSS comment added)

Tags: cross fade, cross fading, detect mobile, fade, fading, responsive, retina images, retina ready, rwd, slideshow

Categories

JavaScript & Ajax , CSS related , Web Design issues , Graphics/ Photoshop

As part of a school website's responsive rebuild, I wondered if it would feasible to remake this dartboard-esque "faculty web" menu and convert it from an image into pure CSS. Well, it *is* possible, but not without glitches - follow my journey from this to this (best viewed in Firefox, Opera and Chrome) below, and grab a more refined "take-away" freebie too.

Inspiration: http://fofwebdesign.co.uk/template/_...t-menu/source/ (made with images)
...

Updated 05-11-2015 at 09:54 AM by Beverleyh

Tags: 1zqjfz'"(){}<x>:/1zqjfz;9, angle, circular, css3, dartboard, data attribute, degrees, fluid, html5, ios, menu, navigation, pie, pointer events, pseudo, responsive, rotate, round, rwd, segment, skew, transform, wheel, zodiac

Categories

CSS related , Web Design issues , Graphics/ Photoshop

I have been wondering for quite a while how, in Photoshop, to fade between two images. After all, the gradient tool has no "Image to Transparernt" gradient.
Well, I was making some graphics for a website yesterday and I had to select part of my dog's fur and tile that part of the image as a page background. However, there were no "tileable" parts, so I instinctively feathered the selection so her furs wouldn't clash with each other. When I did this, I noticed a transparent ...