CSS3のFlexboxレイアウトの基礎

Posted: 2016.09.13 / Category: HTML&CSS / Tag: CSS3

IEのサポートが最新のバージョンだけとなりましたので、そろそろPCサイトもFlexboxでレイアウトしてもいいのではないかという環境になりつつあります。
ということでFlexboxレイアウトの基礎的な部分を解説いたします。

READ MORE

jQuery+CSS3で円が画面全体に広がる系スマホメニュー

Posted: 2016.05.27 / Category: HTML&CSS / Tag: CSS3, jQuery

jQuery+CSS3で円が画面全体に広がって表示するようなスマホ用のメニューを作ってみました。

READ MORE

CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ（Flexbox）

Posted: 2016.02.29 / Category: HTML&CSS / Tag: CSS3, アニメーション

横並びのナビゲーションとかでマウスオーバーしたボタンだけ横に広がって、大きくなった分だけ他のボタンが狭くなるというやつです。
ちょっと説明よくわからないですが、サンプルを用意しました。

READ MORE

CSS3で画像キャプションのマウスホバーアニメーション5種

Posted: 2015.12.25 / Category: HTML&CSS / Tag: CSS3

CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。
ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。

READ MORE

画像にiPhoneやApple Watchのフレームを付けてくれるCSS「CSSDevices」

Posted: 2015.11.17 / Category: HTML&CSS / Tag: CSS3

CSSDevices はクラス指定するだけで画像にiPhone/iPad/Apple Watch/Mac bookのフレームを付けてくれるCSSです。

READ MORE

CSS3で背景画像全面表示（Background Cover）でもマウスオーバーで拡大アニメーション

Posted: 2015.09.09 / Category: HTML&CSS / Tag: CSS3, アニメーション

最近サムネイルなどでマウスオーバーすると画像がぐいんって拡大表示するアニメーションをよく見ます。
あれはbackground-sizeとかアニメーションさせれば簡単にできそうですが、coverとかですでにsize指定してるときの方法をご紹介します。

READ MORE

CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応

Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery

iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。

READ MORE