Blog

CSS3を使って、背景パターンをつくる

2012.12.19Cat:css3 デザイナー

CSS3では、グラデーションの背景を応用することで、

様々なパターンを作ることができます。

こちらのサイト(http://lea.verou.me/css3patterns/)で、CSS3で作られた様々なパターンとコードを確認することができます。

 

今回は、こちらのブログ(http://honttoni.blog74.fc2.com/blog-entry-77.html)を参考に、

自分でもCSS3でパターンを組んでみることにしました。

DEMO

 

水玉

CSS

ポイント

  • -moz-radial-gradient(-webkit-gradient(radial))を利用する。
  • 色の切り替えを、同じポイントで行うことで、はっきりとした境界ができる(例:50%で#0000ff、50%で#0ffffとすれば、青から水色に)。
  • background-sizeで、背景の大きさを指定する。

 

斜め縞模様

CSS

 

ポイント

  • -moz-linear-gradient(-webkit-gradient(linear))を利用する。
  • left top, right bottomで斜めに指定。

 

縦縞(細かく)

CSS

ポイント

  • left top, left bottomで縦に指定。
  • background-sizeでグラデーションに合わせて大きさを小さく設定、

 

自由にパターンを作れるようになるには、多くのCSS3に関する知識が必要になりそうです。

そのため、パターンを自分で考えて作ることで、CSS3について、知識や技術を深めることができると感じました。

Author Profile

ninomiya
ninomiya

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

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

Archive

ページTOPへ