[CSS3] ازرار المواقع الاجتماعية بطريقة احترافية مع تلميح
| إدارة الموقع | | المشاركات : 7659
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
|
موضوع: [CSS3] ازرار المواقع الاجتماعية بطريقة احترافية مع تلميح |
السلام عليكم اعزائي يأتيكم دائماً دعم شباب بالجديد نقدم لكم كود ازرار المواقع الاجتماعية لتعريضها في موقعك بطريقة احترافية ومميزة المعاينة الاكواد عبارة عن CSS + HTML HTML - الكود:
-
<div class="center"> <ul class="nav-tt"> <li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li> <li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li> <li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li> <li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li> <li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li> <li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li> <li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li> <li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li> <li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li> </ul></div> CSS3 - الكود:
-
html { padding: 0; margin: 0; height: 100%; background: #F7F7F7; box-shadow: inset 0px 0px 1000px 50px rgba(0, 0, 0, 0.38); -webkit-box-shadow: inset 0px 0px 1000px 50px rgba(0, 0, 0, 0.38); font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } .center{ margin: 250px 15px } .nav-tt{ padding: 50; width: 70%; height: 70px; margin: 80px auto 30px auto; } .nav-tt li{ float: left; list-style: none; } .nav-tt li a{ display: block; width: 40px; height: 40px; margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px; text-decoration: none; } .nav-tt li .gplus{ background: url(https://lh4.googleusercontent.com/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat; } .nav-tt li .twitter{ background: url(https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat; } .nav-tt li .pinterest{ background: url(https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat; } .nav-tt li .facebook{ background: url(https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat; } .nav-tt li .linkedin{ background: url(https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png)no-repeat; } .nav-tt li .tumblr{ background: url(https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat; } .nav-tt li .youtube{ background: url(https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat; } .nav-tt li .mail{ background: url(https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat; } .nav-tt li .rss{ background: url(https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/rss.png) no-repeat; } .nav-tt li a span{ width: 80px; height: 80px; line-height: 80px; padding: 10px; left: 50%; margin-left: -60px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 5px solid #ffffff; background: rgba(255,255,255,0.5); text-indent: 0px; position: absolute; pointer-events: none; border-radius: 50%; bottom: -40px; opacity: 0; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .nav-tt li a span:before, .nav-tt li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 11px solid rgba(0,0,0,0.1); } .nav-tt li a span:after{ bottom: -13px; margin-left: -10px; border-top: 10px solid #ffffff; } .nav-tt li a:hover span{ opacity: 0.9; bottom: 50px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
هكذا يتبقى عليك تغير روابط الوصلات مكان اشارة # المربع اتمنى المتعة والفائدة للجميع اخوكم حسن في حفظ الرحمن |
|