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

CSS Social Tabs

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



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

บอบคุณครับ...
หน้า: [1]
ดูในรูปแบบกติ: CSS Social Tabs