はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

グラデーションメーカーでグラデーションを作る

 

今回は原色大辞典のグラデーションメーカーを使ってグラデーションの背景を作ってみました!

 

www.colordic.org

5色までのグラデーションを作れます。

超便利。

 

左右のグラデーション

次のコードを追加すると左右のグラデーションになります。

background: linear-gradient(to right, #ffe8f3, #ff3672, #fff0f5)

#の部分を入れ替えると自由にグラデーションが作れます。

 

<div style="background: linear-gradient(to right, #ffe8f3, #ff3672, #fff0f5); padding: 10px; border: 5px solid #FFC0CB;">本文を入れる</div>

本文を入れる

 

文字の色を変えたいときは次のコードを追加。

 <p style="color: #008080;">ここに文章</p>

 

<div style="background: linear-gradient(to right, #ffe8f3, #ff3672, #fff0f5); padding: 10px; border: 5px solid #FFC0CB;"><p style="color: #008080;">本文を入れる</p></div>

 

本文を入れる

 

上下のグラデーション

次のコードを追加すると上下のグラデーションになります。

background: linear-gradient(to bottom, #ffe8f3, #ff3672, #fff0f5)

 

<div style="background: linear-gradient(to bottom, #ffe8f3, #ff3672, #fff0f5); padding: 10px; border: 5px solid #FFC0CB;"><p style="color: #990000;">本文を入れる</div>

本文を入れる

 

すごく簡単に作れますね!

 

最近毎日のように闇バイト、強盗、暴行がニュースになってます。

ちょっと前までは特殊詐欺、オレオレ詐欺といった知能的な詐欺が流行ってたけど、今の犯罪は稚拙で凶悪。

普通の人が指示に従って犯罪を仕事のように犯す時代になってしまいました。

SNSという便利なツールが状況を思い切り悪くしています。

自分で考えて使わないと、道具はすぐに悪用されがち。

知識を身に着けて、自分を守らなければすぐ罠にかかる、そんな怖い時代になっていると感じます。