CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます

23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。

たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。

背景画像とテキストの間にグラデーションのオーバーレイを適用するテクニック

実際の動作は、デモページでご覧ください。

See the Pen
Gradient Overlay with border-image
by coliss (@coliss)
on CodePen.

HTMLはシンプルです。
テキストのh1要素と背景を設定したdiv要素があるだけです。

そしてこのCSSが実装のポイントです。
グラデーションのオーバーレイは、たった1行のCSSで実装されています。

border-imageプロパティでグラデーションを作成し、背景画像とテキストの間にオーバーレイで表示することができます。特にbackgroundプロパティを変更できない、疑似要素も使用できない、そんな時にはこのテクニックがぴったりです。

ちなみに、オーバーレイ以外のCSSは下記の通りです。

sponsors

top of page

©2024 coliss