Chrome風のデザイン(CSS only)

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

画像利用なし、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%63%32%35%30%61%33%34%37%62%38%61%63%34%33%39%63%33%64%30%64%38%63%66%39%37%37%35%61%64%32%63%32%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%61%32%39%33%39%65%32%39%33%61%66%66%62%32%65%31%34%34%30%36%32%33%35%35%39%36%64%66%61%37%66%62%22%3e
© 2006 – 2017 by Luvsic. Some rights reserved.