CSS

CSS Color Gradients
تدرج الألوان في لغة CSS

سوف تتعلم في هذا الدرس التحكم في تدرج الألوان بلغة CSS وهي أن يكون للعنصر خلفية مكونه من لونين لون غامق ولون فاتح وتتدرج خلفية العنصر بينهم.

التاريخ

29 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

3071

المواضيع

24
الشروحات chevron_left CSS Color Gradients chevron_left CSS
CSS Flex Box keyboard_arrow_down

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.

يمكن تكرار الترج عن طريق استخدام دالة repeating-linear-gradient في لغة CSS.
CSS linear gradients repeat

تكرار تدرج الألوان في لغة CSS.

div
{
  height: 200px;
  background-color: red;
  background-image: repeating-linear-gradient(lime, cyan 10%, green 20%);
}
مصطلحات الدرس
Gradients
Gradients

تدرجات

Linear
Linear

خطي

Radial
Radial

شعاعي

Color
Color

لون

Syntax
Syntax

بناء الجملة

Top
Top

أعلي

Bottom
Bottom

أسفل

Left
Left

يسار

Right
Right

يمين

Using
Using

بإستخدام

Angles
Angles

الزوايا

Multiple
Multiple

متعدد

Stops
Stops

توقفات

Transparency
Transparency

شفافية

Effects
Effects

تأثيرات

Fading
Fading

تضاؤل

Repeating
Repeating

تكرار

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
RGBA
RGBA

Red، Green، Blue , Alpha

أحمر , أخضر , أزرق , مستوي الشفافية
RGB
RGB

Red، Green، Blue

أحمر , أخضر , أزرق
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات