“白と黒で魅せる”モノクロデザインのコードスニペット8選【CSS/JavaScript】

白と黒の組み合わせは、シンプルですがパワフルです。アクセシビリティなどの実用性だけでなく、美しさの観点からも多くの可能性を秘めています。

今回は、白と黒で魅せるモノクロデザインのコードスニペット8選を紹介します。

1. CSSで作った錯視画像

この錯視画像は、白と黒のタイルを少しずつずらしながら配置し、グレーの線をあいだに引いたもの。数行のCSSのみで作られています。まっすぐ並んでいるのに、歪んで見えるのが不思議ですね。

See the Pen
optical illusion by Mark Boots (@MarkBoots)
on CodePen.0

2. スライスされた文字

「SLICED」という単語を含む2つのHTML<div>タグで構成されたスニペット。CSSを使って文字を重ねあわせ、スライスしたように見せています。とくに目立たせたい部分に使うのがおすすめです。

See the Pen
Sliced Text Effect by Shireen Taj (@TajShireen)
on CodePen.0

3. グラデーションで描かれる文字

アニメーションがついたロゴは、事業の紹介にぴったり。シンプルな白と黒のテキストにアニメーションをつけ、繊細かつ上品に浮かび上がらせています。

See the Pen
Stroke Logo Animation by Jon Kantner (@jkantner)
on CodePen.0

4. CSSとSVGのクマの親子

CSSとSVGを活用して、クマの子どもが親の足のあいだに滑りこむ様子を描いたスニペットです。シンプルなデザインでありながら、目をひく作品に仕上がっています。

See the Pen
Mum with cub by Mikael Ainalem (@ainalem)
on CodePen.0

5. アブスクトラクトのアニメーション

<css-doodle>というCSSのパターン描画コンポーネントを使って、複雑なアニメーションを作っています。クリックするたびにデザインが更新されるのも魅力です。

See the Pen
Black and White Abstract CSS Doodle Animation by Alisa Kin (@alisasila)
on CodePen.0

6. 動く市松模様

チェスをテーマにしたドラマ『クイーンズ・ギャンビット』にインスパイアされたスニペット。ロゴやヒーローエリア（サイトで一番最初に表示される部分）におすすめです。SVGで作られているので、さまざまなサイズに対応できます。

See the Pen
Gambit Squares by Chris Gannon (@chrisgannon)
on CodePen.0

7. 白と黒のスクロールエフェクト

白と黒のコントラストが存分に発揮されたスクロールエフェクト。CSSのmix-blend-modeを使って、白と黒をスムーズに切り替えています。

See the Pen
Effect black & white scrolling by Crianbluff (@crianbluff)
on CodePen.0

8. スクロールで動くモノクロ写真

縦方向に動くギャラリーに配置されたモノクロ写真は、スクロールに応じて動き、カーソルをあわせると色づきます。テキストのシームレスな表現を可能にしているのは、CSSのブレンド効果です。

See the Pen
Vertical image loop with scroll acceleration with gsap by Cameron Knight (@cameronknight)
on CodePen.0

おわりに

世の中はさまざまな色で溢れていますが、基本に立ちかえりたいときは白黒がぴったりです。白黒はシンプルな配色ですが、だからこそ工夫次第で目をひく作品が作れます。動きをつけたり、インタラクティビティを取り入れて、ユニークな作品を作ってみてください。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：少年B　提供：speckyboy）