こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は、CSS3を使って、
マーブルチョコの様なボタンを
作ってみようと思います。
円形を作って、グラデーションで
ツヤがあるように表現しています。
まずはhtmlタグはこの様に設定してあります。
|
1 2 3 4 5 |
<ul> <li class="iro1"><a href="#">Web</a></li> <li class="iro2"><a href="#">CSS3</a></li> <li class="iro3"><a href="#">c-side</a></li> </ul> |
そして、CSSの設定はこちらです。
一番左の赤いボタンのCSSだけ貼りますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
ul li.iro1 { list-style:none; display:inline-block; width:100px; height:100px; border-radius:50px; margin:20px; -webkit-box-shadow: inset 1px 1px 3px rgba(255,255,255,0.5),1px 1px 2px #333,inset -1px -1px 2px rgba(0,0,0,0.5); box-shadow: inset 1px 1px 3px rgba(255,255,255,0.5),1px 1px 2px #333,inset -1px -1px 2px rgba(0,0,0,0.5); background: radial-gradient(30px 30px,#fec0b9 0px,#cd0000 80px); background: -webkit-gradient(radial,30 30,0,30 30,80,color-stop(0.00,#fec0b9),color-stop(1.00,#cd0000)); background: -webkit-radial-gradient(30px 30px,#fec0b9 0px,#cd0000 80px); background: -moz-radial-gradient(30px 30px,#fec0b9 0px,#cd0000 80px); } ul li a{ display:block; text-decoration:none; text-align:center; width:100px; height:100px; font-family: "Arial Black", Gadget, sans-serif; color:#fffbf4; text-shadow: 0 -1px 1px rgba(0,0,0,0.5); border-radius:50px; font-size:24px; letter-spacing:-1px; line-height:4.1; } |
「border-radius」で角丸を指定しています。
円の大きさを縦横100pxに対して
角丸を50pxにすると、ちょうど円形になります。
そして、box-shadowで
ボタンに影を付けています。
backgroundでグラデーションの背景色や、
開始位置、終了位置を指定しています。
ボックスの左上から30px右下の位置をグラデーションの
中心として、半径80pxで赤い色を入れている形になります。
薄い赤色を「#fec0b9」
濃い赤色を「#cd0000」
で設定しました。
テキストの文字にも
text-shadowで若干影が入っています。
色合いや影の付け方などで、
ボタンのツヤ加減なども変わってきたり
質感も違く見えたりすると思いますので、
数値などいじってみて変化を試してみて下さいね。
こちらにデモページを設定しましたので
良かったらご確認下さい。
【 デモページ 】
では、また来週お会いしましょう。
●３年ぶりに帰ってきた「藤田哲也の個別コンサルティング」
