في هذا الدرس 7تصفّح المواضيع
CSS Color Gradients
تدرج الألوان في لغة CSS
CSS Color Gradients تدرج الألوان في لغة CSS
تدرج الألوان هو تحول لون الخلفيات تدريجياً وبصورة نمطية انتقالية سلسة إلي لون أو أكثر تم تحديدهم من قبل في لغة CSS.
أنواع التدرج في لغة CSS:
- Linear Gradients يكون التدرج في [down-up-left-right-diagonally][أسفل- أعلي-يساراً-يميناً-قطرياً].
- Radial Gradients التدرج يكون في center المنتصف.
- Conic Gradients استدارة حول نقطة مركزية.
from lime to cyan
تدرج من اللون الليموني الي اللون ازرق سماوي.
CSS Linear Gradients
تدرج الألوان الخطية أو الطولية في لغة CSS.
CSS Linear Gradients تدرج الألوان الخطية أو الطولية في لغة CSS.
تستخدم linear gradient في لغة CSS للتدريج بين لونين أو أكثر فيجب تحديد لونين علي الأقل ليعمل التدرج بينهم في لغة CSS.
CSS linear gradients values
قيم linear-gradient في لغة CSS.
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);CSS Linear Gradients
تدرج بين اللون الليموني والون الأزرق سماوي.
CSS linear gradients left to right
تدرج الألوان الخطية من اليسار إلي اليمين في لغة CSS.
CSS linear gradients left to right تدرج الألوان الخطية من اليسار إلي اليمين في لغة CSS.
تستخدم linear gradient في لغة CSS للتدريج بين لونين أو أكثر فيجب تحديد لونين علي الأقل ليعمل التدرج بينهم في لغة CSS.
CSS linear gradients left to right
تدرج بين اللون الليموني والون الأزرق سماوي من اليسار إلي اليمين.
CSS linear gradients angles
تدرج الألوان الخطية من الزوايا في لغة CSS
CSS linear gradients angles تدرج الألوان الخطية من الزوايا في لغة CSS
يمكن التحكم في اتجاه التدرج الألوان في لغة CSS ،عن طريق تحديد زاوية بالدرجة ويتم تحديد الزوايا عن طريق درجة التدرج بالقيمة deg.
- قيمة 0deg تعادل "أعلى"
- قيمة 90deg تعادل "إلى اليمين"
- تساوي القيمة 180deg القيمة "لأسفل".
CSS linear gradients angles
طريقة كتابة وتحديد زوايا linear gradients في لغة CSS.
background-image: linear-gradient(angle, color-stop1, color-stop2);CSS linear gradients angles
.grad-180
{
height: 100px;
background-color: red;
background-image: linear-gradient(180deg, lime, cyan);
}
CSS linear gradients multiple color
التدرج بأكثر من لون في لغة CSS
CSS linear gradients multiple color التدرج بأكثر من لون في لغة CSS
تدعم linear grading في لغة CSS أكثر من لون ليكون التدرج بين ثلاث ألوان معاً أو يمكن أكثر وهو إضافة قيمة لون ثالث بعد قيمة الألوان الأخري.
CSS linear gradients multiple color
التدرج بين lime, cyan, green مع CSS linear gradients.
CSS linear gradients transparency
تدرج الألوان مع الشفافية في لغة CSS
CSS linear gradients transparency تدرج الألوان مع الشفافية في لغة CSS
CSS gradients تدعم transparency الشفافية ,لنتمكن من استخدام transparency فيجب استخدام الدالة ( )rgba لتحديد درجة الشفافية.
CSS linear gradients transparency
الشفافية من 0 إلي 1 شفاف جداً إلي اللون كامل.
div
{
height: 200px;
background-image: linear-gradient(to right, rgba(0,255,0,0),rgba(0,255,255,1));
}
CSS linear gradients repeat
تكرار التدرج linear gradients في لغة CSS.
CSS linear gradients repeat تكرار التدرج linear gradients في لغة CSS.
CSS linear gradients repeat
تكرار تدرج الألوان في لغة CSS.
div
{
height: 200px;
background-color: red;
background-image: repeating-linear-gradient(lime, cyan 10%, green 20%);
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات17
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Gradients تدرجات
- للمراجعة
- 02 Linear خطي
- للمراجعة
- 03 Radial شعاعي
- للمراجعة
- 04 Color لون
- للمراجعة
- 05 Syntax بناء الجملة
- للمراجعة
- 06 Top أعلي
- للمراجعة
- 07 Bottom أسفل
- للمراجعة
- 08 Left يسار
- للمراجعة
- 09 Right يمين
- للمراجعة
- 10 Using بإستخدام
- للمراجعة
- 11 Angles الزوايا
- للمراجعة
- 12 Multiple متعدد
- للمراجعة
- 13 Stops توقفات
- للمراجعة
- 14 Transparency شفافية
- للمراجعة
- 15 Effects تأثيرات
- للمراجعة
- 16 Fading تضاؤل
- للمراجعة
- 17 Repeating تكرار
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
- 03 RGBA RGBA
- Red، Green، Blue , Alpha
- أحمر , أخضر , أزرق , مستوي الشفافية
- للمراجعة
- 04 RGB RGB
- Red، Green، Blue
- أحمر , أخضر , أزرق
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.