web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

ウィジェットに使えるデザイン

      2016/01/12

20130508-1

HTML部分

<!-- ウィジェットデザイン -->
<div class="widget">
<h4 class="widgettitle">コンテンツ</h4>
<ul class="post">
<li>レイアウト</li>
<li>ヘッダ</li>
<li>サイドバー</li>
<li>ボディ</li>
<li>フッター</li>
<li>タイトル</li>
</ul>
</div>

CSS部分

/* my css */

/* ---------------------------------------------------------------
ウィジェットデザイン
--------------------------------------------------------------- */
.widgettitle {
    background-color: #A9A9A9;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-bottom: 1px solid #848484;
    border-top: 1px solid #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    color: #333333;
    display: block;
    font: bold 14px/110% "Lucida Grande",Arial,"Lucida Sans Unicode",sans-serif;
    left: -18px;
    margin: 0 0 -5px;
    padding: 6px 18px 7px;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    top: -16px;
    width: 100%;
}
.widget ul {
    margin: 0;
    padding: 0;
}
.widget {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
    padding: 15px 18px;
}
ul {
    line-height: 140%;
    margin: 1em 0 1.4em 24px;
    padding: 0;
}
 .widget li:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
.widget li {
    border-bottom: 1px solid #DDDDDD;
    clear: both;
    list-style: none outside none;
    margin: 0;
    padding: 6px 0;
    display: block;
}
.widget li:last-child {
    border-bottom: medium none;
}

 - HTML・CSS