CSS Social Tabs

acaz · โพสต์ 2013-8-3 10:55:48

เอามาแจกๆ
ตัวอย่าง

HTML
เปิด header.html ใส่ไว้หลัง <body>
โช๊ะ

<div class="righttab">
<div class="tab">
<img alt="" src="icons/sharethis.png" width="44" />
</div>
<div class="tabcontent">
<ul class="iconlist">
<li><a title="" href="#"><img alt="" src="icons/myspace.png" width="38" /><span>MySpace</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/quora.png" width="38" /><span>Quora</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/dribble.png" width="38" /><span>Dribble</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/sharethis.png" width="38" /><span>Share This</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/ember.png" width="38" /><span>Ember</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/google.png" width="38" /><span>Google</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/tumblr.png" width="38" /><span>Tumblr</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/lastfm.png" width="38" /><span>Last FM</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/vimeo.png" width="38" /><span>Vimeo</span></a></li>
<li><a title="" href="#"><img alt="" src="icons/youtube.png" width="38" /><span>Youtube</span></a></li>
</ul>
</div>
</div>

คัดลอกไปที่คลิปบอร์ด

CSS
เปิด common.css ใส่ไว้บรรทัดล่างสุด
โช๊ะ

.righttab
{
position: fixed;
width: 50px;
padding: 0 45px 0 0;
top: 50px; /** Height from top of screen **/
right: -95px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.righttab:hover
{
right: 0;
cursor: pointer;
}
.righttab .tab
{
position: absolute;
top: 15px;
right: 95px;
width: 44px;
height: 44px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.righttab:hover .tab
{
opacity: 0;
}
.righttab .tab img
{
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.righttab .tabcontent
{
width: 78px;
background: #EEE;
color: #555;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.righttab .tabcontent ul.iconlist
{
padding: 20px 20px 15px 20px;
}
.righttab .tabcontent ul.iconlist li
{
list-style-type: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.righttab .tabcontent ul.iconlist:hover li
{
opacity: 0.5;
}
.righttab .tabcontent ul.iconlist li a
{
position: relative;
display: block;
list-style-type: none;
height: 38px;
width: 38px;
margin: 0 0 5px 0;
text-decoration: none;
}
.righttab .tabcontent ul.iconlist li a img
{
border: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.righttab .tabcontent ul.iconlist li a span
{
width: auto;
right: 38px;
position: absolute;
visibility: hidden;
padding: 0;
white-space: nowrap;
line-height: 38px;
background: #EEE;
font-style: italic;
font-size: 12px;
color: #666;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.righttab .tabcontent ul.iconlist a:hover span
{
visibility: visible;
padding: 0 25px;
opacity: 1;
}
.righttab .tabcontent ul.iconlist li:hover, .righttab .tabcontent ul.iconlist li:hover a span
{
opacity: 1;
}

คัดลอกไปที่คลิปบอร์ด

เซฟ อัพเดทแคช 1 ที

งามมมมมม หยด

อันนี้ icon โหลดเอาขาย 100M

ขอบคุณโหลดฟรี {:30_1111:}

ป๋าบอม · โพสต์ 2013-8-3 10:57:07

เจิมๆๆก่อนเลยคับ ของคุงคับ

jaideejung007 · โพสต์ 2013-8-3 12:13:06

นานๆ มาทีนะพี่โจ้

{:26_1004:}

acaz · โพสต์ 2013-8-3 12:53:15

jaideejung007 ตอบกลับเมื่อ 2013-8-3 12:13
นานๆ มาทีนะพี่โจ้

มาถี่ไม่ไหวเดี๋ยวนี้ ต้องพักผ่อนเอาแรง {:30_1120:}

vutdesign · โพสต์ 2013-8-16 20:04:03

บอบคุณครับ...

บัญชี		จำสถานะนี้ไว้ในครั้งหน้า	ลืมรหัสผ่าน
รหัสผ่าน			สมัครสมาชิก

[CSS] CSS Social Tabs

ขออภัย! โพสต์นี้มีไฟล์แนบหรือรูปภาพที่ไม่ได้รับอนุญาตให้คุณเข้าถึง

คะแนน

โพสต์ที่เกี่ยวข้อง