Chrome風のデザイン（CSS only）
- 投稿日 : 2011-10-24, 17:55
- 最終更新日時 : 2011-10-24 18:04:08（履歴）
- タグ（CSS）
- カテゴリ（Weblog）
- 記し人（luvsic）[PDF]
- 閲覧数（3361）
画像利用なし、CSS3利用のみでの、グラデーション・角丸、ボックスシャドウ、テキストシャドウを利用したChrome風のデザイン例です。残念ながらIE9以下には対応していません。
表示例（画像）
HTML
CSS
.box-head {
padding: 13px 0 18px 13px;
border: 1px solid #3690F0;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 0 #0073ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 8px 0px #fff;
-moz-box-shadow: inset 0px 0px 8px 0px #fff;
box-shadow: inset 0px 0px 8px 0px #fff;
background: -moz-linear-gradient(bottom, #3690F0, #73B8F2);
background: -webkit-gradient(linear, center bottom, center top, from(#3690F0), to(#73B8F2));
}
.box-body {
margin-top: -28px;
padding: 10px 10px;
border: 1px solid #7DB5DE;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
IE6～9でも対応させようとビヘイビアやJavascriptで試してみましたが、１つの要素に複数の効果をかけるとIEでの実現はけっこう難しく・・・断念しました。
No comments yet