webOpixel

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

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

そろそろIE8はサポートしなくてもいいのではないかなという頃合いですが、IE8でも「background-size:cover」や「contain」を使えるようにする方法をご紹介します。

CSSは普通だとidやclassの頭文字に数字は使用できないのですが、使用する方法をご紹介します。

SASS(SCSS)でパーセントベースのシンプルなグリッドMixinを作ってみました。
Mixinにすることでカラム数やマージンの微調整が簡単にできるようになります。

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

Canvasでパスの形状で画像にマスクを掛ける方法を３つほどご紹介します。

HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。