ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

HP・ブログ関連

要素に影やグラデーション・角の丸みを適用するCSSを生成してくれるおすすめサイト

2019年4月8日

要素や画像の角を丸くしたり、影やグラデーションを付けたりなど自分で書くには面倒くさいCSSコードを自動で簡単に生成してくれるサイトさんを紹介します!

(しかも各WEBプラウザ対応コードまで付けてくれる親切設計!)

↓ このような感じの要素が簡単に生成できます

CSS3 GENERATORへのアクセス

css3generator.com/

上記の"CSS3 GENERATOR"さんのサイトにアクセスしてください。

アクセスすると以下のような画面が出てくると思います。

左側にあるコントローラを調整することで、自由に要素の形やグラデーションを変更することが出来ます。

以下、各値の説明

① border-radius: 要素の角の丸さを調整します。

② box-shadow: 要素の周囲の影を調整します。

③ background gradient: "ON"にすると要素に色の色彩(グラデーション)がつきます。 "from"が上方の色彩、"to"が下方の色彩となります。

④ opacity: 要素の透明度を調整します。

⑤ preview: 現在の要素の状況が表示されます。

⑥ 全ての調整が済んだら、"GET THE CODE!"ボタンを押して、表示されるCSSコードをコピーして 要素に適用してください。(やたらコードが長くなる場合がありますが、各Webプラウザに対応させるためです)

 

以上でCSSの実装は完了です!自分で書くと大変面倒なCSSコードを簡単に生成することができました!

-HP・ブログ関連
-, , , , , ,

Copyright© ゲマステ!- Gamers Station , 2019 All Rights Reserved.