View RSS Feed

All Blog Entries

  1. 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
  2. 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 ...
    Categories
    CSS related
  3. 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 05:28 PM by molendijk (Script revisions)

    Categories
    Uncategorized
  4. 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 08:28 PM by Beverleyh

    Categories
    CSS related
  5. CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)

    I recently worked on a mobile forum with off-canvass/slide-out menu. I wanted to keep the project as small and lightweight as possible, so I chose to snub JavaScript and work on a CSS-only solution. The menu was just a simple 1-level effort using the checkbox hack (where you use the :checked state of a checkbox and a connected label to trigger something with CSS), but it was an excuse for me to play around with CSS3 transitions. That example is here: http://m.jemcon.org/phpBB3/

    Anyway, ...

    Updated 04-14-2014 at 10:11 AM by Beverleyh

    Categories
    CSS related
Page 3 of 18 FirstFirst 1234513 ... LastLast