PHP & JavaScript Room :: 設置サンプル

Snazzy Bordersの設置サンプル

実行結果

クリスピー・クリーム・ドーナツ

新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。ドーナツの箱がピザの箱みたいで、味もアメリカン!ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもw

ソース

<style type="text/css">
    /* Snazzy Borders - http://www.cssplay.co.uk/boxes/snazzy.html */
    #xsnazzy { background:transparent; margin:1em; padding:0; }
    #xsnazzy .h, #xsnazzy p { margin:0; padding:10px 15px; line-height:2em; }
    #xsnazzy .h { font-size:1.5em; color:#60c8d8; padding-bottom:0; font-weight:bold; }
    #xsnazzy .xtop, #xsnazzy .xbottom {display:block; background:transparent; font-size:1px; }
    #xsnazzy b { display:block; overflow:hidden; }
    #xsnazzy .xb1, #xsnazzy .xb2, #xsnazzy .xb3 {height:1px; }
    #xsnazzy .xb2, #xsnazzy .xb3, #xsnazzy .xb4 {background:#f2f9fd; border-left:1px solid #c8ebf9; border-right:1px solid #c8ebf9; }
    #xsnazzy .xb1 { margin:0 5px; background:#c8ebf9; }
    #xsnazzy .xb2 { margin:0 3px; border-width:0 2px; }
    #xsnazzy .xb3 { margin:0 2px; }
    #xsnazzy .xb4 { height:2px; margin:0 1px; }
    #xsnazzy .xboxcontent { display:block; background:#f2f9fd; border:0 solid #c8ebf9; border-width:0 1px; }
</style>
<div id="xsnazzy">
    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    <div class="xboxcontent">
        <div class="h">クリスピー・クリーム・ドーナツ</div>
        <p>新宿高島屋のサザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん<strong>「クリスピー・クリーム・ドーナツ」</strong>。ドーナツの箱がピザの箱みたいで、味もアメリカン!ビジュアルから行ってさぞかし劇甘なんだろうなと思ったけど、意外とほどよい甘さ。生地はかなりソフトなので固めでサクサクしたドーナツが好きな人にはおすすめできないかもw</p>
    </div>
    <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

polarized women