グラデーションとストライプで綺麗な背景デザイン

こちらの御記事が凄い

 

「サイトやブログは中身が大事だからデザインにこだわるな」という意見もありますが、デザインにもオリジナリティを出さないと差別化できません!だから見た目をリッチにするために、背景に使うグラデーションCSSを収集開始します

   

グラデーション

backgroundに「linear-gradient(開始色,終了色)」を設定

そうちゃ式

ストライプ(ボーダー)

backgroundにrepeating-linear-gradientを設定

そうちゃ式

両者の組み合わせ

backgroundにrepeating-linear-gradientとrepeating-linear-gradientを「,」で区切って設定すればOK。前に記述したものが上に乗っていく

グラデーションをストライプに乗せる

グラデーション右端の透明度を上げている。ストライプがグラデーション状に隠れるが、透明度が高い右端の色がコントロールできない(薄い)

そうちゃ式

ストライプをグラデーションに乗せる

そうちゃ式

ストライプがうるさい

ストライプをグラデーションで挟む

下から、単色の下地色、ストライプ、右に透明になるグラデーションの上塗りの構造

そうちゃ式
スポンサーリンク

あとがき

タイトルとURLをコピーしました