CSS1一行で魅せるズラしテクニック

シンプルな装飾として使えるずらしテクニック。テキストや画像に使用することで目を惹くことができます。過剰な装飾は控えるべきですが、今回ご紹介する方法なら１行で実装できスマートに表示できるのでおすすめです。

テキストのズラしテクニック

.shadow {
	text-shadow: 10px 10px 0 #c3a400;
}

text-shadowの値は、offset-xとoffset-y、blur-radius、colorで構成されております。blur-radiusの値を0にするとボケずくっきりとした影が表示されますので、これをズラしテクニックとして使用しています。

.shadow {
	box-shadow: 30px 30px 0 #c3a400;
}

text-shadowと同じで、box-shadowのblur-radiusの値を０にしてぼかさずにズラして表示しています。

.shadow {
	filter: drop-shadow(20px 20px 0 #c3a400);
}

box-shadowを使うと、画像の透明部分も含めた領域で影を作成しますが、filter: drop-shadowで指定すると透明部分は考慮せず画像のかたちに合わせた影を指定することができます。他２つと同様にblur-radiusの値を０にしてぼかさずにズラして表示しています。

text-shadowとbox-shadowは主要ブラウザで対応されておりますが、filter: drop-shadowのみIEに対応しておりません。