@appdamacyですペコリ(o_ _)ｏ))
今日は画像の上に透過グラデーションをかける方法を学びました。Photoshopなどの画像編集ソフトを使わなくてもさくっとCSSで実装できるのが便利ですね。
RESULT
今回はわかりやすく強めにかけてみました。グラデーションの色はサイトの雰囲気やコンセプトにあわせて選ぶといいのかなと思います。
HTML
CSS
フォントは「Google Fonts」で似合いそうな書体を探しました。英語はフォントが豊富なのがいい！
背景画像とグラデーションだけの簡単なコード
rgba( 0 , 0 , 0 , 0.8)の前から3つの数値で色の指定ができて、最後4つ目の数値で透明度の設定ができました。
数値を0.7とか0.9にすこしズラしただけでも、全体の雰囲気がかわって見えます。どれも格好良く見えてきてなかなか決められなくなります(ﾉ△･｡)
このサイトはカラーコードを変換（#FF0000からrgba(255, 0, 0, 1)みたいな）するときに使いました。ATOMのエディタ上でも変換できるらしいので近いうちに導入したいです。
お気に入りの配色ツール
ブログのデザインを変更するときには、このあたりのサイトを参考にして色を決めています。
今回使ったグラデーションは「uiGradients - Beautiful colored gradients」のもので200種類くらい用意されていて、逆に選ぶのが大変なくらいでした。
慣れてくると有名なブランドの配色をまとめている「BrandColors – Official color codes for the world's biggest brands」を参考にして「shade」を利用してグラデーションをつくってみるのも良さそうですね。
色使いのセンスも磨かなきゃ・・・明日も練習がんばりますペコリ(o_ _)ｏ))