• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

技術情報・Tips

[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSSのtransformを利用した3Dアニメーションの実装例をご紹介します。 タイル状のグリッドレイアウトは、定番jQue…
自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」

自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」

タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能とは、例えばショップサイトで画像付きの商品一覧ページをタイルレイアウトで表示している場合、商品の色や…
背景画像に変色するグラデーション背景を重ね合わせるサンプル

背景画像に変色するグラデーション背景を重ね合わせるサンプル

今回のTipsでは、Webページの背景(background)にアニメーションしながら色が変化していく「グラデーション背景」とフルサイズの「背景画像」を重ね合わせて表示するサンプルを作ってみたいと思います。CSSのみでできて、とってもシンプルです。 まずは完成イメージをご覧ください! See the Pen Gradi…
CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル

CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル

ギャラリーサイトなどでよく見かける、画像を敷き詰めてタイル状に並べたグリッドレイアウトを実現するには、「Masonry」に代表されるjQuery/Javascriptプラグインを利用することで、表示幅を計算して簡単に自動で配置することができますが、Javascriptを利用するという点で、少々敷居が高く感じてしまう方も…
画像(img)を指定すると背景画像も同期してぼかし表示するサンプルコード

画像(img)を指定すると背景画像も同期してぼかし表示するサンプルコード

最近、様々なアプリ、Webサイト、iCloudやOS Xのログイン画面で見かける、背景画像をぼかしてその上に画像やテキストなどのコンテンツを表示する、若干視差効果のついたWebページを簡単に表示するサンプルコードをつくってみました。 See the Pen Synchronize the background imag…
CSS3で作る汎用的なモーダルウィンドウ

CSS3で作る汎用的なモーダルウィンドウ

JavascriptやjQueryモジュールを使って別のコンテンツがレイヤーのように全面に表示されるモーダルウィンドウの実装方法はいくつかありますが、今回はCSSだけを使ってポップアップで開くモーダルウィンドウと、汎用性が高いHTMLの追加だけでいくつでもモーダルウィンドウを追加できる2つの方法をご紹介します。 まずは…
Return Top