css

CSSで背景を2トーンやシマシマにする

2021/03/11

CSSを使って、背景を2色の切り返しにしたり、シマシマにする方法を解説します。

ちょっと小ネタです。CSSで背景を2色の切り返しや、縞模様にしてみます。

CSSを使って背景を2色にする

 CSS の linear-gradient() を使って背景を2色にします。

 linear-gradient() の使い方については、別ページで詳しく説明しています。

一応、 linear-gradient() の書き方は以下になります。

linear-gradient ( 方向(角度),  開始色,  終了色 );

【css】linear-gradient()を背景として使う

linear-gradient()の基本的な使い方と、背景として私がよく使う見せ方をご説明します。 目次linear-gradient()の基本方向を角度にして、3色で表示グラデーションの割合を指定す ...

続きを見る

 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 HTM ...

続きを見る

画像が重なりながら、横からスライドしてきて表示【Image SlideIn Effect】

この記事のタイトルを「画像が重なりながら、横からスライドしてきて表示」としていますが、いまいちなんて言っていいのか分からないのですが、「横からイメージがスライドしてきて、すこし遅れてそのイメージに被せ ...

続きを見る


-css

© 2021 MUKOLOG