مواقع مفضّلة: وصفات طبخ كوكتيل

النتائج 1 إلى 3 من 3

الموضوع: الأن | اجعل أزرار منتداك | بتقنية css3

  1. #1
    الصورة الرمزية سمسمة
    تاريخ التسجيل : Apr 2012
    رقم العضوية : 31022
    الاقامة : مصر

    افتراضي الأن | اجعل أزرار منتداك | بتقنية css3

    css3, منتداك, أزرار, الأن, اجعل, بتقنية css3, منتداك, أزرار, الأن, اجعل, بتقنية أكواد, كود ,رسول الله ,النبي,header, للجيل الثالث, هيدر, منتدي منتديات , vBulletinشرح, معرفة, رقم العضوية, المنتدي,رقم العضو, رقم الاعضاء, كافة الاعضاء, المنتديات, vBulletin , الجيل الثالث, الجيل الرابع, بيانات -عوامل قوائم بالفورنت بيج , دورة تصميم مواقع , قوائم القفز , دروس الفرونت بيج




    اليوم اقدم لڪم حرڪة رائعة و بتقنية CSS 3
    لأزرار المنتدى ، يعني رح يتغير ازرار المنتدى بشكل جزري
    وهذا الحرڪة ممكن ما شايفها بحياتڪ



    ,المثال،

    [IMG]http://www.enjaztech.com/vb/uploadcenter/uploads/10-2012/PIC-360-13492638*9.gif[/IMG]

    قبل الضغط :
    [IMG]http://www.enjaztech.com/vb/uploadcenter/uploads/10-2012/PIC-3*6-13492638**.jpg[/IMG]
    بعد الضغط :



    ,الڪود،

    اللون الأزرق



    كود PHP:
    .buttontext-decorationnone !importantbackground-color:#519ee0; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #216*a3; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #216*a3; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #216*a3; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #216*a3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button:hover{ text-decoration: none !important; background-color:#*4b4eb; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #216*a3; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #216*a3; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #216*a3; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #216*a3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button{ font-family:Tahoma, Geneva, sans-serif; line-height: 26px !important; font-size: 12px; color: #EAEAEA; text-align:center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .button:active{ background-color:#38*db8; margin-top:5px; -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; } .button:hover .button{ text-shadow:0px -1px 1px #000; color:#b2161a; } 


    اللون الأحمر


    كود PHP:
    buttontext-decorationnone !importantbackground-color:#ca2a2a; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #a01c1c; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button:hover{ text-decoration: none !important; background-color:#e04c4c; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #a01c1c; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button{ font-family:Tahoma, Geneva, sans-serif; line-height: 26px !important; font-size: 12px; color: #EAEAEA; text-align:center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .button:active{ background-color:#932020; margin-top:5px; -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; } .button:hover .button{ text-shadow:0px -1px 1px #000; color:#b2161a; } 



    اللون الأخضر

    كود PHP:
    buttontext-decorationnone !importantbackground-color:#36b230; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #258420; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button:hover{ text-decoration: none !important; background-color:#56cd50; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #258420; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button{ font-family:Tahoma, Geneva, sans-serif; line-height: 26px !important; font-size: 12px; color: #EAEAEA; text-align:center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .button:active{ background-color:#1a651*; margin-top:5px; -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; } .button:hover .button{ text-shadow:0px -1px 1px #000; color:#b2161a; } 

    اللون الزهري

    كود PHP:
    buttontext-decorationnone !importantbackground-color:#d252be; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #a8399*; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a8399*; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a8399*; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a8399*; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button:hover{ text-decoration: none !important; background-color:#eb*eda; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #a8399*; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a8399*; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a8399*; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a8399*; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button{ font-family:Tahoma, Geneva, sans-serif; line-height: 26px !important; font-size: 12px; color: #EAEAEA; text-align:center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .button:active{ background-color:#661a5a; margin-top:5px; -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; } .button:hover .button{ text-shadow:0px -1px 1px #000; color:#b2161a; } 
    اللون البرتقالي

    كود PHP:
    buttontext-decorationnone !importantbackground-color:#dc*f3c; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #a55*18; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55*18; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55*18; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55*18; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button:hover{ text-decoration: none !important; background-color:#f19b5c; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #a55*18; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55*18; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55*18; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55*18; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button{ font-family:Tahoma, Geneva, sans-serif; line-height: 26px !important; font-size: 12px; color: #EAEAEA; text-align:center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .button:active{ background-color:#824*1c; margin-top:5px; -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; } .button:hover .button{ text-shadow:0px -1px 1px #000; color:#b2161a; } 
    اللون الرصاصي


    كود PHP:
    .buttontext-decorationnone !importantbackground-color:#cacaca; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #9b9b9b; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button:hover{ text-decoration: none !important; background-color:#e0e0e0; padding-left: 2*px; padding-right: 2*px; height: 26px; line-height: 26px !important; display: inline-block; border: 1px solid #9b9b9b; text-shadow:0px 1px 1px #000; -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b; -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b; box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; } .button{ font-family:Tahoma, Geneva, sans-serif; line-height: 26px !important; font-size: 12px; color: #8a8a8a; text-align:center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .button:active{ background-color:#606060; margin-top:5px; -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000; font-family:Tahoma, Geneva, sans-serif; line-height: 26px !important; font-size: 12px; color: #fff; text-align:center; } .button:hover .button{ text-shadow:0px -1px 1px #000; color:#fff; } 

    ,الترڪيب،

    ڪل ما عليك فعله هو اختيار احد الاڪواد في الأعلى
    وتذهب الى css الرئيسي للاستايل اللي تريد التطبيق عليه
    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=147821
    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=147821
    و تنزل أسفل الصفحة وتشوف 2 مربع ڪبار
    الصق الڪود في المربع الثاني
    واحفظ ومبروڪ



    تم تعديل وضع الاكواد بواسطة معتزجمال
    التعديل الأخير تم بواسطة معتزجمال ; 10-03-2012 الساعة 06:47 PM


  2. #2
    الصورة الرمزية معتزجمال
    تاريخ التسجيل : Dec 2009
    رقم العضوية : 858
    الاقامة : مصر
    الجنس : شركة اخرى
    الجنسية : 2 Mbps
    المشاركات : 16,603
    My SMS : Zoom
    انا دلوقتى نايــم
    معدل تقييم المستوى : 474
    Array

    افتراضي رد: الأن | اجعل أزرار منتداك | بتقنية css3

    شكرا جزيلا للاخت الفاضلة
    علي الاكواد




  3. #3
    الصورة الرمزية سمسمة
    تاريخ التسجيل : Apr 2012
    رقم العضوية : 31022
    الاقامة : مصر

    افتراضي رد: الأن | اجعل أزرار منتداك | بتقنية css3

    شكرا لك اخى معتز على المرور وعلى التعديل


