أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

الأيقونات الإجتماعية بشكل جذاب وأنيق بتقنية css من صنعي الخاص وبثلاث أشكال


السلام عليكم ورحمة الله تعالى وبركاته

أقدم لكم أحد ثاني أعمالي الحصرية بالمدونة

أيقونات إجتماعية بشكل جذاب وأنيق بتقنية 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

وأقسم لكم أنها من إنشاء الخاص ليحظى بها كل زائر لمدونتي

فأرجوا منكم التعليق لأصنع المزيد

والسلام عليكم ورحمة الله تعالى وبركاته



آخر مقالات المدونة

هناك تعليقان (2):

  1. جميلة تلك الاداة و جذابة

    ردحذف
  2. معاك حق ياغالي وسأصمم المزيد من الأدوات الإحترافية عشانكم (f)

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن