View RSS Feed

Recent Blogs Posts

  1. IE8 Selectivizr support for Responsive Modal Gallery

    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 01-28-2015 at 12:43 PM by Beverleyh

    Categories
    CSS related , Web Design issues
  2. Beat the 300ms Delay on Touch, and Close Sub-Menus

    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 ...
  3. Paginated Responsive Modal Gallery (PHP/CSS3/JS)

    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;

    Now, so far, this gallery has only ...
  4. Responsive Multi-Level, Fly-Out Menu

    The earlier version of this menu utilises the same checkbox hack and "off-canvass" pattern in desktop view as it does in mobile - apart from being always-visible on a large screen, it looks and works the same, regardless of what device is accessing it (modern browsers and IE9+).

    Thanks to the increasing popularity of touch devices, where tappable/clickable triggers now seem more favourable than hover actions, this has the benefit of consistency. Minus the initial trigger ...

    Updated 06-04-2014 at 10:43 AM by Beverleyh

    Categories
    CSS related
  5. Responsive Multi-Level, Push/Slide Menu

    I was emailed the other day by somebody asking if my earlier CSS-Only Multi-Level, Off-Canvass Mobile Menu could be visible on desktop too.

    At its most basic level, the following CSS inside of a desktop media query will do that;
    Code:
    #menu { left:0 }
    .container { padding-left:13.75em }
    Except this stumps IE8 and under because of no media query support and no checkbox hack support. So I set to work on creating a version that is visible (and works) on desktop and older browsers. ...

    Updated 03-04-2015 at 04:43 PM by Beverleyh

    Categories
    CSS related
Page 1 of 2 12 LastLast