HTML&CSSの記事一覧

SVGでセクションの区切りを斜め線にする

セクションの区切りを斜め線とかにしてしてみると、ちょっと他と違う感がでるかもしれない!
斜め線はCSSで回転させたりする方法もありますが、ここではSVGを使用した方法をご紹介いたします。

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

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

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

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

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

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

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

ちょっとしたワンポイントに使えそうなCSS3オンリーのマウスオーバーアニメーションです。
IEは10以上で動きます。

SASS/SCSSには様々なカラーコントロール機能がありまして、この機能を利用すればカラーバリエーションの作成やカラー修正など効率的に行うことができますよ。