استخدام التدرجات المخروطية لإنشاء حدود رائعة
bookmark_borderbookmark
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يمكن استخدام التدرجات المخروطية لإنشاء بعض التأثيرات المثيرة للاهتمام، مثل مثال الحدود الجميل هذا.
يعرض CodePen الذي أنشأه آدم
أرجايل، والذي تمت مشاركته في الأصل من خلال
هذا التغريدة على Twitter، كيفية استخدام تدرّج conic ل
إنشاء حدود.
.conic-gradient-border {
border: 25px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(100 100% 60%),
hsl(200 100% 60%),
hsl(100 100% 60%)
);
}
استخدم تيري مون الرمز البرمجي المشتق
الذي أنشأه "آدم" في CodePen وأعدّ CodePen بهذه الطريقة الإبداعية. مرِّر مؤشر الماوس فوق العنصر، وستلاحظ تغيُّر التدرّج اللوني، وذلك بفضل القليل من JavaScript الذي يعدّل خاصيّة مخصّصة في CSS لتخزين زاوية الدوران.
تستخدِم هذه الأمثلة السمة
border-image-source
. تضبط هذه السمة الصورة المصدر المستخدَمة لإنشاء حدود العنصر. كما هو الحال مع السمات الأخرى التي تقبل قيمة صورة، يكون أي نوع من أنواع التدرّج في CSS مقبولاً أيضًا.
border-image-source
التدرّج المخروطي
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2022-05-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2022-05-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]