❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

CSSالدالة conic-gradient()

  • فائدة الدالة
  • تحديد موقع اللون المتدرج
  • تحديد نقاط الدمج
  • أمثلة و أفكار مفيدة

فائدة الدالة

تستخدم هذه الدالة لعرض ألوان متدرجة بشكل أسطواني مع جعلها تتمدد لتملئ خلفية العنصر.
إفتراضياً، الألوان تبدأ من الوسط و تتمدد حتى تملئ خلفية العنصر و تستطيع تغيير مكانها بالشكل الذي تريده.

Default
With Stop points

في المثال التالي قمنا بإظهار لون متدرج يتكوّن من 4 ألوان هي الأحمر، الأزرق، الأخضر و الأصفر.

مثال

.gradient {
background: conic-gradient(red, blue, green, yellow);
}
.gradient { background: conic-gradient(red, blue, green, yellow); }
جرب الكود

تحديد موقع اللون المتدرج

هناك العديد من القيم الجاهزة و الوحدات التي يمكنك استخدامها لتحديد موقع اللون المتدرج و منها:

  • at left لعرض تدرج الألوان إبتداءاً من اليسار.
  • at center لعرض تدرج الألوان إبتداءاً من الوسط.
  • at right لعرض تدرج الألوان إبتداءاً من اليمين.
  • at top لعرض تدرج الألوان إبتداءاً من الأعلى.
  • at bottom لعرض تدرج الألوان إبتداءاً من الأسفل.
center
top
right
bottom
left

يمكنك أيضاً استخدام أكثر من قيمة في ذات الوقت لتحديد اتجاه اللون بشكل مائل كما يلي:

  • at left bottom لعرض تدرج الألوان إبتداءاً من اليسار و الأسفل.
  • at left top لعرض تدرج الألوان إبتداءاً من اليسار و الأعلى.
  • at right bottom لعرض تدرج الألوان إبتداءاً من اليمين و الأسفل.
  • at right top لعرض تدرج الألوان إبتداءاً من اليمين و الأعلى.
left bottom
left top
right bottom
right top

تستطيع تحديد مكان ابتداء اللون المتدرج بعيداً عن الجهة المذكورة كما يلي:

left 30%
right 30%
left 30% top 50%
right 20% bottom 40%

في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بواسطة الكلمات المفتاحية at top - at left - at right - at bottom - at center تباعاً.

المثال الأول

.gradient-top {
background: conic-gradient(at top, red, blue, green, yellow);
}
.gradient-right {
background: conic-gradient(at right, red, blue, green, yellow);
}
.gradient-bottom {
background: conic-gradient(at bottom, red, blue, green, yellow);
}
.gradient-left {
background: conic-gradient(at left, red, blue, green, yellow);
}
.gradient-center {
background: conic-gradient(at center, red, blue, green, yellow);
}
.gradient-top { background: conic-gradient(at top, red, blue, green, yellow); } .gradient-right { background: conic-gradient(at right, red, blue, green, yellow); } .gradient-bottom { background: conic-gradient(at bottom, red, blue, green, yellow); } .gradient-left { background: conic-gradient(at left, red, blue, green, yellow); } .gradient-center { background: conic-gradient(at center, red, blue, green, yellow); }
جرب الكود

في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بواسطة الكلمات المفتاحية at left top - at right top - at left bottom - at right bottom تباعاً.

المثال الثاني

.gradient-right-top {
background: conic-gradient(at right top, red, blue, green, yellow);
}
.gradient-right-bottom {
background: conic-gradient(at right bottom, red, blue, green, yellow);
}
.gradient-left-top {
background: conic-gradient(at left top, red, blue, green, yellow);
}
.gradient-left-bottom {
background: conic-gradient(at left bottom, red, blue, green, yellow);
}
.gradient-right-top { background: conic-gradient(at right top, red, blue, green, yellow); } .gradient-right-bottom { background: conic-gradient(at right bottom, red, blue, green, yellow); } .gradient-left-top { background: conic-gradient(at left top, red, blue, green, yellow); } .gradient-left-bottom { background: conic-gradient(at left bottom, red, blue, green, yellow); }
جرب الكود

في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بشكل أدق.

المثال الثالث

