Masonryより高機能!フィルタ、ソート、レスポンシブ対応のグリッドレイアウト「Muuri.js」モジュール・ライブラリ紹介Masonryやisotopeはもういらない?! 高度なフィルターやソート、レスポンシブ表示にも対応する無料で商用利用可能な可変グリッドレイアウトを実現する「Muuri.js」の実装サンプルを紹介しています。 今後リ ... 2017/12/15続きを読む
[CSS]マウスオーバーで立方体が回転する3DアニメーションギャラリーサンプルWebデザイン・アプリ開発今回は、前回の「マウスオーバーで平面が回転する3Dアニメーション」の応用編、グリッドレイアウトで並べた画像コンテンツを、立方体に見立てたキューブとして回転して別の面が表示されるパターンのCSSのtransformを利用し ... 2016/06/10続きを読む
[CSS]マウスオーバーで平面が回転する3DアニメーションギャラリーサンプルWebデザイン・アプリ開発今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSS のtransfo ... 2016/06/10続きを読む
自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」Webデザイン・アプリ開発タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能 ... 2016/06/05続きを読む
CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプルWebデザイン・アプリ開発ギャラリーサイトなどでよく見かける、画像を敷き詰めてタイル状に並べたグリッドレイアウトを実現するには、「Masonry」に代表されるjQuery/Javascriptプラグインを利用することで、表示幅を計算して簡単に自動 ... 2016/05/26続きを読む