こちらの御記事が凄い
「サイトやブログは中身が大事だからデザインにこだわるな」という意見もありますが、デザインにもオリジナリティを出さないと差別化できません!だから見た目をリッチにするために、背景に使うグラデーションCSSを収集開始します
目次(クリックでジャンプ)
グラデーション
backgroundに「linear-gradient(開始色,終了色)」を設定
そうちゃ式
ストライプ(ボーダー)
backgroundにrepeating-linear-gradientを設定
そうちゃ式
両者の組み合わせ
backgroundにrepeating-linear-gradientとrepeating-linear-gradientを「,」で区切って設定すればOK。前に記述したものが上に乗っていく
グラデーションをストライプに乗せる
グラデーション右端の透明度を上げている。ストライプがグラデーション状に隠れるが、透明度が高い右端の色がコントロールできない(薄い)
そうちゃ式
ストライプをグラデーションに乗せる
そうちゃ式
ストライプがうるさい
ストライプをグラデーションで挟む
下から、単色の下地色、ストライプ、右に透明になるグラデーションの上塗りの構造
そうちゃ式