حل مشكلة الخطوط المسننة في التدرجات

أحد أنماط تصميم التصميم الشائعة إلى حد ما التي قد تصادفها هي الكتل ذات الانتقال الزاوي للألوان المتدرجة. يبدو شيء مثل الصورة أدناه.


الزاوي التدرج داخل المستطيل

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


الشكل 2: حواف خشنة من التدرج الزاوي

كانت النتيجة تشبه النتيجة الموضحة في الشكل 2. كما ترون ، ظهرت الشقوق البارزة جدًا على حدود انتقال ألوان التدرج.

لحسن الحظ ، هناك طريقة بسيطة للغاية لحل هذه المشكلة! عادةً ، عندما ترغب في إنشاء سطر من تغيير اللون المفاجئ في التدرج الخطي ، اكتب الرمز مثل هذا:

background: linear-gradient(176deg, white, white 75%, black 75%, black 100%); 

هذا يعني أنه في النطاق من 0 إلى 75٪ من حجم الكتلة ، سيكون لون التعبئة أبيضًا ، وسيبدأ بـ 75٪ - أسود. هذا يخلق خط خشنة نوعا ما. لسوء الحظ ، مع زاوية التدرج وحجم كتلة معينة ، يمكن أن يؤدي متعرج القبيح إلى حد ما.

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

 background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%); 

مقارنة خطوط التدرج الخشنة والسلسة

مثال CodePen:


آمل أن يساعدك هذا في المستقبل في حل المشكلات.

شكرا amakhrov على هذه الفكرة مع "احسب"
في رأيي ، مع calc () سيكون أكثر موثوقية: لا يعتمد على حجم وزاوية الميل

 linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))