CSS3のFlexboxレイアウトの基礎
IEのサポートが最新のバージョンだけとなりましたので、そろそろPCサイトもFlexboxでレイアウトしてもいいのではないかという環境になりつつあります。
ということでFlexboxレイアウトの基礎的な部分を解説いたします。
- 投稿日
- 更新日
CSS3
CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ（Flexbox）
横並びのナビゲーションとかでマウスオーバーしたボタンだけ横に広がって、大きくなった分だけ他のボタンが狭くなるというやつです。
ちょっと説明よくわからないですが、サンプルを用意しました。
- 投稿日
- 更新日
CSS3で画像キャプションのマウスホバーアニメーション5種
CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。
ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。
- 投稿日
- 更新日
画像にiPhoneやApple Watchのフレームを付けてくれるCSS「CSSDevices」
CSSDevices はクラス指定するだけで画像にiPhone/iPad/Apple Watch/Mac bookのフレームを付けてくれるCSSです。
- 投稿日
- 更新日
CSS3で背景画像全面表示（Background Cover）でもマウスオーバーで拡大アニメーション
最近サムネイルなどでマウスオーバーすると画像がぐいんって拡大表示するアニメーションをよく見ます。
あれはbackground-sizeとかアニメーションさせれば簡単にできそうですが、coverとかですでにsize指定してるときの方法をご紹介します。
- 投稿日
- 更新日
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。
- 投稿日
- 更新日