حالة الموضوع:
مغلق
  1. :: dev-vb ::

    :: dev-vb :: Developer

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

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

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


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

    [​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>
    [NOTE]أتمنى أني وفقت في الشرح | اذا أعجبك موضوعي لا تنسى تقييمي[/NOTE] ​
     
  2. Fox

    Fox Developer

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

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

    تسلم أيدك
     
  3. Wo0oLf

    Wo0oLf DeveloPer Plus

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

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

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