Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【ツール】linear-gradientで遊ぼう!

 どうも!LSSです!!

 

これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。

 

 

linear-gradientで遊ぼう!









 

コード

 

 

 

使い方

色選択ボックスとスライダーのセットが9つ、並んでいます。

ここで指定された色がそのまま、「上から下に向かうlinear-gradient」に設定されたグラデーションが、下の枠に反映されます。

スライダーはそれぞれの位置指定(%)に該当します。

 

色選択やスライダーをいじると、リアルタイムに枠のグラデーションが変化し、またその状態のlinear-gradientのコードが表示されます。

 

CSSとしてこの生成されたコードを使用する場合は、

background-image:linear-gradient(なんとかかんとか);

赤文字部分を生成されたものに置き換える事で使用できます。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^