تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

استخدام التدرجات المخروطية لإنشاء حدود رائعة

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

رمز CodePen هذا من إنشاء آدم Argyle، تمت المشاركة في الأصل عبر هذا تغريدة على Twitter. كيفية استخدام مخطط مخروطي تدرج إلى وإنشاء حدود.

.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. حرِّك الماوس فوق وستشاهد التغيير في التدرج، وذلك بفضل القليل من JavaScript تحديث خاصية CSS مخصصة تخزّن زاوية التدوير.

تستخدم هذه الأمثلة border-image-source الموقع. تحدد هذه الخاصية الصورة المصدر المستخدمة لإنشاء تصنيف الحد. وكما هو الحال مع الخصائص الأخرى التي تقبل قيمة صورة، فإن أي تدرج CSS النوع صالح أيضًا.

`border-image-source`

دعم المتصفح

المصدر

تدرج مخروطي

دعم المتصفح

المصدر