CSS Color Gradients
تدرج الألوان في لغة CSS
سوف تتعلم في هذا الدرس التحكم في تدرج الألوان بلغة CSS وهي أن يكون للعنصر خلفية مكونه من لونين لون غامق ولون فاتح وتتدرج خلفية العنصر بينهم.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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.
تستخدم linear gradient في لغة CSS للتدريج بين لونين أو أكثر فيجب تحديد لونين علي الأقل ليعمل التدرج بينهم في لغة CSS.
CSS linear gradients values
قيم linear-gradient في لغة CSS.
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Linear Gradients
تدرج بين اللون الليموني والون الأزرق سماوي.
.linear
{
background: linear-gradient(lime,cyan);
}
</>
CSS linear gradients left to right
تدرج الألوان الخطية من اليسار إلي اليمين في لغة CSS.
تستخدم linear gradient في لغة CSS للتدريج بين لونين أو أكثر فيجب تحديد لونين علي الأقل ليعمل التدرج بينهم في لغة CSS.
CSS linear gradients left to right
تدرج بين اللون الليموني والون الأزرق سماوي من اليسار إلي اليمين.
.linear
{
background: linear-gradient(to right,lime,cyan);
}
</>
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
تدعم linear grading في لغة CSS أكثر من لون ليكون التدرج بين ثلاث ألوان معاً أو يمكن أكثر وهو إضافة قيمة لون ثالث بعد قيمة الألوان الأخري.
CSS linear gradients multiple color
التدرج بين lime, cyan, green مع CSS linear gradients.
div
{
height: 200px;
background-image: linear-gradient(lime, cyan,green);
}
</>
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
تكرار تدرج الألوان في لغة CSS.
div
{
height: 200px;
background-color: red;
background-image: repeating-linear-gradient(lime, cyan 10%, green 20%);
}
تدرجات
خطي
شعاعي
لون
بناء الجملة
أعلي
أسفل
يسار
يمين
بإستخدام
الزوايا
متعدد
توقفات
شفافية
تأثيرات
تضاؤل
تكرار
Cascading Style Sheets
صفحات الأنماط الانسيابيةRed، Green، Blue , Alpha
أحمر , أخضر , أزرق , مستوي الشفافيةRed، Green، Blue
أحمر , أخضر , أزرق
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
