画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。
アイディア次第で複雑な柄も作れますが、ここでは基本的なパターンをご紹介します。
全面背景はもちろん、ブロック要素や見出しの背景にも使えるよう、色の差を少なめにしています。
また、わかりやすいようにベンダープレフィックスはつけていませんので、必要に応じてつけてください。
色やサイズを変えるだけでいろんな柄が作れますよ。
コピペでできる！cssとhtmlのみで作るちょっと複雑なの背景パターン 12選
画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。 以前は基本的なボーダーやストライプをご紹介しましたが、今回はちょっとクセ強めです。 アイディア次第で複雑な柄も作れます。どっかで見たチェックやシャツの柄のようなちょっとだけ複雑なパターンをご紹介します。 わかりやすいようにベンダープレフィックスはつけていませんので、必要に応じてつけてください。…
<div class="cp_bgpattern01"></div>.cp_bgpattern01 {
background-color: #dedede;
background-image:
linear-gradient(#ecebeb 50%, transparent 50%, transparent);
background-size: 10px 10px;
}<div class="cp_bgpattern02"></div>.cp_bgpattern02 {
background-color: #8be4f0;
background-image:
linear-gradient(-90deg, #80deea 50%, transparent 50%, transparent);
background-size: 14px 14px;
}<div class="cp_bgpattern03"></div>.cp_bgpattern03 {
width: 100%;
height: 315px;
background-color: #fc693b;
background-image:
repeating-linear-gradient(-45deg,
#ff5722, #ff5722 7.5px,
transparent 0, transparent 15px);
}<div class="cp_bgpattern04"></div>.cp_bgpattern04 {
width: 100%;
height: 315px;
background-color: #616161;
background-image: repeating-linear-gradient(45deg,
#424242, #424242 3px,
transparent 0, transparent 6px);
}<div class="cp_bgpattern05"></div>.cp_bgpattern05 {
background-color: #FFFDE7;
background-size: 80px 80px;
background-image:
linear-gradient(rgba(215,204,200,.7) 1%, rgba(215,204,200,.7) 1%, transparent 1%,
transparent 99%, rgba(215,204,200,.7) 99%, rgba(215,204,200,.7) 100%),
linear-gradient(90deg, rgba(215,204,200,.7) 1%, rgba(215,204,200,.7) 1%, transparent 1%,
transparent 99%, rgba(215,204,200,.7) 99%, rgba(215,204,200,.7) 100%),
linear-gradient(transparent, transparent 25%, rgba(215,204,200,.4) 25%, rgba(215,204,200,.4) 26%, transparent 26%,
transparent 50%, rgba(215,204,200,.4) 50%, rgba(215,204,200,.4) 51%, transparent 51%,
transparent 75%, rgba(215,204,200,.4) 75%, rgba(215,204,200,.4) 76%, transparent 76%, transparent 100%),
linear-gradient(90deg, transparent, transparent 25%, rgba(215,204,200,.4) 25%, rgba(215,204,200,.4) 26%, transparent 26%,
transparent 50%, rgba(215,204,200,.4) 50%, rgba(215,204,200,.4) 51%, transparent 51%,
transparent 75%, rgba(215,204,200,.4) 75%, rgba(215,204,200,.4) 76%, transparent 76%, transparent 100%);
}<div class="cp_bgpattern06"></div>.cp_bgpattern06 {
background-color:#FFD54F;
background:linear-gradient(#FFD54F,#FFA000);
}
.cp_bgpattern06::after {
content: '';
height:100%;
width:100%;
display:block;
background-size: 20px 20px;
background-image:
linear-gradient(rgba(255,255,255,.25) 3%, rgba(255,255,255,.25) 3%, transparent 3%,
transparent 97%, rgba(255,255,255,.25) 97%, rgba(255,255,255,.25) 100%),
linear-gradient(90deg, rgba(255,255,255,.25) 3%, rgba(255,255,255,.25) 3%, transparent 3%,
transparent 97%, rgba(255,255,255,.25) 97%, rgba(255,255,255,.25) 100%);
}<div class="cp_bgpattern07"></div>.cp_bgpattern07 {
background-size: 20px 20px;
background-color: #43A047;
background-image:
linear-gradient(45deg, rgba(56, 142, 60, 0.5) 25%, transparent 25%,
transparent 50%, rgba(56, 142, 60, 0.5) 50%, rgba(56, 142, 60, 0.5) 75%,
transparent 75%, transparent),
linear-gradient(-45deg, rgba(56, 142, 60, 0.5) 25%, transparent 25%,
transparent 50%, rgba(56, 142, 60, 0.5) 50%, rgba(56, 142, 60, 0.5) 75%,
transparent 75%, transparent);
}<div class="cp_bgpattern08"></div>.cp_bgpattern08 {
background-color: #3F51B5;
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
background-image:
linear-gradient(45deg, #303F9F 25%, #303F9F 25%, transparent 25%,
transparent 75%, #303F9F 75%, #303F9F 75%),
linear-gradient(-135deg, #303F9F 25%, #303F9F 25%, transparent 25%,
transparent 75%, #303F9F 75%, #303F9F 75%);
}<div class="cp_bgpattern09"></div>.cp_bgpattern09 {
background-color: #0097A7;
background-size: 10px 10px;
background-image:
linear-gradient(45deg, #00838F 25%, #00838F 25%, transparent 25%,
transparent 75%, #00838F 75%, #00838F 75%),
linear-gradient(-45deg, #00838F 25%, #00838F 25%, transparent 25%,
transparent 75%, #00838F 75%, #00838F 75%);
}<div class="cp_bgpattern10"></div>.cp_bgpattern10 {
background-color: rgba(193,0,41,1);
background-image:
linear-gradient(45deg, rgba(204,0,81,1) 25%, transparent 25%,
transparent 75%, rgba(204,0,81,1) 75%, rgba(204,0,81,1)),
linear-gradient(-45deg, rgba(204,0,81,1) 25%, transparent 25%,
transparent 75%, rgba(204,0,81,1) 75%, rgba(204,0,81,1));
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}<div class="cp_bgpattern11"></div>.cp_bgpattern11 {
background-color: #00838f;
background-image:
radial-gradient(#26A69A 1px, transparent 1px);
background-size: 20px 20px;
}<div class="cp_bgpattern12"></div>.cp_bgpattern12 {
background-color: transparent;
background-image:
radial-gradient(#F48FB1 3px, transparent 3px);
background-size: 30px 30px;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info