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

更新日 : 2021.04.10

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

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

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

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

背景のズラしテクニック

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

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

影のズラしテクニック

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

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

ブラウザ対応

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

filter:drop-shadow のブラウザ対応状況の画像