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

参考：How To Create Depth And Nice 3D Ribbons Only Using CSS3

<h4>参考：<a href='http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/' target='_blank'>How To Create Depth And Nice 3D Ribbons Only Using CSS3</a></h4>
<style type="text/css">
div#demo {
    position:relative;
    margin:80px auto 0px auto; padding:0;
    text-align:center;
    width:700px;
}
.bubble {
    clear:both;
    margin:0 auto; padding:0;
    text-align:left;
    width:650px;
    background:#fff;
    position:relative;
    z-index:90; /* the stack order:displayed under ribbon rectangle (100) */
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.3);
    -khtml-box-shadow:0px 0px 8px rgba(0,0,0,0.3);
    -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.3);
}
/* リボン */
.rectangle {
    position:relative;
    left:-15px; top:30px;
    width:680px; height:50px;
    margin:0; padding:0;
    background:#7f9db9;
    float:left;
    z-index:100; /* the stack order:foreground */
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
    -khtml-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
}
.rectangle div {
    margin:0; padding:0;
    font-size:30px;
    color:#fff;
    padding-top:6px;
    text-shadow:1px 1px 2px rgba(0,0,0,0.2);
    text-align:center;
}
/* 左右のリボン下 */
.triangle-l {
    border-color:transparent #7d90a3 transparent transparent;
    border-style:solid;
    border-width:15px;
    width:0; height:0;
    position:relative;
    left:-30px;
    top:65px;
    z-index:-1; /* displayed under bubble */
}
.triangle-r {
    border-color:transparent transparent transparent #7d90a3;
    border-style:solid;
    border-width:15px;
    width:0; height:0;
    position:relative;
    left:650px;
    top:35px;
    z-index:-1; /* displayed under bubble */
}
/* ボックス内 */
.info2 {
    margin:25px 0 0 0; padding:10px 25px 35px 25px;
}
.info2 p {
    padding-top:10px;
    font-size:14px;
    line-height:1.5;
}
.info2 p a {
    color:#c4591e;
    text-decoration:none;
}
.info2 p a:hover {
    text-decoration:underline;
}
/* メニュー */
.menu {
    position:relative;
    top:-11px; left:80px;
    z-index:80; /* the stack order:displayed under bubble (90) */
}
.menu ul li {
    -webkit-transform:rotate(-45deg); /* rotate the list item */
    -moz-transform:rotate(-45deg); /* rotate the list item */
    width:140px;
    overflow:hidden;
    margin:0 0 0 -85px;
    padding:5px 5px 5px 5px;
    float:left;
    background:#7f9db9;
    text-align:right;
}
.menu ul li a {
    color:#fff;
    text-decoration:none;
    display:block;
}
.menu ul li.l1 { background:rgba(131,178,51,0.65); }
.menu ul li.l1:hover { background:rgb(131,178,51); }
.menu ul li.l2 { background:rgba(196,89,30,0.65); }
.menu ul li.l2:hover { background:rgb(196,89,30); }
.menu ul li.l3 { background:rgba(65,117,160,0.65); }
.menu ul li.l3:hover { background:rgb(65,117,160); }
</style>

<div id="demo">
    <div class="menu">
        <ul>
            <li class="l1"><a href="#">PHP</a></li>
            <li class="l2"><a href="#">JavaScript/DOM</a></li>
            <li class="l3"><a href="#">Ajax</a></li>
            <li class="l1"><a href="#">HTML5</a></li>
            <li class="l2"><a href="#">XHTML</a></li>
            <li class="l3"><a href="#">モバイル</a></li>
            <li class="l1"><a href="#">音声･動画配信</a></li>
            <li class="l2"><a href="#">MySQL</a></li>
            <li class="l3"><a href="#">Web関連特集</a></li>
        </ul>
    </div>
    <div class="bubble">
        <div class="rectangle">
            <div>PHP & JavaScript Room</div>
        </div>
        <div class="triangle-l"></div>
        <div class="triangle-r"></div>
        <div class="info2">
            <p>PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画のストリーム配信方法など、Webサイト制作に役立つ実用的なプログラミング・テクニックを解説しています。</p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=cocoism3"></script>
<!-- AddThis Button END -->
        </div>
    </div>
</div>