المواضيع المتشابهه

  1. [ Style ] : استايل سامي الاحترافي بتقنية Jquery & CSS3 لمنتديات PBBoard
    بواسطة معتزجمال في المنتدى دعم منتديات الـ phpBB & PBBoard
    مشاركات: 0
    آخر مشاركة: 04-24-2013, 10:35 AM
  2. [ شرح ] : صنع دوامة باستعمال Css3
    بواسطة بنت النيل في المنتدى منتدى لغات برمجة المواقع Programming Languages ​​sites
    مشاركات: 0
    آخر مشاركة: 11-08-2012, 10:50 AM
  3. [ شرح ] : تأطير جداول المنتدى بتقنية css3
    بواسطة سمسمة في المنتدى دعم منتديات vBulletin 3.8.X
    مشاركات: 2
    آخر مشاركة: 10-03-2012, 06:28 PM
  4. قالب postbit_legacy بتقنيه css3
    بواسطة معتزجمال في المنتدى دعم منتديات vBulletin 3.8.X
    مشاركات: 2
    آخر مشاركة: 06-07-2011, 02:14 PM
  5. مـــركزٍآلآلعــآب 2.6.9 المتوافق مع 3.8 و css3 لنسخ 4.0
    بواسطة Mostafa Yosry في المنتدى دعم منتديات vBulletin 3.8.X
    مشاركات: 3
    آخر مشاركة: 02-09-2010, 09:10 PM

الكلمات الدلالية لهذا الموضوع

المفضلات

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •