ヘッダー画像の変形(下の部分を波のようにする)
投稿日:2018年1月4日 更新日:
ヘッダー画像をカスタマイズ
少し変わったホームページを作りたいなというときに、最近では、1カラムのサイトが増えてきました。
また、スクロール時にアニメーション効果を付けたサイトなども増えてきました。
今回は、ヘッダー画像部分を非直線にしてみたいと思います。
いろいろやり方はあると思いますが、私なりにこれが一番簡単かな?と思い画像を使った方法を試してみます。
波型の画像を作ります
ヘッダー画像の横幅に合わせて、波型の画像を作成して、透明部分ができるように「.png形式」で保存します。
↓これです。
この画像をヘッダー画像に合わせて下の部分を波型に見せます。
position:absolute;を使って作成
html
<div class="header-demo"> <img src="https://○○○.jpg"> <div class="demo-mask"> <img src="https://○○○.png"> </div> </div>
css
.header-demo{ position:relative; } .header-demo .demo-mask{ position:absolute; bottom:0; left:0; }
これが一番簡単な方法かな?
レスポンシブにも対応しているのでいい感じです。
デモはこちら
ドメイン名取得&無料レンタルサーバーサービス『エックスドメイン』
関連記事
-
-
Webサイトを作成したり、ブログサイトを作成するのに出てくる単語ですね。 FTPとは、File Transfer Protocol(ファイル・トランスファ・プロトコル)の略で、ネットワークでファイルの …
-
-
今さらですが、当たり前のように使っている、口にしている『web(ウェブ)』ですが、 World Wide Web(ワールド・ワイド・ウェブ、略名:WWW)のことで、 Webとは、世界中に張り巡らしたよ …