كيف تجعل جميع أزرار مدونتك جميلة جداً.. درس CSS

كيف تجعل جميع أزرار مدونتك جميلة جداً.. درس CSS button generate


السلام عليكم..
كيف حالكم إخواني المدونين أصحاب المواقع و المدونات, اسأل الله ان تكونون في افضل حال.

بالرغم من ان درس اليوم بسيط جداً للبعض, إلا انه هام جداً للبعض الآخر.
كما أننا سوف نستفيد بالكثير من الدرس البسيط هذا, والدرس هو تنسيق أزرار المدونة او الموقع و التي دائماً تحمل الاسم button.
المعروف أن لغة HTML منها وسوم افتراضية ومنها الوسم button اي الزر ولكن يمكننا تسمية زر جديد كيفما نشاء و هذا عن طريق تغيير class الخاص بالزر كالتالي مثلاً..
<a class="buttons" href="#">ميني سوفت</a>
اما عن تنسيق أزرار المدونة الخاصة بك تنسيقاً رائعاً حقيقياً إحترافياً فيكون باستخدام اللغة الرائعة CSS .
لتنسيق أزرار المدونة تابع التالي ..
إذهب إلى لوحة تحكم المدونة ثم إلى قالب
و فوق الوسم
]]></b:skin>
ضع الكود التالي..
/* button CSS By MiniSoft */
.button{
-moz-box-shadow:0 0 5px 1px #666;
-webkit-box-shadow:0 0 5px 1px #666;
box-shadow:0 0 5px 1px #666;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
text-indent:0px;
display:inline-block;
color:#FFFFFF !important;
font:normal normal Tahoma,Arial;
height:40px;
line-height:40px;
width:106px;
text-decoration:none;
text-align:center;
text-shadow:0px 2px 5px #333;
}
.button:hover{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
}
.button:active{
position:relative;
top:1px;
}
تعالوا نقوم بالنظر في هذا الكود ولمن يريد التعديل عليه..
هذا الكود هو لون وحجم ظل الزر.
هذا الكود هو لون الخلفية للزر.
هذا الكود هو لون الخط في قلب الزر.
هذا الكود هو نوع وحجم الخط في قلب الزر.
هذا الكود هو عرض و ارتفاع الزر.
هذا الكود هو لون وحجم الظل خلف الكتابة التي على الزر.

هذا الكود هو لون الزر عند مرور الفأرة عليه.
بعد وضع الكود بالقالب إضغط حفظ القالب ومبارك عليك ازرار رائعة.
لمشاهدة الزر قبل الشروع في العمل إضغط هنـــا

ما تعلمناه اضافياً في هذا الدرس هو كيفية عمل خلفية ذات لونين بواسطة أكواد الخلفية Background في الكود السابق.

التعليقات

325x285
مساحة إعلانية
728x90
728x90
الرجاء مساعدتي على نشر الموضوع من خلال المشاركة على مواقع التواصل الإجتماعي بواسطة الأزرار اسفل التدوينة وجزاكم الله خيراً
الاسم

اخبار تقنية,15,اضافات بلوجر,8,التنصيب الصامت,1,برامج الإنترنت,16,برامج البرمجة,5,برامج التنظيف,4,برامج الحماية,2,برامج الكمبيوتر,9,برامج الميديا,10,برامج مجانية,14,برامج مدفوعة,6,تطبيقات اندرويد,7,تمارين ومكملات,14,حماية,2,رياضة كمال الاجسام,18,شروحات البرامج,18,شروحات بلوجر,25,شروحات مواقع,20,صحة وجمال,20,قوالب بلوجر,5,موبايلات,13,blogger,44,CSS,26,CSS3,24,Facebook,20,HTML,8,HTML 5,6,php,1,SEO,8,Windows,26,
rtl
item
ميني سوفت: كيف تجعل جميع أزرار مدونتك جميلة جداً.. درس CSS
كيف تجعل جميع أزرار مدونتك جميلة جداً.. درس CSS
كيف تجعل جميع أزرار مدونتك جميلة جداً.. درس CSS button generate
http://4.bp.blogspot.com/--CrRP1uLam4/U1srrjJZ-yI/AAAAAAAAFOY/r-tVmoGCJ0o/s1600/buttons_MiniSoft.png
http://4.bp.blogspot.com/--CrRP1uLam4/U1srrjJZ-yI/AAAAAAAAFOY/r-tVmoGCJ0o/s72-c/buttons_MiniSoft.png
ميني سوفت
https://www.minisoftwre.com/2014/04/css.html
https://www.minisoftwre.com/
https://www.minisoftwre.com/
https://www.minisoftwre.com/2014/04/css.html
true
3808147084449263890
UTF-8
تحميل جميع الموضوعات لم يتم العثور على اي موضوعات عرض الكل إقرأ المزيد رد إلغاء الرد حذف بقلم الرئيسية الصفحات موضوع عرض الكل زوارنا اعجبهم ايضاً القسم الأرشيف بحث جميع الموضوعات لم يتم العثور على اي موضوع متطابق مع طلبك عودة للرئيسية الأحد الإثنين الثلاثاء الأربعاء الخميس الجمعة السبت Sun Mon Tue Wed Thu Fri Sat يناير فبراير مارس ابريل مايو يونيو يوليو اغسطس سبتمبر اكتوبر نوفمبر ديسمبر Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec الآن قبل دقيقة قبل $$1$$ دقيقة قبل ساعة قبل $$1$$ ساعة بالأمس قبل $$1$$ يوم قبل $$1$$ يوم قبل اكثر من 5 اسابيع متابعون متابعة هذا المحتوى مميز من فضلك شارك لإظهار المحتوى نسخ الكود تحديد تم نسخ الكود إلى الحافظة لم يتم النسخ، إضغط CRTL+C للنسخ او CMD+C إذا كنت تستخدم نظام الماك