Blog スタッフブログ

WEB制作のG・Yです。

今回はここ数年でブラウザでの表示制限等が解消して実用が現実的になった、スタイリッシュさ重視のCSSプロパティについてご紹介いたします。

❶background-clip:text

テキスト全体に、画像のようなグラデーションを指定できるCSSプロパティです。

正確には、linear-gradientでグラデーションを指定したうえでbackground-clipを用いてグラデーションをテキストにのみ反映させるという処理です。

以下、コピー＆ペースト用です。

.test_text{
  background-color: #ECF2F5;
  background:linear-gradient(90deg,#55bdfa 0%, #2079b0 40%, #005bac 100%);
  background-clip: text;
  -weblot-background-clip:text;
}

❷backdrop-filter

.test_text{
backdrop:filter:blur(15px);
color:#fff;
}

要素の背景に何らかの効果を与えるCSSプロパティです。

画像の場合、要素の内側にblurという値を入れぼかしの表現を取り入れています。

他にも背景を白黒にするgrayscaleや影を入れるdrop-shadowなどの値を入れることも可能です。

❸aspect-ratio

aspect-ratio:240/400;
object-fit:cover;

※object-fitは画像自体のアスペクト比を保つために必要

img要素やvideo要素など、いわゆる置換要素にこのCSSプロパティを設定することで、画面サイズの変化に合わせて要素の縦横比を任意の比率のまま保つことができます。

youtube動画の埋め込みなどではこれが設定されているかどうかでメディアの視認性が大きく変わり、ユーザビリティにも影響を与えます。