View RSS Feed

CSS related

  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. 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
  4. 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
  5. Putting text on top of a video

    In July 2010 an enhancement to the YouTube video embed capability became available through a new embed code style. This style uses <iframe> and looks like this:
    <iframe src="http://www.youtube.com/embed/VIDEO_ID?" frameborder="0"></iframe>


    After VIDEO_ID? we can add the normal parameters, like this:
    <iframe src="http://www.youtube.com/embed/VIDEO_ID?start=0&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1&amp;vq=large"
    ...

    Updated 10-14-2012 at 06:10 PM by molendijk

    Categories
    JavaScript & Ajax , CSS related
Page 2 of 3 FirstFirst 123 LastLast