منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


كود الملاحظات باكثر من شكل و بتقنية css3 .

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود الملاحظات باكثر من شكل و بتقنية css3 .

مُساهمة من طرف نورالدين خلف في 15/03/16, 02:56 pm

نقدم لكم كود الملاحظات الشهير بشكل مميز
يستعمل باشكال عدة وفي جميع اقسام المنتدى 
الكود لجميع منتديات احلى منتدى

مثال لصناديق محدبة الزوايا (خصائص css3)



صورة عن الكود 





كود css



الرمز:
/*MESSAGE BOX WITH ICONS*/[size=14][/size].msg-box, .ok-box, .success-box, .warning-box, .error-box{[size=14][/size]-webkit-border-radius: 5px;[size=14][/size]-moz-border-radius: 5px;[size=14][/size]border-radius: 5px; [size=14][/size]}[size=14][/size].msg-box{[size=14][/size]border:solid 1px #8e8e04; [size=14][/size]background:#FFFFCC url(images/msg.png) 97% 6px no-repeat;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].ok-box{[size=14][/size]border:solid 1px #27739d; [size=14][/size]background:#94d5fb url(images/ok.png) 97% 6px no-repeat;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].success-box{[size=14][/size]border:solid 1px #90ac13; [size=14][/size]background:#eef4d3 url(images/success.png) 97% 6px no-repeat;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].warning-box{[size=14][/size]border:solid 1px #ba4c0e; [size=14][/size]background:#ffcaa4 url(images/warning.png) 97% 6px no-repeat;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].error-box{[size=14][/size]border:solid 1px #dc2727; [size=14][/size]background:#f2abab url(images/error.png) 97% 6px no-repeat;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size][size=14][/size][size=14][/size]/*MESSAGE CSS BOX*/[size=14][/size].yellow-box{[size=14][/size]border:solid 1px #8e8e04; [size=14][/size]background:#FFFFCC;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].blue-box{[size=14][/size]border:solid 1px #27739d; [size=14][/size]background:#94d5fb;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].green-box{[size=14][/size]border:solid 1px #90ac13; [size=14][/size]background:#eef4d3;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].orange-box{[size=14][/size]border:solid 1px #ba4c0e; [size=14][/size]background:#ffcaa4;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}[size=14][/size].red-box{[size=14][/size]border:solid 1px #dc2727; [size=14][/size]background:#f2abab;[size=14][/size]color:#222222;[size=14][/size]padding:6px;[size=14][/size]text-align:center;[size=14][/size]}




بعد اضافة كود ال css لاستعمال الكود على المنتدى يجب عليك اضافة ملاحظاتك مستعملا الكود التالي



الرمز:
[table class=warning-box][tr][td]أكتب هنا ما تريد[/td][/tr][/table]




طبعا ok-box تميز الصندوق الأزرق ذو الأيقونة، إن أردت استعمال صندوق آخر 
ما عليك سوى استبدالها بأخرى مميزة للصندوق المطلوب. مثلا صندوق الخطأ 
الأحمر تميزه error-box و صندوق التحذير البرتقالي تميزه warning-box ...

نورالدين خلف
عضو نشيط


الجنس : ذكر
عدد المساهمات : 155
التقييم : 10
تاريخ الميلاد : 29/10/1986
تاريخ التسجيل : 28/02/2016
العمر : 30
المزاج : الحمدلله رب العالمين

معاينة صفحة البيانات الشخصي للعضو http://alkuaml.blogspot.com.eg/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود الملاحظات باكثر من شكل و بتقنية css3 .

مُساهمة من طرف وهبة الساحر في 15/03/16, 04:21 pm

موضوع رائع تسلم ايدك



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     


وهبة الساحر
مؤسس المنتدى


الجنس : ذكر
عدد المساهمات : 334
التقييم : 60
تاريخ التسجيل : 07/03/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود الملاحظات باكثر من شكل و بتقنية css3 .

مُساهمة من طرف JAR7 في 17/03/16, 12:19 am

طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2192
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود الملاحظات باكثر من شكل و بتقنية css3 .

مُساهمة من طرف Black Love في 20/03/16, 09:27 pm

كود اكثر من رآئع ششكرآ ~~♥



Black Love
عضو نشيط


الجنس : ذكر
عدد المساهمات : 96
التقييم : 15
تاريخ التسجيل : 19/03/2016
الموقع : المغرب ~~♥
العمل/الترفيه : مصمم جرافيك و مككود وسسباح ايضا هع ♥
المزاج : ~~ ححلو النهردهه هع ♥

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود الملاحظات باكثر من شكل و بتقنية css3 .

مُساهمة من طرف Mr.Yakoub في 16/04/16, 09:26 pm

كالعادة ابداع رائع 

وطرح يستحق المتابعة

شكراً لك 

بانتظار الجديد القادم
دمت بكل خير

Mr.Yakoub
الاشراف العام


الجنس : ذكر
عدد المساهمات : 548
التقييم : 3
تاريخ التسجيل : 28/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود الملاحظات باكثر من شكل و بتقنية css3 .

مُساهمة من طرف Judy في 19/07/16, 07:56 am

السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

Judy
عضو نشيط


الجنس : انثى
عدد المساهمات : 364
التقييم : 15
تاريخ التسجيل : 23/04/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى