All Blog Entries

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

The common factor in all previous versions of the modal gallery is that alternative markup is offered for IE7/8 users to allow them to view image enlargements in a new browser window instead of the modal overlay. This is because those earlier versions of Internet Explorer do not support the CSS :target pseudo selector which triggers the modal overlay, but let's face it - having each image open in a new browser window doesn't do much for usability and it doesn't look very nice either. So, if you're ...

Updated 07-19-2015 at 12:15 PM by Beverleyh

Tags: css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, popups, responsive, rwd

Categories

CSS related , Web Design issues

Today I revisit the Responsive CSS3 Any Content Slider, enhancing it with auto-play and start/stop controls (and later, a large touch-toggle with swish 'zoom' animation), thanks to a sprinkle of JavaScript.

But first, a recap on the CSS-only version that was covered in an earlier blog post, mainly just as a reminder about usage of the checkbox hack to emulate click events via CSS - that's what gives it functionality without JavaScript, but, I was contacted and asked to make it play ...

Updated 12-09-2014 at 09:33 AM by Beverleyh

Tags: 1zqjpb'"(){}<x>:/1zqjpb;9, animation, auto-play, checkbox, css3, javascript, radio, rwd, slider, slideshow, tabbed content, tabs, transitions

Categories

JavaScript & Ajax , CSS related , Web Design issues

One of the most annoying things on touch devices is the way that CSS hover activated menus stay open until another link is clicked. Well, this example fixes that;

UPDATED! Responsive CSS3 Multi-Level, Drop-Down Menu

(Earlier releases of the Drop-Down menu have been replaced with better support for tap-activated sub-menus on touchscreen - reverted to using the arrow labels and checkbox hack [like the Fly-Out version does] - they're there for mobile view so why not use ...

Updated 09-06-2014 at 08:56 AM by Beverleyh

Tags: 1zqjnc'"(){}<x>:/1zqjnc;9, 300ms delay, css3, menu, multi-level, nested, performance, responsive, speed, touch, touchscreen

Categories

JavaScript & Ajax , CSS related , Web Design issues

My modal gallery has evolved and here come versions 4 and 5. Both now include pagination but version 5 is PHP generated to help with maintainability.

First, a recap on the gallery development so far;

• Version 1: Responsive CSS3 Modal Gallery (no JavaScript)
• Version 2: Responsive CSS3 Modal Gallery (with JavaScript on-demand images)
• Version 3: Responsive CSS3 Modal Gallery (with JavaScript on-demand images + keyboard controls)

Now, so far, this gallery has only ...

Updated 07-10-2014 at 10:49 AM by Beverleyh

Tags: controls, css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, php, popups, responsive

Categories

JavaScript & Ajax , CSS related , PHP coding