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

News

follow us in feedly
Toggle

CSS

CSSのみでグローバルメニューを3Dアニメーションで開閉表示するサンプル

CSSのみでグローバルメニューを3Dアニメーションで開閉表示するサンプル

いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に移動するエフェクトのサンプルをご紹介します。 Javascriptは使用せず、CSSのみで表現してい…
メニューのマウスオーバーで下線がスライドしてついてくるサンプル

メニューのマウスオーバーで下線がスライドしてついてくるサンプル

サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。 CSSと簡単なjQueryで実装しています。 まずはサンプルをご覧ください。 See the Pen Menu with Underline Slidi…
[CSS]マウスオーバーで立方体が回転する3Dアニメーションギャラリーサンプル

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

今回は、前回の「マウスオーバーで平面が回転する3Dアニメーション」の応用編、グリッドレイアウトで並べた画像コンテンツを、立方体に見立てたキューブとして回転して別の面が表示されるパターンのCSSのtransformを利用した3Dアニメーションサンプルをご紹介。 前回のTipsは以下をご覧ください。 それでは、前回の平面パ…
[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

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

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

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

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

特定のページのみCSSを反映させる方法

DigiPressには「オリジナルスタイルシート設定」という機能があり、この機能が提供するテキストエリアに任意のCSSを記述し保存することで、テーマの既定のCSSを直接編集せずに安全に確実にテーマのCSSとして組み込むことができます。 DigiPressのカスタマイズ項目にない箇所のデザイン変更の方法については以下をご…
CSSだけで作るローディングアイコン

CSSだけで作るローディングアイコン

Webサイトでヘッダー画像など表示されるまでに多少時間がかかるコンテンツ部分に、読み込み中であることが閲覧者にわかるようにローディング画像を表示しておく場合があります。 よくある手法はローディング用のアイコン画像をアニメーションGIFで作成しておいて CSSの background-image でそのGIF画像までのU…
PCとモバイルテーマで分けて任意のCSSを反映させる方法

PCとモバイルテーマで分けて任意のCSSを反映させる方法

DigiPressのテーマオプションではCSSを直接編集せずに本文のフォントサイズなどを変更したり、オプションにないスタイルの変更については「オリジナルスタイルシート設定」によって管理画面から独自のCSSをテーマにマージして組み込むことができます。 例えば、スマートフォン(モバイル)での表示のみ記事のフォントサイズを多…
Return Top