背景をグラデーションにするには(CSS3)・・・記事内の囲い枠やブログ背景をグラデーションに | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


現在、私のブログの記事の下に、「読者になる」ボックスが表示されています。

川上雄大のワンポイントレッスン


IE10以降でご覧の方は、この背景にグラデーションが表示されています。


通常は、背景をグラデーションにするには、画像を配置するのですが・・・

私の場合は、[CSSの編集]でこのように↓CSSソースを設置しています。
(フリープラグインと連動しています。詳しくはこちらの記事『記事やコメントを読んだ後に『読者になる』を見せるには』をご参照ください。)


/* 記事下へ『読者になる』の枠 */
.readerunder{
     border: #bec1c4 2px solid; /* 枠 */
     background-color:#FFFFFF; /* 白色*/
     background-image: linear-gradient(white,white,white,#c0c0c0);
     text-align: center;
     padding:10px;
     margin:15px 0 30px 0; /* 上 右 下 左 */
     border-radius:10px;
}


そう・・・
CSS3を使うと、

background-image: linear-gradient(色1,色2,色3,色4,・・・);


とするだけでグラデーションができてしまうのです。
(whiteは#FFFFFFでも同じです。)

gradient(グラディエント)はグラデーションのことです。(ネイティブ読みは「グレィディエント」)


さらに・・・

記事中にも、囲い枠にも使えますね。

例えば、

川上雄大のワンポイントレッスン

といった囲い枠は

<div style="background-image:linear-gradient(#ffeeee,white,#ffeeee);background-color:#ffeeee; padding:10px; border:2px dotted #ff0000;">○○○<br>●●●<br>□□□<br>■■■</div>


で、できますし、

オレンジのグラデーションであれば、

川上雄大のワンポイントレッスン
 
<div style="background-image:linear-gradient(orange,white);background-color:orenge; padding:10px; border:2px dotted orange;">○○○</div>


また、ブルーのグラデーションは

川上雄大のワンポイントレッスン
 
<div style="background-image:linear-gradient(blue,white);background-color:blue; padding:10px; border:2px dotted blue;">○○○</div>

・・・と、このようにできます。


水色の場合は、こんな感じ↓


(画像表示・・・IE10以降)
川上雄大のワンポイントレッスン!


(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○




<div style="background-image:linear-gradient(#f7fbfc,#d9edf2,#add9e4);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div>




また、右方向へグラデーションをかける場合は、

川上雄大のワンポイントレッスン
 
<div style="background-image:linear-gradient(to right,#8ed1e0,#ffffff);background-color:#8ed1e0; padding:10px; border:2px dotted blue;">○○○</div>


のように、「to right」を先頭に付け加えます。
(逆方向は、「to left」になります。)

background-image: linear-gradient(to right,色1,色2,色3,色4,・・・);

すると、
ピンクの場合も、このようにできます。

川上雄大のワンポイントレッスン

<div style="background-image:linear-gradient(to right,#ff1493,#ffffff);background-color:#ff1493; padding:10px; border:2px dotted #ff0000;">○○○</div>


もちろん、色は、色コードでも色名でもお好きなのをお使いいただくと、よいと思います。

ちなみに・・・、
この背景色グラデーションに対応しているブラウザは、
IE10と11、それからFirefox, Chrome, Opera ,Safariの最新バーション、というのは一応確認しています。

IE9以下のブラウザやグラデーションに対応していないブラウザのためには、背景色を指定(background-color)しておくとよいですね。



<関連記事>

記事やサイドバーの枠を丸くしたり、背景をグラデーションにするには

その他の囲み枠はこちらの記事をご覧ください↓↓↓

アメブロ 記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い・枠囲み)




以上、ワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント