1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
الكاتب : :: dev-vb :: | المشاهدات : 1,570 | الردود : 2
حالة الموضوع:
مغلق
  1. :: dev-vb :: Developer

    الأنتساب:
    ‏7 مارس 2012
    المشاركات:
    21
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    5
    نظام التشغيل:
    Linux
    السلام عليكم ورحمة الله و بركاته

    اتمنى ان الكل يكون بخير و

    مشروعي اليوم هو شرح عمل زر مع رقم يكون فوقه مثل تنبيهات الفيس بوك


    ♥ أترككم أولا مع المثال المصور

    [​IMG]

    ♥ شرح التركيب

    نأتي لخيارات الــ CSS :

    كود PHP:
    body {background:#444444;text-align:center;margin-top:150px;} 
    .btn 
        
    position:relative
        
    display:inline-block;     
        
    text-decorationnone
        
    color:white
        
    padding6px 12px 8px 12px
        
    background#3B3B3B; 
        
    font-familyTahomasans-serif
        
    font-size:11px
        
    margin-right15px
        -
    moz-border-radius3px
        -
    webkit-border-radius3px;     
        
    border-radius3px
        
    border:1px solid #282828; 
        
    -moz-box-shadowinset 0 0 1px rgba(255,255,255,0.1) , inset 0 1px 0  rgba(255,255,255,0.08) , 0 1px 0 rgba(255,255,255,0.05) , inset 0 8px  20px rgba(255,255,255,0.06); 
        -
    webkit-box-shadowinset 0 0 1px rgba(255,255,255,0.1) , inset 0  1px 0 rgba(255,255,255,0.08) , 0 1px 0 rgba(255,255,255,0.05) , inset 0  8px 20px rgba(255,255,255,0.06);     
        
    box-shadowinset 0 0 1px rgba(255,255,255,0.1) , inset 0 1px 0  rgba(255,255,255,0.08) , 0 1px 0 rgba(255,255,255,0.05) , inset 0 8px  20px rgba(255,255,255,0.06); 

    .
    btn:hover
    .
    btn:focus 
        
    background:#373737; 

    .
    btn span
        
    positionabsolute
        
    top: -10px
        
    right:-8px
        
    font-size9px
        
    padding:3px 5px
        
    background:#F03D25; 
        
    -moz-border-radius8px
        -
    webkit-border-radius8px;     
        
    border-radius8px;     
        -
    webkit-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        -
    moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        
    box-shadow:0 0 10px rgba(0,0,0,0.4); 
    ♥ كود لــ HTML نضيفه في المكان الذي نريد وضع الزر فيه :

    كود PHP:
    <a href="#" class="btn">:: dev-vb ::<span>2</span></a
    <
    a href="#" class="btn">:: traidnt ::<span>4</span></</a>

    أتمنى أني وفقت في الشرح | اذا أعجبك موضوعي لا تنسى تقييمي

     
  2. Fox Developer

    الأنتساب:
    ‏27 ديسمبر 2011
    المشاركات:
    81
    الإعجابات المتلقاة:
    3
    نقاط الجائزة:
    30
    الإقامة:
    ŖĬỹДďҢ
    رد: [ شرح ] : عمل زر مع رقم فوقه مثل الفيس بوك

    بارك االه فيك يالغالي

    تسلم أيدك
     
  3. Wo0oLf DeveloPer Plus

    الأنتساب:
    ‏22 مارس 2012
    المشاركات:
    123
    الإعجابات المتلقاة:
    4
    نقاط الجائزة:
    50
    الوظيفة:
    طالب جامعي Computer science
    الإقامة:
    مقيم في لبنان
    رد: [ شرح ] : عمل زر مع رقم فوقه مثل الفيس بوك

    وعليكم السلآم ورحمة الله وبركآته ،،
    يعطيك ألف ع ـآفية ،
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة