Chrome風のデザイン(CSS only)

  • 投稿日 : 2011-10-24, 17:55
  • 最終更新日時 : 2011-10-24 18:04:08(履歴)
  • タグ(
  • カテゴリ(Weblog
  • 記し人(luvsic[PDF]
  • 閲覧数(1817)

画像利用なし、CSS3利用のみでの、グラデーション・角丸、ボックスシャドウ、テキストシャドウを利用したChrome風のデザイン例です。残念ながらIE9以下には対応していません。

表示例(画像)

Chrome風のデザインサンプル(CSSオンリー)

HTML

<div style="width: 300px;">
        <h2 class="box-head">タイトル</h2>
        <div class="box-body">
                内容・テキスト等<br />
                内容・テキスト等<br />
                内容・テキスト等<br />
                内容・テキスト等<br />
                内容・テキスト等
        </div>
</div>

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で試してみましたが、1つの要素に複数の効果をかけるとIEでの実現はけっこう難しく・・・断念しました。

Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%30%62%61%61%39%65%61%36%30%61%37%38%65%66%62%32%66%36%35%31%38%39%63%37%38%35%32%32%34%36%61%63%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%38%31%64%33%64%65%33%66%34%64%33%62%65%30%63%66%36%32%64%65%63%61%66%62%66%62%32%66%34%36%37%31%22%3e
© 2006 – 2017 by Luvsic. Some rights reserved.