View RSS Feed

Recent Blogs Posts

  1. PHP Stylesheet/Content Switcher with Save Cookie

    Here is a simple PHP script to change stylesheets or load in alternative content (conditional loading), with cookies to store user selection.

    The nice thing about a PHP-based solution over JavaScript content/CSS switchers, is that all the checking and switching is done on the server side, before the web page even finds it's way to the browser, so you don't get any flash of unstyled content. Plus, you can conditionally load HTML or external files (improve performance and save on load ...
  2. 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 ...
  3. 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 ...
  4. 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
  5. 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 ...