بعض الروابط حول تدرجات CSS

بين الحين والآخر ، يبدو أن روح المدونات تتحد حول موضوع معين وتشبه المقالات المحفوظة في مجلد الإشارات المرجعية الخاصة بي تجري محادثة. المحادثة الجارية الآن تدور حول CSS Gradients وأعتقد أنني سأربط بعض القطع الأكثر إثارة للاهتمام.

• اليوم 22: التدرجات المخروطية - نظر مانويل ماتوزوفيتش إلى التدرجات المخروطية في اليوم 21 من سلسلته التي استمرت 100 يوم حول CSS الحديث ، مما وفر نظرة رائعة عالية المستوى على الألوان والزوايا والموضع والتوقف اللوني. ثم على يوم 22، يضعها على ::backdrop عنصر زائف. (بالمناسبة تويتر بشكل غير متوقع علق حسابه - دعنا نساعد في تصحيح هذه السفينة إذا استطعنا.)
• هل تفهم حقًا التدرجات الشعاعية لـ CSS؟ - باتريك بروسيت لقد أنجزت عملًا يستحق الإرشاد هنا وما زلت بصراحة أعمل طريقي من خلاله. لكنني أقدر بشدة تفسيراته الواضحة وعروضه التوضيحية للأشياء التي ما زلت أفشلها ، مثل الكلمات الرئيسية لحجم وشكل التدرج الشعاعي. أنا بالفعل أقوم بربط هذا في منطقتنا دليل تدرجات CSS!
• تدرجات خلفية عالية التخصيص - مرحبًا ، بالحديث عن التدرج الشعاعي ، سكوت فانديهيوصفة واحدة مع عدة لون توقف جولات الأسبوع الماضي. كان التحدي الذي يواجهه هو إنشاء نمط متدرج يمكن أن يدعم اختلافات ألوان مختلفة ، والتي عادة ما تكون عبارة عن فوضى عارمة لفئات CSS وقيم الألوان لكل اختلاف إن لم يكن للاستخدام خصائص مخصصة. بهذه الطريقة ، يمكنه تعيين خاصية مخصصة للألوان المختلفة وقيم الموضع لكل نقطة توقف لونية ، ثم ببساطة تحديث القيم وفقًا للسياق. والأكثر من ذلك هو أن الطريقة التي يمكن بها تحديث الخصائص المخصصة باستخدام JavaScript سمحت لسكوت بذلك بناء أداة لتخصيص نمط التدرج الخاص به، والتي يتم مشاركتها بسخاء في نهاية المنشور.
• أنماط الألوان النصفية CSS - ميشيل باركر مع توزيع مفصل لأنماط "الألوان النصفية" لـ Ana Tudor. التأثير يشبه إلى حد ما الطباعة بالحبر المنقط لصحف المدرسة القديمة. بينما تستخدم آنا هوديني تحت الغطاء للرسوم المتحركة وتأثيرات التحويم ، تنظر ميشيل بشكل خاص إلى تأثير الألوان النصفية نفسها وكيف يتم بناؤها باستخدام تدرج شعاعي. أنا أحب بشكل خاص الطريقة التي توضح بها ميشيل كيفية الانتقال من شبكة مباشرة من النقاط إلى شبكة يكون فيها النمط متداخلاً قليلاً. والتزم حتى النهاية لترى كيف تتخلل التأثير بامتداد mask-image يستخدم تدرجًا خطيًا لإنشاء تأثير يتلاشى. لقد انتزعت هذا النمط قليلاً، أيضًا ، وانتهى الأمر بشيء أنيق يشبه مرشح لطخة الحبر السائلة.
• حل نافبار داشينغ - حصل Eric Meyer على تحدي تصميم مثير للاهتمام لقائمة حيث يخرج خط منقط من رابط "الصفحة الحالية" ويصبح جزءًا من حد منقط أكبر على طول الحافة اليسرى لحاوية المحتوى. إيريك دائمًا مثال رائع على كيف تفكر مثل مطور الواجهة الأمامية، وهو يفعل ذلك هنا حيث يصف المسار البديل الذي سلكه باستخدام التدرج الخطي عندما يواجه عقبة مع النهج القياسي للإعداد border-style: dotted على العنصر.
• خطوط متقطعة متدرجة مقنعة - إريك بمتابعة للرابط الأخير الذي يوضح ليس فقط كيف ربط شرطات الحد الأيسر بشرطات الصورة النقطية ، ولكن كيف أقنعته عينه ذات التصميم المتقلب بتغيير حله لتقليد الدقة المنخفضة لـ شرطات الصورة باستخدام اثنين من تدرجات الخلفية الخطية المتكررة كملف mask-image على تدرج الخلفية. نردي جدا ورائع!