في هذا الدرس 13تصفّح المواضيع
يمكن عمل أزرار في لغة CSS مع عنصر <button> أو عنصر <a> ويمكن يطبق نفس التأثير علي أي عنصر أخر, يمكن عمل أزرار ديناميكية عن طريق تجهيز كلاس مسبق يمكن إعادة استخدامه أكثر من مرة مع أكثر من عنصر.
تجهيز كلاس btn:
- border: none
- padding: 15px 30px
- text-align: center
- text-decoration: none
- display: inline-block
- font-size: 16px
- cursor: pointer
- margin:5px
- border: gray 1px solid
CSS Buttons
.btn
{
border: none;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin:5px;
border:gray 1px solid;
}تجهيز مجموعة كلاسات لكل زرار فمثلاً الزر الأخضر يرمز علي نجاح العملية btn-success وزر أحمر يدل علي خطورة العملي btn-danger وهكذا كل كلاس يأخذ خلفية مختلفة.
CSS Button Colors
تجهيز مجموعة كلاسات علي حسب الأحجام كل كلاس يكون له حجم خط مختلف فمثلا btn-sm يدل علي زرار صغير وحجم الخط 12px يمكن تكرار العملية علي حسب احتياج التصميم.
CSS button sizes
CSS rounded buttons
.btn
{
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin:5px;
border-radius:5px;
}تجهيز كلاسات للإطارات بنفس طريقة background-color علي سبيل المثال border-primary ويكون له نفس لون الخلفية وتغيير لون الأزرار من أبيض إلي اللون الأسود.
CSS colored button borders
CSS hoverable buttons
عمل كلاسات لتغير box-shadow ظل الصندوق للأزرار في لغة CSS عن طريق خاصية box-shadow.
CSS Shadow Buttons
.shadow-out
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}استخدم cursor: not-allowed لعمل كلاس عند إضافته علي أي زر يكون غير فعال أو معطل في لغة CSS.
CSS disabled buttons
يمكن تكبير حجم الزر عن طريق عمل كلاس يتحكم في عرض الزر سواء بوحدة بيكسل أو بالنسبة المئوية في لغة CSS عن طريق خاصية width.
CSS button width
لعمل مجموعة أزرار مرتبطة ببعض يجب إزالة margin + border-radius + تحويل العنصر إلي inline-block عن طريق خاصية float-left في لغة CSS.
CSS button groups
عمل مجموعة أزرار عمودية عن طريق كلاس تحويل العنصر إلي display:block و تحديد عرض ثابت له في لغة CSS.
CSS vertical button group
يمكن وضع الزر أعلي الصورة عن طريق خاصية position في لغة CSS يتم إضافة position للعنصر والعنصر الأب.
تحريك المحتوي الداخلي وإظهار بعض المعلومات عندما يتم تمرير مؤشر mouse أعلي الزر عن طريق hover في لغة CSS.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات20
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Buttons أزرار
- للمراجعة
- 02 Colors ألوان
- للمراجعة
- 03 Background خلفية
- للمراجعة
- 04 Sizes أحجام
- للمراجعة
- 05 Font-Size حجم الخط
- للمراجعة
- 06 Rounded مدور / دائري
- للمراجعة
- 07 Radius منتصف القطر / الكوع الجانبي
- للمراجعة
- 08 Border حد
- للمراجعة
- 09 Borders حدود
- للمراجعة
- 10 Hoverable قابل للتحويم
- للمراجعة
- 11 Shadow ظل
- للمراجعة
- 12 Disabled معطل / غير نشط
- للمراجعة
- 13 Width عرض
- للمراجعة
- 14 Groups مجموعات
- للمراجعة
- 15 Margins هوامش
- للمراجعة
- 16 Left يسار
- للمراجعة
- 17 FloaT عائم
- للمراجعة
- 18 Vertical عامودي
- للمراجعة
- 19 Image صورة
- للمراجعة
- 20 Animated رسم متحرك
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي5 أسئلة تنتظرك ＋
نستطيع تغيير لون الازرار عن طريق خاصية background-color ؟
نستطيع تغيير حجم الازرار عن طريق خاصية ؟
ماهي الخاصية التي تستخدم في عمل انحناءات لزوايا الازرار ؟
____