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

更新日 : 2021.04.10

Share
1
0
5
シンプルな装飾として使えるずらしテクニック。テキストや画像に使用することで目を惹くことができます。過剰な装飾は控えるべきですが、今回ご紹介する方法なら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 のブラウザ対応状況の画像

人気記事

  1. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選