.gradient-left-30 {
background: conic-gradient(at left 30%, red, blue, green, yellow);
}
.gradient-right-30 {
background: conic-gradient(at right 30%, red, blue, green, yellow);
}
.gradient-left-30-top-50 {
background: conic-gradient(at left 30% top 50%, red, blue, green, yellow);
}
.gradient-right-20-bottom-40 {
background: conic-gradient(at right 20% bottom 40%, red, blue, green, yellow);
}
.gradient-left-30 { background: conic-gradient(at left 30%, red, blue, green, yellow); } .gradient-right-30 { background: conic-gradient(at right 30%, red, blue, green, yellow); } .gradient-left-30-top-50 { background: conic-gradient(at left 30% top 50%, red, blue, green, yellow); } .gradient-right-20-bottom-40 { background: conic-gradient(at right 20% bottom 40%, red, blue, green, yellow); }
جرب الكود

تحديد نقاط الدمج

إفتراضياً، نقطة الدمج بين كل لونين هي في الوسط بينهما لكي يتم توزيع نسب الألوان بالتساوي على مساحة العنصر. في حال أردت إزاحة هذه النقطة لتغيير نسبةً الدمج فإنك تستطيع إضافة رقم بجانب اللون لتحدد أين يتوقف بالنسبة للعنصر.

في المثال التالي تلاعبنا بمكان النقاط الفاصلة بين الألوان حيث أضفنا أربع ألوان على النحو التالي.

  • اللون الأحمر هو اللون الأول.
  • اللون الأزرق هو اللون الثاني و قد جعلناه يبدأ عند 50%، أي عند منتصف العنصر.
  • اللون الأخضر هو اللون الثالث و قد جعلناه يبدأ عند 75%، أي بعد منتصف العنصر.
  • اللون الأصفر و الأخير سيظهر بشكل تلقائي على باقي المساحة المتوفرة.

المثال الأول

.gradient {
background: conic-gradient(red, blue 50%, green 75%, yellow);
}
.gradient { background: conic-gradient(red, blue 50%, green 75%, yellow); }
جرب الكود

في حال وضعت نسبة دمج غير ممكنة فإن الألوان ستظهر و لكن المتصفح لن يظهرها بشكل إنسيابي بل سيظهر كل لون بشكل حاد.


في المثال التالي قمنا بتحديد من أي زاوية لأي زاوية يبدأ و يتوقف كل لون حتى تظهر الألوان بشكل حاد.

المثال الثاني

.gradient {
background: conic-gradient(
red 0deg 70deg,
blue 70deg 150deg,
green 150deg 255deg,
yellow 255deg 360deg);
}
.gradient { background: conic-gradient( red 0deg 70deg, blue 70deg 150deg, green 150deg 255deg, yellow 255deg 360deg); }
جرب الكود

أمثلة و أفكار مفيدة

يمكنك تحويل العنصر لرسم بياني دائري في حال عرضت الألوان بشكل أسطواني و حددت نسبة كل لون بشكل حاد كما فعلنا في المثال التالي.

المثال الأول

#chart {
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(
red 0deg 50deg,
blue 50deg 150deg,
green 150deg 270deg,
yellow 270deg 360deg);
}
#chart { height: 100px; width: 100px; border-radius: 50%; background: conic-gradient( red 0deg 50deg, blue 50deg 150deg, green 150deg 270deg, yellow 270deg 360deg); }
جرب الكود

يمكنك تحويل العنصر للوحة شطرنج في حال جعلت لون الخلفية عبارة عن أربع ألوان (أبيض و أسود على سطر، أبيض و أسود على سطر آخر) هكذا ثم تجعل هذه الألوان تكرر 4 مرات أفقياً و 4 مرات عمودياً حتى تملئ كاملة خلفية العنصر كما فعلنا في المثال التالي.

المثال الثاني

#checkerboard {
height: 100px;
width: 100px;
background: blue;
border: 1px solid black;
background: conic-gradient(
white 25%,
black 25% 50%,
white 50% 75%,
black 75%) top left / 25% 25% repeat;
}
#checkerboard { height: 100px; width: 100px; background: blue; border: 1px solid black; background: conic-gradient( white 25%, black 25% 50%, white 50% 75%, black 75%) top left / 25% 25% repeat; }
جرب الكود
عودة للدرس❯ ❮عودة للدرس