Image Gallery with CSS3 Columns and Media Queries

Resize me! I'm a responsive image gallery with a CSS3 flavor ;)

利用技術: モバイル, CSS3, Fonts & Type,

  • 閲覧数 576
  • コメント数 3


Launch it and resize your browser! (I know you want to :D)

This is an experiment using CSS3 columns and media queries to provide an image gallery that responds to the size of the browser. It was created after the idea I got from the homepage of where they use CSS3 columns to show their recent posts with featured images.

Using media queries, this demo shows a different amount of columns according to the size of the viewport (to a maximum of 4 columns, but it is easily extended with a bit of CSS).

Tested on:
-Windows: Firefox, Opera, Chrome
-Linux: Firefox, Chromium
-iPhone: Safari for iOS, Opera Mini
-Android 2.1: stock Android browser

Please let me now if it works on any other configuration.

The demo works on most modern browsers, but even on most versions of Internet Explorer, which lack of support for CSS3 columns and media queries the demo works but shows a single column layout (basic style without applying media queries).

There are some differences in the way browsers render the columns and I have to note that it can show sometimes, for example, the last column with just one image or no images at all (I detected issues with WebKit, where columns are not always well balanced, even when using the "column-fill: balance" property [being balance the default according to the CSS3 Candidate Recommendation 12 April 2011]).

3 件のコメントがあります。

Log in to add your own.

  1. iulian によるコメント

    I have tested your cool experiment on a Windows Vista using Safari and most of the images disappear when you hover over them with the mouse. When you move the mouse out, the image reappears.
    Surprisingly, this is not an issue in IE 8.
  2. jeancarlozapata によるコメント

    Hi iulian and thank you

    Actually when I was testing the demo in Chrome for Windows I had (sometimes) similar flashing-images issues, and they didn't happen in Chromium for Linux, so I guess it's something WebKit-Windows related
  3. linardzb によるコメント

    Hi, Thanks for the awesome gallery! I have a slight problem on displaying the gallery's 4 columns in Chrome, Safari, Opera browsers. Its working in Firefox:). (if you open in others browsers, it does not work).

About this Demo

ソースをダウンロード 1748.88 KB · ZIP ファイル

このデモは MPL/GPL/LGPL ライセンスの下で公開されています。