كيفية إنشاء رمز التبديل واجهة المستخدم باستخدام قناع المغلق
في معالجة الصور, اخفاء هي تقنية تسمح لك إخفاء صورة مع آخر. يستخدم القناع لعمل جزء من الصورة شفاف. يمكنك إجراء التقنيع باستخدام CSS بمساعدة خصائص التقنيع.
في منشور اليوم ، سنقوم بإنشاء صورة مقنعة باستخدام صورتي PNG وتقنيات إخفاء CSS ، والسماح للمستخدمين بمعالجة حالتين الصورة (يوم و ليل) مع مساعدة من واجهة المستخدم التبديل.
نظرًا لبعض مشكلات توافق المتصفح - لن يتم عرض جميع خصائص التقنيع في كل متصفح (اعتبارًا من يونيو 2016) - سأعرض طريقتين لإضافة الأقنعة, واحد للمتصفحات المستندة إلى Webkit وواحد لمتصفح فايرفوكس. تعتبر الخطوتين الأوليين في هذا البرنامج التعليمي المكون من ثلاث خطوات هي نفسها لكل متصفح ، ولكن سيكون هناك اختلاف في الخطوة الثالثة.
الخطوة 1. إنشاء مفتاح أساسي
منذ التبديل نموذجي لديه دولتين مع واحد فقط تمكين في وقت واحد ، يمكنك استخدام مجموعة زر الراديو من اثنين لإنشاء مكونات العمل من التبديل. ضع كل زر راديو في الأطراف اليمنى واليسرى للعنصر الرئيسي.
يتم إنشاء مجموعات أزرار الاختيار عن طريق إعطاء كل زر اختيار نفس الشيء اسم صفة، عزا. في مجموعة زر الراديو, زر راديو واحد فقط يمكن التحقق في وقت واحد.
نبدأ باستخدام HTML و CSS التاليين:
HTML
CSS
في CSS أدناه ، استخدمت الموضع المطلق لوضع أزرار الاختيار على الشاشة بالضبط حيث أريد.
#outerWrapper width: 450px؛ الارتفاع: 90 بكسل ؛ الحشو: 10px. الهامش: 100px auto 0 auto ؛ نصف قطر الحدود: 55 بكسل ؛ box-shadow: 0 0 10px 6px #EAEBED؛ الخلفية: #fff؛ #innerWrapper height: 100٪؛ الحدود بين دائرة نصف قطرها: 45px؛ إخفاء الفائض؛ الموقف: النسبية. .radio width: 90px؛ الطول: 100٪؛ الموقف: مطلقة؛ هامش: 0؛ التعتيم: 0؛ #rightRadio right: 0؛ .radio: not (: check) المؤشر: pointer؛
أضفت التعتيم: 0 حكم على .راديو الطبقة من أجل إخفاء أزرار الراديو. القاعدة الأخيرة في كتلة التعليمات البرمجية أدناه, المؤشر: المؤشر ؛ يعرض مؤشر المؤشر لزر الاختيار غير المحدد ، حتى يعرف المستخدمون أي زر للنقر لتبديل حالة التبديل.
الخطوة 2. إضافة الجلود إلى التبديل
في هذه الخطوة ، سنضيف اثنين أنا أستخدم "Day" و "Night" كحالتين للتبديل ، مستوحاة من لقطة Dibbble التي أطلقها Minh Killy Le. HTML CSS ال باستخدام خاصية CSS لمؤشرات الأحداث ، يمكنك ضبط الظروف التي يمكن أن يكون عنصر الرسوم في ظلها المستهدفة من أحداث الماوس. كبديل للرمز أعلاه ، اثنان بالنسبة إلى Chrome والمتصفحات الأخرى المستندة إلى Webkit ، سأستخدم بشكل عام ، هناك نوعان من التقنيع: الانارة و ألفا. في Chrome (بدءًا من الإصدار 51.0.2704.103 و Win10) ، يبدو أن alpha فقط يعمل حاليًا. في CSS, هنا هو المغلق ذلك يضيف قناع لصور الخلفية في متصفحات Webkit: CSS لقد استخدمت بالنسبة للجلد الليلي ، قمت بإنشاء دائرة شفافة ، وجعلت الجزء المتبقي من حاوية معتمة. لجلد اليوم ، فعلت العكس: خلقت دائرة معتمة مع على الرغم من أنها غير مدعومة في متصفحات Webkit ، إلا أنني أضفتها كما ترون أعلاه ، فإن حدود الدائرة ليست سلسة للغاية. إلى إخفاء الحواف الخشنة, أضف HTML CSS ال على الرغم من أن لذلك ، بدلا من أ صورة SVG أعلاه تبدو وكأنها مزيج من مستطيل أبيض و دائرة سوداء. أضف هذا ، وآخر مع أ مستطيل أسود و دائرة بيضاء كأقنعة لـ HTML استخدمناها في إصدار Webkit. HTML استبدل (أو ادمج مع) كود CSS الخاص بـ لدينا الآن صورتان مختلفتان للقناع (تدرج CSS و SVG) ، ونوعان مختلفان من القناع (Alpha & Luminance) ، ويدعم كل من Webkit و Firefox. CSS
#daySkin background-image: url ('day.png')؛ #nightSkin background-image: url ('night.png') ؛ .skin width: 100٪؛ الارتفاع: 100 ٪ ؛ أحداث المؤشر: لا شيء ؛ الموقف: مطلق ؛ الهامش: 0 أحداث المؤشر: لا شيء ؛ تتم إضافة القاعدة إلى الأسطح بحيث يمكن لأحداث النقر على المفتاح التبديل مر بها, و الوصول إلى أزرار الراديو.
الخطوة 3 أ. إضافة قناع (إصدار Webkit)
قناع صورة خاصية CSS ، والتي - حتى كتابة هذا المنشور - تعمل فقط مع -بكت بادئة في متصفحات Webkit. ال قناع صورة الملكية تتيح لك حدد الصورة لاستخدامها كما قناع.ألفا و الانارة هي قيم قناع من نوع خاصية.#nightSkin background-image: url ('night.png') ؛ قناع من نوع: ألفا. / * دائرة شفافة مع الجزء المتبقي غير شفاف * / -Webkit-mask-image: انحدار شعاعي (دائرة في 45px 45 بكسل ، rgba (0،0،0،0) 45px ، rgba (0،0،0،1) 45px) . / * عند تحديد بشرة اليوم * / #leftRadio: check ~ # nightSkin mask-type: alpha؛ / * دائرة معتمة مع الجزء المتبقي شفاف * / -Webkit-mask-image: انحدار شعاعي (دائرة في 405 بكسل × 45 بكسل ، rgba (0،0،0،1) 45 بكسل ، rgba (0،0،0،0) 45 بكسل) . -بكت قناع صورة خاصية لإنشاء صورة قناع الأولي. قيمتها تستخدم شعاعي التدرج() وظيفة CSS المستخدمة لإنشاء صورة من شكل محدد مسبقًا ، وتدرج شعاعي ، ومركز التدرج اللوني.شعاعي التدرج() وظيفة ، وجعل الجزء المتبقي شفافة.قناع من نوع الخاصية إلى CSS للرجوع إليها في المستقبل.
#switchBtnOutline width: 90px؛ الطول: 100٪؛ الحدود بين دائرة نصف قطرها: 45px؛ صندوق الظل: 0 0 2px 2px رمادي أقحم ، 0 0 10px رمادي ؛ مؤشر-الأحداث: لا شيء؛ الموقف: مطلقة؛ هامش: 0؛ / * ضع #switchBtnOutline في الطرف الأيمن عند تحديد بشرة اليوم * / #leftRadio: check ~ # switchBtnOutline right: 0؛
الخطوة 3 ب. إضافة قناع (إصدار Firefox)
قناع صورة خاصية CSS هي في الواقع الملكية منذ فترة طويلة, وهو جزء من خاصية الاختزال قناع يتيح لك تحديد الصورة التي سيتم استخدامها كقناع أيضًا. في حين قناع صورة غير معتمد في Firefox حتى الآن, قناع هو.قناع يجب أن تقبل الخاصية صورة تم إنشاؤها باستخدام شعاعي التدرج() تعمل CSS كقيمة ، تمامًا مثل قناع صورة فعلت الملكية ، ليس هناك دعم لذلك في فايرفوكس حتى الآن.شعاعي التدرج() دعونا نستخدم صورة SVG كصورة قناع بنوع القناع الانارة.
#nightSkin استخدمنا في إصدار Webkit مع التعليمات البرمجية التالية. وانت انتهيت.#nightSkin background-image: url ('night.png') ؛ قناع نوع: الإنارة. قناع: رابط (#leftSwitchMask)؛ #leftRadio: محددًا ~ # nightSkin mask-type: luminance؛ قناع: رابط (#rightSwitchMask)؛ تحقق من التجريبي
