19:52 - 01/04/2014

Menu Icon CSS3 đẹp giống Footer ThaiAiTi.com

    Thủ thuật tạo Menu Icon CSS3 đẹp cho blogspot, tốc độ load khá nhanh giống ở Footer ThaiAiTi


    - Bạn chèn đoạn CSS sau trên ]]></b:skin>
    .menucss3chantrang-thaiaiti {overflow: hidden;width: 940px;margin: 0 auto;}
    div.devices{margin-bottom:0px}div.devices .modcontent ul{list-style:none;display:table;text-align:center;margin:0;padding-top:20px}
    div.devices .modcontent ul
    li{display:inline-block}div.devices .modcontent ul li:hover a:before{background:url(https://lh4.googleusercontent.com/-o0kENSPTp3M/UxYZyfxgFaI/AAAAAAAAG5w/fQWp7F7yfE0/s0/icon_devices_hover.png) no-repeat left 0;padding-bottom:10px}
    div.devices .modcontent ul li a{-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;
    transition:all 0.2s ease-out 0s;padding:17px 50px 10px 0px;display:inline-block;position:relative;color: #333;font: 16px arial;text-transform: uppercase;}
    div.devices .modcontent ul li a:before{content:"";width:50px;height:47px;display:inline-block;background:url(https://lh6.googleusercontent.com/-vHfIg7Zr8FM/UxYZyN-T37I/AAAAAAAAG5s/L3d66PuAAXs/s0/icon_devices.png) no-repeat left 0;position:absolute;bottom:0px;left:0px;-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;transition:all 0.2s ease-out 0s}
    div.devices .modcontent ul li
    a.iphone{padding-left:60px}
    div.devices .modcontent ul li a.iphone:before{background-position:0px 0px}div.devices .modcontent ul li
    a.ipad{padding-left:70px}
    div.devices .modcontent ul li a.ipad:before{background-position: -70px 0px;width:58px}div.devices .modcontent ul li
    a.android{padding-left:60px}
    div.devices .modcontent ul li a.android:before{background-position: -142px 0px}div.devices .modcontent ul li
    a.tv{padding-left:85px}
    div.devices .modcontent ul li a.tv:before{background-position: -207px 0px;width:74px}div.devices .modcontent ul li
    a.page{padding-left:90px;padding-right:0px}
    div.devices .modcontent ul li a.page:before{background-position: -305px 0px;width:79px}
    - Chèn đoạn code sau vào nơi bạn cần hiển thị menu:
    <div class='menucss3chantrang-thaiaiti'>
    <div class='module devices'>
           <div class='modcontent clearfix'>

    <ul>
    <li>
    <a class='iphone' href='http://www.thaiaiti.com/search/label/Template%20blogger'>Design</a></li>
    <li>
    <a class='ipad' href='http://www.thaiaiti.com/search/label/Photoshop'>PSD</a></li>
    <li>
    <a class='android' href='http://www.thaiaiti.com/search/label/iphone'>Mobile</a></li>
    <li>
    <a class='tv' href='#'>Video</a></li>
    <li>
    <a class='page' href='http://www.thaiaiti.com/search/label/Avid%20liquid%207'>Media</a></li>
    </ul>
       </div>
    </div>
    </div>
    - ThaiAiTi.com chúc bạn thành công !

Bình luận & Góp ý

0 nhận xét:

Đăng nhận xét