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に対応しておりません。