Web全般

ヘッダー画像の変形(下の部分を波のようにする)

投稿日:2018年1月4日 更新日:

ヘッダー画像を変形

 

ヘッダー画像をカスタマイズ

 

少し変わったホームページを作りたいなというときに、最近では、1カラムのサイトが増えてきました。

また、スクロール時にアニメーション効果を付けたサイトなども増えてきました。

今回は、ヘッダー画像部分を非直線にしてみたいと思います。

いろいろやり方はあると思いますが、私なりにこれが一番簡単かな?と思い画像を使った方法を試してみます。

 

div 波型

波型の画像を作ります

 

ヘッダー画像の横幅に合わせて、波型の画像を作成して、透明部分ができるように「.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全般
-


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ドロップシッピング

ドロップシッピングなぜ儲からないか?

  ズバリ言うと、 始めたからといって、すぐに結果が出るわけがなく、常に更新していくなど、日々の努力と継続が必要になります。   1.売れそうな商品を取り扱っているか? 2.サイト …

とくとくBBのWiMAX2+

とくとくBBのWiMAX2+を利用してみた

  実際に契約   一人暮らしの学生のWiFi環境を充実させるため、持ち運びが簡単で、設定も簡単ということで、 今回選んだのは、「とくとくBBのWiMAX2+」にしました。 機種や …

div横並び

DIV横並びで回り込みも

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい! そんなことを思ったことがあると思います。(きっと 😛 ) いろんな方法がありますが、簡単にできる方法をご紹 …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …

dobbyドローン

Webサイトとドローン

規制対象外の小型ドローン 国内では現在200g未満のドローンは申請が入らないので、簡単に飛ばすことができます。 ただ、当たり前ですが危険な場所はやめた方がいいです。 大きさはスマホくらいで、ちょっとが …