テキストや画像の色を、境目で変える

HTML/CSS って、発想次第でなんでもできるんだなあ、っていうのは常々思っているのですが、非常に感心したものをひとつ、忘備録。

突然ですがこちらをご覧ください。

See the Pen GRpJREE by ishi (@ishi-nagoya) on CodePen.

こんな感じで、背景の境目でテキストと画像の色を変える方法。ちなみに「白黒~」が画像で、「はっきり~」がテキスト。特に意味はないです。

やり方は簡単で、ざっくり言うと、黒と白をそれぞれ準備して、position で重ねて、枠の横幅を指定して、黒だけ overflow: hidden; ではみ出た部分を消す、という感じ。ざっくりしすぎ?確かに。でも上の html/css を見れば、だいたいわかるんじゃないかなあと、手前ミソですが思います。なんかきれいにコード書けた気がします。自画自賛。

多少付け加えるなら、.tophero_container { width: 100vw; }にしてあげれば画面横幅いっぱいに広がりますし、.tophero_textboxblack, .tophero_textboxwhite と、.tophero_img の中の width をそれぞれ調整してあげれば背景画像のサイズが変わりますし、left と top いじれば位置変えられます。見ればわかる?確かに。つまり考え方さえわかれば簡単。

最初から文字いれて背景画像つくれば楽にできると思うんですが、これのいいところはレスポンシブ対応、テキストや画像の位置サイズ調整、入れ替えが容易ってところですね。

以上。codepen を使うとわかりやすくなっていいんだけど、ブログの文字数が少なくなりがちですね。でももう書くことないので終わり。

かしこ

タイトルとURLをコピーしました