CSSができるともっと広がる、できること!

CSSができると、ボタンにアニメーションをつけられます!

よく、マウスカーソルを当てた時に、ボタンや画像が白みがかかる動きや、他の画像に切り替わる動き、ボーダーが出るような動きを見かけたことはありませんか。
CSSができると、ボタンや画像にマウスを乗せた時にこのような動きをつけることができます。
使うのは「hover」という疑似クラス。疑似クラスというのは少し難易度が高いかもしれませんね。CSSでは、「ボタンや画像にマウスカーソルが乗った時」を「要素名:hover」と表します。
応用すると、ボタンや写真に重ねるように文字を出したり大きさを変えたり、背景でもマウスの位置にあわせて切り替えることができます。
動きをつける時には、jQueryというjavascript言語がよく使われます。その時にもCSSの基礎知識は必要なため、まずはCSSでできるアニメーションを覚えるのが効果的です!

CSSができると、影付き角丸グラデーションボタンが作れます!

画像がなくてもできる、立体的な角丸グラデーションボタンを紹介します。スタイルをクラス指定で一回定義しておけば、送信ボタンや確認ボタンのスタイルを一気に切り替えることができメンテナンス性も上がります。
では、ヒントを今から伝えたいと思います!角丸には「border-radius:(好みの値);」、グラデーションには「background:-moz-linear-gradient(好みの値)(Firefox用) /background:webkit-gradient(好みの値) (Safari,Google Chrome用); 」を指定します。立体的にするため、「box-shadow:(好みのオフセット、色); 」を指定すれば OK。詳しくは、検索してみてくださいね。