View RSS Feed

All Blog Entries

  1. Responsive Modal Gallery with keyboard nav controls (CSS3/JS)

    In an effort to make my previous (version 1) CSS-only Modal Gallery more user-friendly, I've now created a version that incorporates simple keyboard navigation from inside the modal overlay, using a small amount of JavaScript.

    Please see version 3 - the Responsive CSS3 Modal Gallery (+ additional JavaScript keyboard controls)

    This version of the gallery works a little more like how modern image galleries are expected to work (or rather, how users have learned to expect ...
  2. Responsive CSS3 Modal Gallery (no JavaScript)

    The latest CSS-only offering is my attempt at an image gallery where image enlargements open in a modal window. It was inspired by a tutorial on modal popups and uses the :target selector in CSS to match the hash at the end of an URL with the id of a corresponding element.

    The logic for this (taken from the modal popups tutorial) is that a hashed URL can be wrapped around a small thumb image, which matches the id of an image enlargement in a modal overlay div. When the hashed small ...

    Updated 04-28-2014 at 12:39 PM by Beverleyh

    Categories
    CSS related
  3. Responsive CSS3 Any Content Slider (no JavaScript)

    Fiddling some more with CSS transitions and the checkbox hack to emulate click events via CSS, I tried my hand at making a CSS-only content slider.

    Initially I attempted to make it with checkboxes, but due to the behaviour of multiple checkboxes being checkable at the same time (which totally mungs up the idea for a slider where you only want one slide activated), I turned to radio buttons instead.

    The key difference between radios and checkboxes is that only one radio ...

    Updated 11-27-2014 at 01:27 PM by Beverleyh (basic support added for IE7)

    Categories
    CSS related
  4. Removing the YouTube distractions by playing YouTube through another domain

    Hello everyone,

    I created a file whose URL can be used to play YouTube videos without all the distractions.

    Example: http://www.mesdomaines.nu/cleanyoutu...ide=0&vq=large

    (It's a long URL, but a standard YouTube-URL for obtaining a similar result would not be much smaller).

    If you ...

    Updated 04-06-2014 at 06:28 PM by molendijk (Script revisions)

    Categories
    Uncategorized
  5. Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)

    I decided to work more on the previous "CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)" code so that it can be used on desktop as well as mobile.

    So here is the "Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)".

    It's similar to the previous menu in that it uses the same side-docked, off-canvass menu pattern for mobile, but this new version now also sports a horizontal, dropdown menu bar in "desktop" view, ...

    Updated 06-03-2014 at 09:28 PM by Beverleyh

    Categories
    CSS related
Page 4 of 19 FirstFirst ... 2345614 ... LastLast