Webデザインを勉強する中で、いろんなサイトを見ていると、「これやってみたい!」「どうやってやるんだろう?」という部分がいっぱいあります。
この記事は、そのソースを見て勉強したもののメモです。

パターン画像を使って可愛い背景を作る

椿音楽教室さまのWebサイト(2017/7/12現在)のトップページ、コンタクトフォーム部分の背景にトライしてみました。下側だけ真似します。
ゴール(背景のみ)はこんな感じ!

まずは画像を用意

シームレスなパターン画像を下記のサイトさまからダウンロードしました。

商用利用、加工OK!無料WEB素材サイト WEB WORK KIT

Photoshop用のパターン画像だったので、パターンとして読み込んだ後、PNG画像に書き換え。

  1. Photoshopのレイヤースタイル>パターンオーバーレイのパターンを選択するコマンドで、読み込んだ画像をマウスホバーし、元画像のサイズを表示
  2. 元画像と同じサイズのキャンバスを作成
  3. レイヤースタイル>パターンオーバーレイでこのパターンをキャンバスに描画
  4. PNG形式で保存

これで、シームレスなままでパターン画像を書き出すことができます。…というのを参考サイトさまで学びました。

これで四角いパターン画像が出来上がりましたが、コンテンツが終わった後の裾部分も作ります!
四角いパターン画像に、横幅(直径)が同じ円のオブジェクトを作り、画像の上部と円の中心、両端が揃うように重ねて、マスクをかけます。
半円が出来上がるので、不要な余白は極力カットしてPNG画像書き出し。

これで必要な素材ができました。

HTML/CSSで実装!

HTMLは、

としまして。
CSSには、

とすると、ただの四角い箱ができるわけですが、そこに裾をつけてあげるのです。

実際にコードを書いて、中にテキストを入れてみたものがこちら。

まとめ

ポイントは、

  1. 元のパターン画像(四角)を、上側から幅がぴったり合うように切り抜くこと
  2. 四角画像の下側と、半円画像の上側(元は四角画像の上側)が合うように並べていくため、四角画像は下から上に敷き詰め(background-position: bottom left)、半円画像は上側を上部に合わせた上で右方向に並べていくこと(background-repeat: repeat-x; background-position: top left)

でしょうか。
また、擬似要素:afterで裾部分を作るのはオリジナルのサイトさまのソースから学びました。HTMLに余計なコードを増やさずに済むというわけですね。

コメントを残す

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