CSSを使って、背景を2色の切り返しにしたり、シマシマにする方法を解説します。
ちょっと小ネタです。CSSで背景を2色の切り返しや、縞模様にしてみます。
CSSを使って背景を2色にする
CSS の linear-gradient() を使って背景を2色にします。
linear-gradient() の使い方については、別ページで詳しく説明しています。
一応、 linear-gradient() の書き方は以下になります。
linear-gradient ( 方向（角度）, 開始色, 終了色 );
-
-
【css】linear-gradient()を背景として使う
linear-gradient()の基本的な使い方と、背景として私がよく使う見せ方をご説明します。 linear-gradient()の基本 linear-gradient(方向（角度）, 開始色, ...
続きを見る
linear-gradient()で背景を2色にする
See the Pen 2tone-BackGround by muko (@mkpn) on CodePen.
最初の値の角度を0度にすると、上下に2色の切り返しになります。
この角度を―45度にすると斜めの切り返しになります。
See the Pen 2tone-BackGround-45deg by muko (@mkpn) on CodePen.
背景をシマシマにする
もちろん2色だけでなく、色も複数設定可能です。
例えば、以下のような、画像では作りにくい、斜めのシマシマ模様にすることも可能です。
See the Pen 2tone-BackGround-Stripe by muko (@mkpn) on CodePen.
以上です。
-
-
CSSで背景に縦線を引く
小ネタですが、背景に縦線をcssで引く方法を解説します。完成形は以下のSAMPLEから確認できます。 >> SAMPLE01 で上記のソースは以下になります。 SAMPLE01 HTML( ...
続きを見る
-
-
画像が重なりながら、横からスライドしてきて表示【Image SlideIn Effect】
この記事のタイトルを「画像が重なりながら、横からスライドしてきて表示」としていますが、いまいちなんて言っていいのか分からないのですが、「横からイメージがスライドしてきて、すこし遅れてそのイメージに被せ ...
続きを見る
