【マークアップ】backgroundが秘める可能性

こんちゃ！ニラです。

Webデザイナーたるもの、ある程度ののコーディング知識は必要ですよね。エンジニアの人には勝てないかもしれませんが、HTML、CSS、JavaScriptは後れを取りすぎないようにしたいです！

最近知った面白いCSS

Twitterでいろいろやってたら、面白いCSSを見つけました。CSSの進化によって、デザインが実装できる幅がすんごく増えますよね。便利便利。

BEFORE

AFTER

グローバルナビに注目！左の画像はコントラスト比がちょっとまずいですよね。

それに比べて右はどうでしょうか？？半透明な背景がついているだけではなく、なんかボケていますよね！

「背景をぼかす必要なんてあるか？」あります。見え方がだいぶ違いますよ！

これ、CSSでできちゃうんです！

背景色を設定して、backdrop-filter: blur();をセレクターにぶち込むだけです。()の中は数値を入れて、単位にpxをつけましょう。その数値が大きいほど、ぼかしが強くなります。背景色が半透明じゃないと意味がないので、RGBA()で設定しましょう！

コード見せます。複雑ですが、.header__navセレクターに例のプロパティがあります。

「0.25×」が一番わかりやすいかもです。

See the Pen Untitled by horii kouta (@nira12) on CodePen.

これがあれば、実装の幅がすごい広がると思いませんか？

BEFORE

AFTER

これは、セレクターにbackground-clip:textを入れて、画像を文字の形に切り抜くという技です。

こんなこともできるんですね。これに至ってはデザインツールよりもお手軽かも・・・。

これは、文字色が透明・半透明じゃないと意味がないので、文字色をRGBA()で設定しましょう。

今回は、文字色を半透明の白にしましたが、色相を変えることによって面白いものができそうです。

これもコードを見せます。0.5×が一番見やすいです。

See the Pen Untitled by horii kouta (@nira12) on CodePen.

この技は、さっきのぼかしよりも衝撃を受けました。

❤︎

2022/06/25

nira-012.mahora94

◀︎

next...

prev...

▶︎

Artist

nira-012.mahora94

よろしくお願いします