Blog

CSS3で伊勢丹の紙袋を作ってみた

前回ご紹介したCSS3のグラデーションを活用した、

画像を使わずに模様の背景を表現する方法を使って、

伊勢丹の紙袋の模様をCSS3のみで再現してみることにしました。

 

こちらが作ってみたもの↓

DEMO

方法

本当は、ひとつの背景のみで作りたかったのですが、

現状のCSS3ではあの模様をひとつの背景のみで表現するのは困難だということがわかったので、

今回は、何層かに別けて、あの模様を目指すことにしました。

 

手順1

まず、bodyをベースとなる深緑で塗りつぶします。

body

CSS

 

 

手順2

今回は4層に分けて表現するので、4層構造のボックスを用意します。

HTML

一番下の一層目には、縦の赤と黄色のラインを、描きます。
縦のライン

 

CSS

 

 

手順3

1層目の上から、斜線を背景と同じ色で重ねます。

斜線1

CSS

そうすることで、あの模様のような、斜線入りのラインを表現しました。

縦斜線入り

 

 

手順4

更にその上から、横の赤と黄色のラインを描きます。

横ライン

CSS

 

 

手順5

先程と同じように、この横のラインの上からも、斜線を重ねます。

ただ、先程と色のある場所と、透明の場所が逆になるようにします。

斜線2

CSS

 

 

手順6

以上を重ねて表示すれば、あの模様っぽいものの出来上がりです。

完成

 

 

…実際の伊勢丹の紙袋の模様と比べていただくとわかってしまいますが、ちょっと違いますね。なぜここまで、「っぽいもの」という表現をしたかというと、

  1. 斜線が完全な深緑ではない
  2. 赤と黄色のラインが重なっている場所も、斜線が残っている

という違いがあるためです。

 

原因は、深緑色の斜線を半透明にしているためなのですが、

実は、この方法で斜線を完全な深緑にしてしまうと、

一番下の横のラインが、斜線2層によって打ち消されてしまいます。

そのため、今回は斜線を半透明にすることで、それっぽくしています。

 

完全にあの模様を再現するためには、もうひとひねり必要ですが、今回はひとまずここまでで…。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