السلام عليكم ورحمة الله تعالى وبركاته
أقدم لكم أحد ثاني أعمالي الحصرية بالمدونة
أيقونات إجتماعية بشكل جذاب وأنيق بتقنية css من صنعي الخاص
إنها خفيفة التحميل فقط صممتها بالـ css وصور الحروف الخاصة بكل أيقونة اجتماعية
صورة الأيقونات الإجتماعية بالأشكال الثلاث
وهي موحدة اللون لكن عندما يمر عليها الماوس يظهر اللون الحقيقي لكل أيقونة
شكل مربع
شكل ذو حواف دائرية قليلا
شكل دائري
شرح الإضافة
كود الـ html الخاص بشكل مربع
<div id='social-square'>
<ul>
<li class='e'><a href='#'><img src='http://im42.gulfup.com/qNNpw.png'/></a></li>
<li class='f'><a href='#'><img src='http://im42.gulfup.com/WwPrb.png'/></a></li>
<li class='y'><a href='#'><img src='http://im42.gulfup.com/mIBte.png'/></a></li>
<li class='t'><a href='#'><img src='http://im42.gulfup.com/9bSuZ.png'/></a></li>
<li class='r'><a href='#'><img src='http://im42.gulfup.com/xmzx5.png'/></a></li>
<li class='b'><a href='#'><img src='http://im42.gulfup.com/IhHOp.png'/></a></li>
<li class='h'><a href='#'><img src='http://im42.gulfup.com/ONXRD.png'/></a></li>
<li class='s'><a href='#'><img src='http://im42.gulfup.com/CfN2g.png'/></a></li>
</ul>
</div>
كود الـ css الخاص بشكل مربع
<style>
/*---------- square by arabetutorial.blogspot.com --------------------*/
#social-square{float:left;margin-top:-9px;margin-bottom:-11px;}
#social-square ul {list-style:none;float:left;}
#social-square ul li {float:right;padding:2px;margin:2px;width:32px;height:32px;}
.e {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.f {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.t {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.y {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.r {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.b {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.h {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.s {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.e:hover{background:#009c10;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.f:hover{background:#0083C9;box-shadow:inset 0 0 1px #fff;border:1px solid #006399;transition:1s;}
.t:hover{background:#00E8EC;box-shadow:inset 0 0 1px #fff;border:1px solid #00A1A4;transition:1s;}
.y:hover{background:#E40F00;box-shadow:inset 0 0 1px #fff;border:1px solid #900A00;transition:1s;}
.r:hover{background:#FFCD00;box-shadow:inset 0 0 1px #fff;border:1px solid #B69200;transition:1s;}
.b:hover{background:#FF8000;box-shadow:inset 0 0 1px #fff;border:1px solid #A75400;transition:1s;}
.h:hover{background:#7D00D7;box-shadow:inset 0 0 1px #fff;border:1px solid #52028B;transition:1s;}
.s:hover{background:#FFE600;box-shadow:inset 0 0 1px #fff;border:1px solid #BFAC00;transition:1s;}
</style>
كود الـ html الخاص بشكل ذو حواف دائرية قليلا
<div id='social-semi-circle'>
<ul>
<li class='e'><a href='#'><img src='http://im42.gulfup.com/qNNpw.png'/></a></li>
<li class='f'><a href='#'><img src='http://im42.gulfup.com/WwPrb.png'/></a></li>
<li class='y'><a href='#'><img src='http://im42.gulfup.com/mIBte.png'/></a></li>
<li class='t'><a href='#'><img src='http://im42.gulfup.com/9bSuZ.png'/></a></li>
<li class='r'><a href='#'><img src='http://im42.gulfup.com/xmzx5.png'/></a></li>
<li class='b'><a href='#'><img src='http://im42.gulfup.com/IhHOp.png'/></a></li>
<li class='h'><a href='#'><img src='http://im42.gulfup.com/ONXRD.png'/></a></li>
<li class='s'><a href='#'><img src='http://im42.gulfup.com/CfN2g.png'/></a></li>
</ul>
</div>
كود الـ css الخاص بشكل ذو حواف دائرية قليلا
<style>
/*---------- semi-circle by arabetutorial.blogspot.com --------------------*/
#social-semi-circle{float:left;margin-top:-9px;margin-bottom:-11px;}
#social-semi-circle ul {list-style:none;float:left;}
#social-semi-circle ul li {float:right;padding:2px;margin:2px;border-radius:5px;width:32px;height:32px;}
.e {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.f {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.t {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.y {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.r {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.b {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.h {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.s {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.e:hover{background:#009c10;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.f:hover{background:#0083C9;box-shadow:inset 0 0 1px #fff;border:1px solid #006399;transition:1s;}
.t:hover{background:#00E8EC;box-shadow:inset 0 0 1px #fff;border:1px solid #00A1A4;transition:1s;}
.y:hover{background:#E40F00;box-shadow:inset 0 0 1px #fff;border:1px solid #900A00;transition:1s;}
.r:hover{background:#FFCD00;box-shadow:inset 0 0 1px #fff;border:1px solid #B69200;transition:1s;}
.b:hover{background:#FF8000;box-shadow:inset 0 0 1px #fff;border:1px solid #A75400;transition:1s;}
.h:hover{background:#7D00D7;box-shadow:inset 0 0 1px #fff;border:1px solid #52028B;transition:1s;}
.s:hover{background:#FFE600;box-shadow:inset 0 0 1px #fff;border:1px solid #BFAC00;transition:1s;}
</style>
كود الـ html الخاص بشكل دائري
<div id='social-circle'>
<ul>
<li class='e'><a href='#'><img src='http://im42.gulfup.com/qNNpw.png'/></a></li>
<li class='f'><a href='#'><img src='http://im42.gulfup.com/WwPrb.png'/></a></li>
<li class='y'><a href='#'><img src='http://im42.gulfup.com/mIBte.png'/></a></li>
<li class='t'><a href='#'><img src='http://im42.gulfup.com/9bSuZ.png'/></a></li>
<li class='r'><a href='#'><img src='http://im42.gulfup.com/xmzx5.png'/></a></li>
<li class='b'><a href='#'><img src='http://im42.gulfup.com/IhHOp.png'/></a></li>
<li class='h'><a href='#'><img src='http://im42.gulfup.com/ONXRD.png'/></a></li>
<li class='s'><a href='#'><img src='http://im42.gulfup.com/CfN2g.png'/></a></li>
</ul>
</div>
كود الـ css الخاص بشكل دائري
<style>
/*---------- social_circle by arabetutorial.blogspot.com --------------------*/
#social-circle{float:left;margin-top:-9px;margin-bottom:-11px;}
#social-circle ul {list-style:none;float:left;}
#social-circle ul li {float:right;padding:2px;margin:2px;border-radius:50px;width:32px;height:32px;}
.e {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.f {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.t {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.y {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.r {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.b {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.h {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.s {background:#444444;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.e:hover{background:#009c10;box-shadow:inset 0 0 1px #fff;border:1px solid #252525;transition:1s;}
.f:hover{background:#0083C9;box-shadow:inset 0 0 1px #fff;border:1px solid #006399;transition:1s;}
.t:hover{background:#00E8EC;box-shadow:inset 0 0 1px #fff;border:1px solid #00A1A4;transition:1s;}
.y:hover{background:#E40F00;box-shadow:inset 0 0 1px #fff;border:1px solid #900A00;transition:1s;}
.r:hover{background:#FFCD00;box-shadow:inset 0 0 1px #fff;border:1px solid #B69200;transition:1s;}
.b:hover{background:#FF8000;box-shadow:inset 0 0 1px #fff;border:1px solid #A75400;transition:1s;}
.h:hover{background:#7D00D7;box-shadow:inset 0 0 1px #fff;border:1px solid #52028B;transition:1s;}
.s:hover{background:#FFE600;box-shadow:inset 0 0 1px #fff;border:1px solid #BFAC00;transition:1s;}
</style>
وبالنسبة لمن لديه مدونة على بلوجر يمكنه إضافة شكل من بين هاته الأشكال
عبر إضافة اداة HTML/JAVAScript
وأقسم لكم أنها من إنشاء الخاص ليحظى بها كل زائر لمدونتي
فأرجوا منكم التعليق لأصنع المزيد
والسلام عليكم ورحمة الله تعالى وبركاته
جميلة تلك الاداة و جذابة
ردحذفمعاك حق ياغالي وسأصمم المزيد من الأدوات الإحترافية عشانكم (f)
ردحذف