~~~~~~~ ~~~~~~~~~~ ~~
Desinqer.tr.gg
Profesyonel Webmaster Servisi

Dost Siteler

Kod-Hacker
Akkaya-Reklam
Siteni Ekle
Siteni Ekle
Siteni Ekle

Reklam
------------


~~~~~~~~~~

desinqer

sağtaraf

Merhaba,Arkadaşlar Everenle uzun zamandır Bir Follow Sosyal ağ arıyorduk tasarımın sağ tarafınaUzun bir süre araştırma sonucu Tr.gg uyarladım Css3 Follow Sosyal ağı size sunuyorum az size özelliklerinden bahsetmek istiyom (:
CSS3 Follow Sosyal Ağ (:
Özellikleri
  • Sağ köşede table şeklinden yukarı,aşağa iniyor cıkıyor.
  • Turuncu arkaplan,Beyaz kenarlı
  • Şık tasarımlı icionlu (:

Css Ekleniz
/* The tab itself */

#followTab {

/* No bullets */
list-style: none;

/* Position and float the tab */
position: fixed;
z-index: 1;
right: 0;
top: 130px;

/* Give the tab width and padding */
width: 24px;
padding: 8px 5px;

/* Add the curved white border */
border: 3px solid #fff;
border-right: none;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;

/* Add the drop shadow */
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
box-shadow: 0 0 7px rgba(0, 0, 0, .6);

/* Add the semitransparent gradient background */
background: rgba(239, 91, 10, .75);
background: -moz-linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
background: -webkit-gradient( linear, left top, left bottom, from( rgba(243, 52, 8, .75) ), to( rgba(239, 91, 10, .75) ) );
background: linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr='#c0f33408', endColorStr='#c0ef5b0a', GradientType=0 );
}

/* Items within the tab */

#followTab li {
margin: 9px 0 0 0;
line-height: 0;
}

#followTab li:first-child {
margin-top: 0;
}

/* General style for buttons within the tab */

#followTab a {
display: block;
width: 24px;
background-image: url("https://img.webme.com/pic/h/hibycocuk/follow-tab-buttons.png");
}

#followTab a span {
display: none;
}

/* "Newsletter" button */

#followTab a.newsletter {
height: 16px;
background-position: 0 0;
}

#followTab a.newsletter:hover {
background-position: 0 -16px;
}

/* "RSS" button */

#followTab a.rss {
height: 24px;
background-position: 0 -32px;
}

#followTab a.rss:hover {
background-position: 0 -56px;
}

/* "Twitter" button */

#followTab a.twitter {
height: 15px;
background-position: 0 -80px;
}

#followTab a.twitter:hover {
background-position: 0 -95px;
}

/* "Facebook" button */

#followTab a.facebook {
height: 24px;
background-position: 0 -110px;
}

#followTab a.facebook:hover {
background-position: 0 -134px;
}



<!--[if lt IE 7]>

<style type="text/css">

/* Band-aid for IE6 */

#followTab {
position: absolute;
}



<![endif]-->



/* Add some margin to the page and set a default font and colour */

body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8em;
color: #333;
}

/* Set the content dimensions */

/* Header/footer boxes */

.wideBox {
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}

.wideBox h1 {
font-weight: bold;
margin: 20px;
color: #666;
font-size: 1.5em;
}
Tasarım altı üstü,koplanmaz,İçerik kısmı. Ekleniz

<ul id="followTab">
  <li><a class="newsletter" href="#" title="Subscribe to the Elated Extra newsletter"><span>Subscribe to the Elated Extra newsletter</span></a></li>
  <li><a class="rss" href="#" title="Subscribe to Elated.com's RSS feed"><span>Subscribe to Elated.com's RSS feed</span></a></li>
  <li><a class="twitter" href="#" title="Follow Elated.com on Twitter"><span>Follow Elated.com on Twitter</span></a></li>
  <li><a class="facebook" href="#" title="Follow Elated.com on Facebook"><span>Follow Elated.com on Facebook</span></a></li>
</ul>
Not: Arkadaşlar resimleri değişemeniz için ben dosyananın içine ps koydum

link


http://www.4shared.com/file/AnnyqkIC/css3-floating-follow-tab-with-.html?nowww=235&nowww=247&nowww=223&nowww=276





Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

Bugün 1 ziyaretçi (19 klik) kişi burdaydı!
desinqer
desinqer.tr.gg
Akkaya Reklam => Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=