ヘッダー画像の変形（下の部分を波のようにする）
投稿日：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;
}
これが一番簡単な方法かな？
レスポンシブにも対応しているのでいい感じです。
デモはこちら
ドメイン名取得＆無料レンタルサーバーサービス『エックスドメイン』
関連記事
-
-
クリエイター向けパソコン フォトショップ、イラストレーター、ドリームウィーバーなどAdobe CCソフトウェアの動作確認済パソコンを選ぶことで失敗しないPC選びをすることが …
-
-
Wi-Fi特集 結局どれにすれば良いのか悩んでしまうのでおすすめをご紹介！ 海外WiFi イモトのWiFi Wi-Ho！（ワイホー） 世界各国（ …
-
-
Webサイトを作成したり、ブログサイトを作成するのに出てくる単語ですね。 FTPとは、File Transfer Protocol(ファイル・トランスファ・プロトコル)の略で、ネットワークでファイルの …
-
-
今さらですが、当たり前のように使っている、口にしている『web（ウェブ）』ですが、 World Wide Web（ワールド・ワイド・ウェブ、略名：WWW）のことで、 Webとは、世界中に張り巡らしたよ …
-
-
スマホとPCの条件分岐でVEGASを切り替える方法 表示したいところに以下を記述します。 <div class="img-movie"> & …
