Css & Grafik Paylaşımlar

<style type="text/css">
html,body{margin:0px; padding:0px;height:100%}
body{
color:white;
background: #282537;
background-image: -webkit-radial-gradient(top, circle cover, #CCC 0%, #666 80%);
background-image: -moz-radial-gradient(top, circle cover, #CCC 0%, #666 80%);
background-image: -o-radial-gradient(top, circle cover, #CCC 0%, #666 80%);
background-image: radial-gradient(top, circle cover, #CCC 0%, #666 80%);
}
.renkli-menu{
margin:0 auto;
display:table;
padding:0;
list-style:none;
border-radius:10px;
background:#f3f3f3;
}
.renkli-menu li{float:left;}
.renkli-menu li a{
padding:10px;
text-align:center;
display:block;
line-height:90px;
height:50px;
width:50px;
background-repeat:no-repeat;
background-position:center 20%;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition:background 0.5s;
color:#5b5b5b;
text-decoration:none;
font-family:Arial;
font-size:12px;
font-weight:bold;
}
.renkli-menu li:first-child a{border-radius:10px 0 0 10px;}
.renkli-menu li:last-child a{border-radius:0 10px 10px 0;}
.renkli-menu li a:hover{
-moz-box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
color:white;
}
.favoriler{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/1-grayscale.png);}
.favoriler:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/1-white.png); background-color:#d16738;}
.donanim{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/2-grayscale.png);}
.donanim:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/2-white.png); background-color:#3896d1;}
.yazilar{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/3-grayscale.png);}
.yazilar:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/3-white.png); background-color:#95d138;}
.mobil{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/4-grayscale.png);}
.mobil:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/4-white.png); background-color:#d1ba38;}
.hayat{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/5-grayscale.png);}
.hayat:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/5-white.png); background-color:#d138c1;}
.gezi{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/6-grayscale.png);}
.gezi:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/6-white.png); background-color:#38d167;}
.hediye{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/7-grayscale.png);}
.hediye:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/7-white.png); background-color:#3871d1;}
.iletisim{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/8-grayscale.png);}
.iletisim:hover{background-image:url(http://www.adobewordpress.com/wp-content/uploads/test/images/8-white.png); background-color:#d13843;}
</style> <br />
<ul class="renkli-menu">
    <li><a href="#" class="favoriler">Favoriler</a></li>
    <li><a href="#" class="donanim">Donanım</a></li>
    <li><a href="#" class="yazilar">Yazılar</a></li>
    <li><a href="#" class="mobil">Mobil</a></li>
    <li><a href="#" class="hayat">Hayat</a></li>
    <li><a href="#" class="gezi">Gezilerim</a></li>
    <li><a href="#" class="hediye">Hediyeler</a></li>
    <li><a href="#" class="iletisim">İletişim</a></li>
</ul>

<script type="text/javascript" src="http://souldhack.googlecode.com/files/jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="http://img98.xooimage.com/files/b/e/2/bdallijava-3feb697.js"></script>     
<link href="http://img99.xooimage.com/files/6/4/a/bdallicss-3feb6ae.css" rel="stylesheet" type="text/css" />   
   
<div class="bdallihaberbyk"><img alt="" style="width: 260px;" src="http://img.webme.com/pic/b/bdalli/260haberkodu.png" />
<ul id="bdallihaber">
    <li><img alt="" src="http://img.webme.com/pic/b/bdalli/50haberkodu.png" />  <a class="yeni-haber" href="url">Yazı Başlığı</a>
    <p>Kısa Konu Bilgisi</p>
    </li>
    <li><img alt="" src="http://img.webme.com/pic/b/bdalli/50haberkodu.png" /> <a class="yeni-haber" href="url">Yazı Başlığı</a>
    <p>Kısa Konu Bilgisi</p>
    </li>
    <li><img alt="" src="http://img.webme.com/pic/b/bdalli/50haberkodu.png" />  <a class="yeni-haber" href="url">Yazı Başlığı</a>
    <p>Kısa Konu Bilgisi</p>
    </li>
    <li><img alt="" src="http://img.webme.com/pic/b/bdalli/50haberkodu.png" />  <a class="yeni-haber" href="url">Yazı Başlığı</a>
    <p>Kısa Konu Bilgisi</p>
    </li>
</ul>
</div>

<ul class="menu"> <!-- Menu Begin  -->

<li> 
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="user.png" alt="user.png">
    <span class="name">Ana Sayfa</span>
    <span class="description">açıklama alanı gelecek</span>
    </a>
</li>

<li>
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="comment.png" alt="comment.png">
    <span class="name">Hakkımızda</span>
    <span class="description">açıklama alanı gelecek</span>
    </a>
</li>

<li>
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="print.png" alt="print.png">
    <span class="name">Referanslar</span>
    <span class="description">açıklama alanı gelecek</span>
    </a>
</li>

<li>
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="edit.png" alt="edit.png">
    <span class="name">Hizmetlerimiz</span>
    <span class="description">açıklama alanı gelecek</span>
    </a>
</li>


</ul> <!-- Menu End -->

<style type="text/css">
.menu , .menu ul {
    width:202px;
    margin:auto;
    padding:5px;
    list-style-type: none;
    overflow:hidden;
    border:1px solid #eee;
}
.menu li {
    float:left;
    position:relative;
}
.menu li img {
    float:left;
    margin: 5px 0 0 5px;
    border:none;
}
.menu li a .name {
    float:left;
    width:166px;
    margin:0 0 0 5px;
    font-weight:bold;
    font-size:0.7em;
    cursor:pointer;
}
.menu li a:active, .menu li a:focus {
    outline:0;
}
.menu li a .description{
    float:left;
    width:161px;
    margin:-5px 0 0 5px;
    font-weight:normal;
    font-size:0.7em;
    cursor:pointer;
}
.menu li a:link, .menu li a:visited {
    height:35px;
    font-size:1em;
    color:#000;
    text-decoration:none;
    line-height:20px;
    border:1px solid #fff;
    display:block;
    font-weight:bold;
}
.menu li a:hover  {
    background:#eee;
}
</style>