cBlog

Tips for you.

CSSだけで背景色を2色にする方法

スポンサーリンク
※当ブログのAmazon、iTunes、サウンドハウス等のリンクはアフィリエイトを利用しています。

更新:2017-07-01

#コードを簡略化しました

f:id:cruller:20151223112045p:plain

このブログを購読していただいている方は既にお気づきと思いますが、ブログタイトルのデザインを変えたなしよ。正直ダサいと思うなっしー。それでも採用した理由、それはFCバルセロナのクラブカラーが「えんじと青」なように、この2色はまさにcruっしーのスピリッツなしよ。

 

このツートンカラーはCSSの背景色だけで実現しているなっしー。画像は使いたくなかったんだなっしー。でも、なかなか背景色を2色にするのは難しかったなっしー。がんばったなしよ。

 

CSSで背景色を二つ指定する情報が知りたい。そんな欲しがりさんたちのために今日はその方法をお送りするなっしー。

 

 

やり方

実は、背景色を二つにするアプローチではなかなか情報にたどり着けなかったなしよ。そんなときに出会ったこの神サイトでピンときたなっしー。発想の転換なしなー。

8ステップで完成!CSS3で「斜めのストライプ」を作る方法 | mae's blog

 

実はこのツートンカラー、境目が見えないグラデーションになっているなしよ。リンク先のステップ4を見るなっしー!

 

というわけで結果だけ書くと、

#blog-title {
    background: linear-gradient(#fff 50%, #ffc0cb 50%);
}

のようにすればいいなっしー。

 

頭をひねれば3色ストライプにもできるなっしー。がんばってみてなっしー。

HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座