CSS3を使って、背景パターンをつくる
CSS3では、グラデーションの背景を応用することで、
様々なパターンを作ることができます。
こちらのサイト(http://lea.verou.me/css3patterns/)で、CSS3で作られた様々なパターンとコードを確認することができます。
今回は、こちらのブログ(http://honttoni.blog74.fc2.com/blog-entry-77.html)を参考に、
自分でもCSS3でパターンを組んでみることにしました。
水玉
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | background: -moz-radial-gradient(circle farthest-side, #c0e4ee, #c0e4ee 50%, #ebf6f9 50%, #ebf6f9); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 9, from(#c0e4ee), color-stop(50%, #c0e4ee), color-stop(50%, #ebf6f9), to(#ebf6f9)); -moz-background-size: 15px 15px; -webkit-background-size: 15px 15px; background-size: 15px 15px; |
ポイント
- -moz-radial-gradient(-webkit-gradient(radial))を利用する。
- 色の切り替えを、同じポイントで行うことで、はっきりとした境界ができる(例：50%で#0000ff、50%で#0ffffとすれば、青から水色に)。
- background-sizeで、背景の大きさを指定する。
斜め縞模様
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | background: -moz-linear-gradient(left top, #eed2c0, #eed2c0 25%, #f8f1ec 25%, #f8f1ec 50%, #eed2c0 50%, #eed2c0 75%, #f8f1ec 75%, #f8f1ec); background: -webkit-gradient(linear, left top, right bottom, ｆrom(#eed2c0), color-stop(25%, #eed2c0), color-stop(25%, #f8f1ec), color-stop(50%, #f8f1ec), color-stop(50%, #eed2c0), color-stop(75%, #eed2c0), color-stop(75%, #f8f1ec), to(#f8f1ec)); -moz-background-size: 20px 20px; -webkit-background-size: 20px 20px; background-size: 20px 20px; |
ポイント
- -moz-linear-gradient(-webkit-gradient(linear))を利用する。
- left top, right bottomで斜めに指定。
縦縞(細かく)
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | background: -moz-linear-gradient(left top, #e4facb, #e4facb 25%, #b6f17c 25%, #b6f17c 50%, #e4facb 50%, #e4facb 75%, #b6f17c 75%, #b6f17c); background: -webkit-gradient(linear, left top, right top, from(#e4facb), color-stop(25%, #e4facb), color-stop(25%, #b6f17c), color-stop(50%, #b6f17c), color-stop(50%, #e4facb), color-stop(75%, #e4facb), color-stop(75%, #b6f17c), to(#b6f17c)); -moz-background-size: 4px 1px, 4px 1px; -webkit-background-size: 4px 1px, 4px 1px; background-size: 4px 1px, 4px 1px; |
ポイント
- left top, left bottomで縦に指定。
- background-sizeでグラデーションに合わせて大きさを小さく設定、
自由にパターンを作れるようになるには、多くのCSS3に関する知識が必要になりそうです。
そのため、パターンを自分で考えて作ることで、CSS3について、知識や技術を深めることができると感じました。
Author Profile
SHARE
