いうのを実際にやってみました。何はともあれ↓が出来上がったものです。負けてないと自負しています...さて、これを作る手順です。※Chromeで表示して画像にしています。実際のものはこちらから見れます。ベースとなるHTMLを用意まずは、こんなHTMLを用意しました。このHTMLをベースに、CSS3を総動員していきます。入っていますが、こいつらには後で仕事をさせます。CSSでボックスを作る幅と高さを指定してボックスを作ります。中のSPANタグを絶対値でポジショニングするために指定しています。付けて外枠を作ります。ベンダープレフィックスは、わかり易くするために付けていません。透明度(0.5の部分)を指定しています。透明度を指定することで、背景となじむのでリアルな表現では便利です。今のところこんな感じです。使って丸いボタンにします。値に半径以上の値を指定すると円になります。使うと丸いボタンを作ることができます。ここら辺の記事でも書いていますので、参考にしてください。ボタンぽくなってきましが、まだ立体感がありませんね。次は色を入れていきます。使って円形グラデーションで塗りつぶします。グラデーションの中心部分は、少し下側にずらしています。#0055C1);}ガラスの表現では、下地となるグラデーションを作る際に、明るい部分を下側にして作ることがあります。楽しくなってきました。ここから、光の表現を付け加えていきます。rgba(0,0,0,0.5);}きれいな影を作るには、環境光を意識して、ふんわり付けるのがリアリティーを生み出すセオリーです。ぼかし具合を調整して、ふんわり影を表現しています。ここまででこんな↓感じです。ボタンになってきました。重ねて、ガラスが乱反射してできる光を表現してみたいと思います。カンマで区切りで複数指定できるので、ステップ5の影に追加する形で記述します。0.7);}透明度とぼかしを使ってぼやーとした光を表現しています。ハイライトを作るガラスと言えばハイライトですね。ハイライト部分を作ります。transformで変形させ、楕円を作っています。他にも方法があるかもしれませんね。rgba指定を使うと、透明度でグラデーションできます。レイヤーモードのないCSS3では、必須のテクニックです。ここまででこんな感じです。最終形に近づいてきました。内側の影を付けるまだ終わりません。使って、ふちの内側に黒い影を混ぜます。rgba(0,0,150,0.6);}この表現は、丸いガラスの表現に欠かせません。円の内側の黒いグローが見えますか?なんというか、ガラスのふちの丸みが表現できていると思います。使えるので、鏡面反射を表現できます。鏡面反射するだけだと面白くないので、コースティクスのような光を表現してみました。具体的には、反射をマイナス値でポジショニングして、本体と重ねてうっすら見えるように調整します。テキストのグローお疲れ様です!、最後にテキストを追加して終わりです。使って少し発光しているように、表現しています。1;}テキストがガラスの表面なのか、底にあるのかで表現も変わってきますね。具体的には、ガラスの表面の場合は、底にうっすら影を落とします。反対に底にある場合は、ガラスの表面に反射ができます。完成!これで完成です。実際のブラウザで見たい方は、こちらを見てください。ソースコードも見れます。今回の内容は、多少マニアックな内容になってしまいましたが、ポイントだけでも覚えておくと、CSSだけでなくグラフィックソフトなどでも、応用が利く内容だと思います。格闘しながら、研究してみてください。Tweetnambaど田舎でプログラマーとかWebデザイナーとかやりながらWebサービスを作る人。PHP、jQueryなどの技術系の記事担当してます。がんばって記事を書くので、リアクションしてくれると嬉しいです。スマートフォンスマートフォンからも最新のロケットをチェックできます。同じURLからアクセスできます。記事をチェック基本、毎日記事を書いています。よかったらチェックしてください。素材を最大限に活かすデザインアイデア50。