Single Post
hrタグのジグザグラインを応用
先日ネットサーフィンをしていたら【hr】の境界線をジグザグにしてあるサイトを見つけて「どうやってやってるんだろ!?」と思って、ググってみるとありました。codepenで発見することができたので、とりあえず埋め込んでおきます。
See the Pen CSS gradient zigzag hr by Tyler Argo (@argo49) on CodePen.
これだけでも十分使えそうですが、バックグランドに画像を入れると面白いのではないかと思い、2パターン作ってみました。
1つ目は、画像をシンプルにバックグランドに使用し画像の上にブラーで透過したコンテンツを入れてみました。
2つ目は、画像の上を【hr】を使ってジグザグにし、下は画像素材でジグザグにしてみました。両方ともウェブサイトのワンポイントアクセントとして使えそうな感じに仕上がっています。
まとめ
ウェブページのトップページなどで閲覧ユーザーに必ず訪れて欲しいページへの導線としてバックグランド画像は、有効な手法の1つだと思います。役に立ちそうであればご自由にお使い頂けると幸いです。
