サイト内の別ページへの切り替え時にフェードイン／フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQuer ...

2020/2/14追記 : この方法で解決できない場合は、以下のSVGフィルターによるブラー加工で解決できます。 https://digipress.info/tech/svg-blur-for-css-filter/ ...

いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に ...

サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。 CSSと簡単なjQueryで実装しています。 まずは ...

今回は、前回の「マウスオーバーで平面が回転する3Dアニメーション」の応用編、グリッドレイアウトで並べた画像コンテンツを、立方体に見立てたキューブとして回転して別の面が表示されるパターンのCSSのtransformを利用し ...

今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSS のtransfo ...

タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能 ...

DigiPressには「オリジナルスタイルシート設定」という機能があり、この機能が提供するテキストエリアに任意のCSSを記述し保存することで、テーマの既定のCSSを直接編集せずに安全に確実にテーマのCSSとして組み込むこ ...

Webサイトでヘッダー画像など表示されるまでに多少時間がかかるコンテンツ部分に、読み込み中であることが閲覧者にわかるようにローディング画像を表示しておく場合があります。 よくある手法はローディング用のアイコン画像をアニメ ...

DigiPressのテーマオプションではCSSを直接編集せずに本文のフォントサイズなどを変更したり、オプションにないスタイルの変更については「オリジナルスタイルシート設定」によって管理画面から独自のCSSをテーマにマージ ...

Webサイトの背景に合いそうなSVG(スケーラブル・ベクター・グラフィックス)化されている様々な画像をカスタマイズして背景画像として表示するCSSを生成してくれるWebサービス、「SVGeneration」。 まだ出来て ...

フラットデザインに続く流行りのWebデザイン、「ロングシャドウ」効果をなんとCSSだけで表現してくれる超便利なオンラインサービス「Long Shadow Generator」。 シャドウのサイズ、透過度、長さなどをスライ ...