View RSS Feed

Recent Blogs Posts

  1. Circular Segment Pie Chart Menu (experimental)

    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)
    ...
  2. Opting Out of Responsive Design (choosing desktop layouts on mobile)

    Responsive web design (done well) allows users to achieve their goals on any internet accessible device, but what if they *want* to view the fixed width desktop version of a website, even on mobile?

    This post comes at a time when responsive web design interest is piquing - certainly here on DD - probably the result of those emails we've been receiving via Google Webmaster Tools, that basically tell us how "X % of your web pages do not provide an optimal mobile experience... your ...
  3. A close button (and text) on top of a fluid centered image II

    I learned a few things after I posted this on my blog about putting a close button on top of centered fluid images.
    I used jquery and translate in CSS transforms there to do the job. But I found that it can also be done with the help of a combination of window.innerWidth/Height and element.clientWidth/Height. As window.innerWidth/Height and element.clientWidth/Height are also supported by older browser, a technique using these methods must be preferred. Demos and explanations here.

    Updated 04-10-2015 at 10:52 PM by molendijk

    Categories
    Uncategorized
  4. A close button on top of a fluid centered image

    EDIT: see this for an alternative (better?) method..
    CLICK HERE IF YOU WANT TO GO STRAIGHT AWAY TO THE DEMO PAGE.
    The translate() method used inside the HTML-code below moves both a (super) div-containing-a-close-buttom (id: 'the_div') and an image (id: 'the_img') to the center of the window. The jquery-onload in the image ensures that the width of the div equals the width of the image. This is a requirement if we want to get the button (in the div) at the right position in front of ...

    Updated 04-10-2015 at 10:47 PM by molendijk

    Categories
    Uncategorized
  5. 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
Page 1 of 21 12311 ... LastLast