立体的なボタンを作る
<a>タグで立体的なボタンを作ってみます。
ボタンに影をつけることによって、立体的に見えるようにします。
また、ボタンにカーソルを当てた時の、カーソルの形も変更してみます。
影をつける
ボックスに影を付けるためにはbox-shadowプロパティを用います。
「影の位置」と「影の色」を指定します。
style.css
.box{box-shadow:10px10px#000000;/* 水平方向 垂直方向 色 */}垂直方向のみつけると立体っぽくなる
style.css
.btn{box-shadow:0px6px#000000;}cursor
cursorプロパティを用いることでマウスのカーソルが要素に乗ったときのカーソルの形を変えることができます。
タグによってcursorが初期状態で設定されているものもあり、例えば<a>タグは初期状態でpointerが設定されています。
style.css
.box{cursor:pointer;/* text, pointer, default */}ボタンを押したらへこむようにする
ボタンを押したときに以下の処理をすると、へこんで見えるようになります。
・影を消す
・ボタンの位置を影の分だけ下げる
active
セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができます。セレクタ:activeというように指定します。
style.css
div:active{background-color:red;}CSSを打ち消す
box-shadow: none;とすると、影を消すことが出来ます。
このように多くのプロパティはnoneを指定することによって消すことができます。
style.css
.btn:active{box-shadow:none;/* 影を打ち消し */}position: relative;による位置の変更
要素の位置を変更する方法を学びましょう。
前回position: relative;はposition: absolute;の基準位置を決めるために使っていましたが、要素の位置を変更するためにも使うことが出来ます。position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせます。
style.css
.btn:active{position:relative;top:6px;left:10px;}ボタンを凹ませる
クリック時に、以下の処理をすることによって、ボタンがへこんで見えるようになります。
・box-shadowをnoneにする
・position: relative;とtopによって影の分だけ位置を下げる
style.css
.btn:active{position:relative;top:6px;box-shadow:none;}