要素や画像の角を丸くしたり、影やグラデーションを付けたりなど自分で書くには面倒くさいCSSコードを自動で簡単に生成してくれるサイトさんを紹介します!
(しかも各WEBプラウザ対応コードまで付けてくれる親切設計!)
↓ このような感じの要素が簡単に生成できます
CSS3 GENERATORへのアクセス
上記の"CSS3 GENERATOR"さんのサイトにアクセスしてください。
アクセスすると以下のような画面が出てくると思います。
左側にあるコントローラを調整することで、自由に要素の形やグラデーションを変更することが出来ます。
以下、各値の説明
① border-radius: 要素の角の丸さを調整します。
② box-shadow: 要素の周囲の影を調整します。
③ background gradient: "ON"にすると要素に色の色彩(グラデーション)がつきます。 "from"が上方の色彩、"to"が下方の色彩となります。
④ opacity: 要素の透明度を調整します。
⑤ preview: 現在の要素の状況が表示されます。
⑥ 全ての調整が済んだら、"GET THE CODE!"ボタンを押して、表示されるCSSコードをコピーして 要素に適用してください。(やたらコードが長くなる場合がありますが、各Webプラウザに対応させるためです)
以上でCSSの実装は完了です!自分で書くと大変面倒なCSSコードを簡単に生成することができました!