アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

グラデーションカラーを表示してみる!

f:id:simpledancer:20170108160512j:plain

 

CSS(Cascading Style Sheets)とは、ウェブページのstyleを指定するための言語です。文書のスタイルを指定する技術全般をスタイルシートといいます。HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、CSSが一般的に利用されています。

Udemyさんのサイトが分かりやすいと思ったのでリンク貼ります。ちなみに私はUdemyでJavaとJavaScriptを購入しました。(エクリプスの日本語化ができたのはUdemyさんのおかげだと思ってますw)

udemy.benesse.co.jp

でもって今回はその中でも色、特にグラデーションについて書きたいなと思います。

背景画像やらを変える時、色指定をするじゃないですか?

例:

body{

 

backgroundcolor:#cc9999;

}

これを例えばピンクのグラデーションにしたい❤️

と思ったら

body{

backgroundcolor:linear-gradient(#cc9999,#9941D8)

 

}

とかにすると

スクリーンショット 2016-09-03 9.08.04

 

ピンクと紫のグラデーションになりました。

※ちなみにこちらはストップウォッチアプリをdotinstallを見て作りました。

これにdegをつけると斜めに色が付きます

body{

backgroundcolor:linear-gradient(-100deg,#cc9999,#9941D8)

}

スクリーンショット 2016-09-04 4.05.30

右上にかけてピンクっぽくなりました❤️

私は勉強中故、どれくらいの角度とか細かい設定はまだ全然わからないんですが

backgroundプロパティにlinear-gradient(ちなみに円形にふんわりするにはradial-gradientを使うと丸〜くグラデーションになります。)つけるだけでこんなに可愛くできるんだってのを知ってテンション上がりました!(単純)しかし、プログラマー歴十数年のonlineの代表も「単純なことを喜べることが大事」とかって言ってましたので。

小さな一歩を喜ぼうと思いました。

続く☆

※2016年9月4日のwordpressブログを加筆修正しました。