اجعل ايقونات مدونتك تدور!(spin it )

Tweet

Pin It

اليوم معنا اضافة او تقنية جميلة وهي ما يعرف ب ال spin

اي الغزل او الدوران المشابه لحركة المغزل

سنطبق على ايقونات المواقع الاجتماعية

وبعيدا عن منهج ابحث على الوسم head 

  ساطرح مثالا وانت لك حرية التعديل والتغيير 

 Demo

كود css

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQEkoPeJiRWg4JqKjFky-gwmQld_5rIAjLLJWBJeX3oYJfZ-C6wjp7KzKg3uCl8KJxV0tN9mdtSUpYpwgSXlfNm4hrCCnoGc3OJrIpRaIb4dq40mm94OJHCBBEqnf42XkE6EZQPEeqH0/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8hTKHSl3OI-OTqSwYzNx0m58YNE51_T6Eh-JMRs9uhtepfFGIDtiozivUDbNtnT1yW8pRiNDmndHzPPkfnmaBTp6-T4OtPpdSA-u_oUTMvpQc2cQx7Y2ldVMNTv7KavAv87_EWLsqS4/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJV5fwrJzXA53Gysc1WLxs4HMMgxQ2JMl0OSv0qJcOSdjdU23ZItsJo4HG7_-Pnz3YiDNy5jESwASyXNYmXTCfvMvDaOd8E2UIGSwTHAbmJtJk9W6UacCHCR11BXauRBIqSQAHD-gzUa8/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJSCtiiaPlcqMNioaQfQ-nwcOPqI68n0uSdYVCjMthIbjIb97OmDBzmjI5ROtyuTQEZM_Y6kcv7kamiG_rGZNNX_VoBxAKXLQmIUpzsF1D4upNDl4TUEWJVPzDzsnquOt5hqQq6vOWxc/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCF0fE9UoeZwqFKY2baECnieUzea5h8bo3C4LjRRLfr5hl3wdQiWr4SaygMkKQkpyh-WSzX3RtnFKqbvYLhm2Zx2Loby0EnOeNpv_NzuH7-sM6_xaxf3v300N38cwDsv5JUzJsbPOhiI8/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc75V_6L6wKmixP-SSpj3S780UBaHS_0cAAlm513Oonznbv2MVUtUJah1NzGPrJTvCNbwJWr4pGxsJiye4ZNiCPX47o1GwtXJjq7ot3tO-LHC2-FHhL9QyIIZ0N1rNnnp-sKJNpFJ9o-A/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGsjpg02zMF0ruyWK-0O9eCAzRAsubwappRow7r8lNL8ohPBl5nBdz1bOBjewFKBVO4YYJX7RVd3SgQbOjWi3VahojOj0re-RAPgd6vSPPcWiWlozYVjncV5pDbNyKfpeohZV-6Al2qA/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFC1OkLlaN5HaHuCNuQ7gsjoU1pJwMuMb7AJYBJfQFuhG8D7nKAIGVwmOcxsmRW9OIKKSN5YOZyFKtXuy-cUryJRp_kHaT2OFb0_Jci0CIDIUpx0Nm4AmQ-X5ajj4eeqzgNUuOtO6vcM/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdBigRAWfMbY6g9D4NluIn0WQvMCK3n9gL_52RLyNs7ypWjbWTC1TPZ9ENUvHXJAH3giakkf0UfmuIvbrYVJVcP5c8bko-RQ8Ej-t_pdohgNi7CodJep9vP8anHAqAEogA4GIFZr2w8k/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQuA6sySxcBR6omZqeH5MJ5cjyuuQR1fWRO24Vtp8NLNOabmZrBjfIb_ooAKlC_JQqnSQNFNYzK4hONUDEVGp0Uzhw5O-ibZb1y8VcLny90PA_rkrvkvxD-HbGdVzvOBY5Ygwk3v8U7E/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcBPKucf6Nr-9WMLSUR2_BqU3wqQowCr-pQ0JbrPtRkuqtCEiklYl5YD78O13LJyZHASoi-jTiF5qCufVpXOKiBOqCuCTOB5-6KtVJAmPnPbltjqmU9ijgRpDl1fxhU5dJpUl74IvZVE/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJV6oBHYSVtiNF6yMp109RsLT_TZF3Te7HzBdPLnK4nNRjBboggZb5PI-7-m8otMnRAm54fkb4jAu1OlStLYvIedm57hoYiI1Jz33N4KDoa2RYB9C79HKw-oj0kIeA0vsHqmHowWPEic/s1600/youtube_32.png'); }

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

الان ساوضح لك مايمكن ان تعدله في حال اردت تخصيص الاضافة 

لن اتحدث عن روابط صور الايقونات فهذا امر واضح 

في اعلى الكود السابق ستجد

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

 width:48px;
    height:48px;  هذه ابعاد الايقونات اللتي استخدمتها غيرها الى مايناسبك

 اما باقي الخصائص فدعها كما هي
الان في اخر الكود ستجد خصائص تاثيرات الهوفر

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);


هذا هو التاثير الذي يهمنا وهو الاستدارة 360 ثم العودة 360 درجة تستطيع ايضا التحكم في درجة الدوران والعودة كما يناسبك

اما مابين الكودين فتستطيع اضافة او حذف عنصر كما تشاء
فلو اردت اضافة عنصر فقط تضيف

 .اسم العنصر{ background:url('رابط العنصر'); } 

 ولو واجهتك مشاكل في حفظ القالب اضف العنصر بالطريقة التالية

.اسم العنصر{ background:url('رابط الصورة'); }

نفس الشيء لو اردت الحذف
 
اسم العنصر يكون بحروف انجليزية طبعا




الان لم يبق الا كود html

  <div class="spinning_icons">
    <a href="الرابط" class="twitter" title="twitter">Twitter</a>
    <a href="الرابط" class="delicious" title="delicious">Delicious</a>
    <a href="الرابط" class="digg" title="digg">Digg</a>
    <a href="الرابط" class="dribbble" title="dribbble">Dribbble</a>
    <a href="الرابط" class="email" title="email">Email</a>
    <a href="الرابط" class="facebook" title="facebook">Facebook</a>
    <a href="الرابط" class="flickr" title="flickr">Flickr</a>
    <a href="الرابط" class="foursquare" title="foursquare">Foursquare</a>
    <a href="الرابط" class="linkedin" title="linkedin">Linkedin</a>
    <a href="الرابط" class="rss" title="rss">RSS</a>
    <a href="الرابط" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
    <a href="الرابط" class="youtube" title="youtube">YouTube</a>
</div>

وطبعا هذا الكود يتماشى مع كود css 
الذي وضعته في الاول للاضافة الجاهزة

في حال اردت تخصيصه

      الرابط" class="اسم العنصر المدرج في كود css" title="العنوان"&gt;المسمى الذي يظهر عند وضع الماوس على الايقونة

وهنا اكون قد وصلت للنهاية 
اتمنا لكم الاستفادة والمدونة مفتوحة للاستفسارات 

إشترك لتحصل على جديد المواضيع

يوسف بجاد

مدون عربي مهتم بالتقنية الحديثة وتطوير الويب مهتم بشكل خاص بمنصة بلوجر واجيد الى حد ما التعامل مع css.html.jquery

• http://twitter.com/youcefbijedbijed on twitter
• https://www.facebook.com/pages/%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D9%8A%D9%88%D8%B3%D9%81-%D8%A8%D8%AC%D8%A7%D8%AF/202331699846732bijed on facebook
• https://plus.google.com/101768571125800665500/postsbijed on google plus