View RSS Feed

Recent Blogs Posts

  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 11:39 AM by Beverleyh

    Categories
    CSS related
  3. CSS selector wish list

    With CSS3, we have gotten many new pseudo selectors that give us a great deal of options. However, the short list of combinator selectors has only been increased from 3 to 4:
    Code:
    foo bar
    foo>bar
    foo+bar
    foo~bar
    The first combinator is the most used selector and selects any element bar that is a descendant of foo. The second combinator selects any element bar that is a child (direct descendant) of foo. The third combinator selects any element bar that is an adjacent ...