10 أمثلة مذهلة لأقنعة CSS و SVG و Canvas أثناء العمل

يمكنك القيام ببعض الأشياء المدهشة باستخدام أقنعة SVG. كانت هذه التقنية موجودة منذ سنوات ولكنها شقت طريقها مؤخرًا إلى تطوير الويب السائد.

لقد بحثت في الويب للعثور على العروض التوضيحية أدناه لأقنعة القطع المخصصة وأقنعة SVG / Canvas. توضح هذه الأمثلة إلى أي مدى يمكنك دفع الأقنعة على الويب ، وفي النهاية ما قد تقدمه للمطورين في المستقبل.

1. اخفاء النص

للحصول على مثال واضح لإخفاء النص أثناء العمل ، تحقق من القلم أعلاه. يستخدم نص الصفحة الفعلي بتنسيق HTML بحيث يمكنك بسهولة تغيير هذا النص لقراءة ما تريد.

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

يتم إنشاء تأثير التكبير / التصغير أيضًا في CSS فقط مما يجعل مقتطف الشفرة هذا أكثر إثارة للإعجاب.

2. قطع قناع المضلعات

لاحظ أن هذا القلم يستخدم JavaScript للرسوم المتحركة المعقدة ولكن يتم التعامل مع كل الإخفاء من خلال عنصر لوحة الرسم. إنها فكرة معقدة بشكل مدهش ، لذا فإن محاولة اتباع التعليمات البرمجية ستكون صعبة.

لكن تأثير إخفاء المضلع أعلاه هو أحد أكثر التصاميم الفريدة التي رأيتها. يأخذ الأشكال المصممة في CSS ويستخدم JavaScript لإنشاء هذه الأشكال كعناصر صفحة لإخفاء صورة الخلفية.

يؤدي هذا إلى تشغيل رسم متحرك متسق وتشغيله على عنصر Canvas المدعوم من JS والذي يتصرف مثل حاوية لمحتوى SVG / XML. أشياء مجنونة جدًا ولكن من الممتع معرفة ما يمكن أن تفعله الأقنعة!

3. اخفاء الصورة

يوضح مثال القص والجاف هذا كيف يبدو قناع صورة CSS. يمكنك رؤية ما قبل وبعد قناع الصورة أعلاه الذي أنشأه فينسينت دي أوليفيرا.

لاحظ أن القناع الأسود المحكم الفعلي هو مجرد ملف PNG. لكنها طبقات فوق صورة ديناميكيًا في CSS لإنشاء تأثير صورة مقنع.

يمكنك القيام بذلك بأي نسيج تريده طالما يتم تصديره بشفافية. هناك الكثير من التفاصيل حول خاصية القناع وبينما تدعم ملفات .svg ، قد تجد أنه من الأسهل البدء بـ PNG.

4. زر تحوم

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

مرة أخرى ، يعمل الرمز على قناع صورة محدد مسبقًا ولكل زر تأثير القناع الخاص به. أروع جزء هو الرسوم المتحركة التي تحوم والتي لا تعرض القناع فحسب ، بل تجعله ينبض بالحيوية.

هذا بالتأكيد جزء تجريبي من التعليمات البرمجية ، لكنه يبدو استثنائيًا في متصفحات WebKit ونأمل أن تصبح هذه التقنية عنصرًا أساسيًا في غضون بضع سنوات.

5. قناع نص SVG

إليك مثال مختلف قليلاً عن تأثير قناع النص الذي أنشأه المطور Marco Barria.

بدلاً من تحديد صور SVG المخصصة ، تستخدم الكود عنصر SVG بالفعل. لا يزال مبنيًا فوق محتوى نص HTML عادي ولكنه يعمل باستخدام مرشح SVG ديناميكي.

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

6. قماش قناع النص

باستخدام مثال لوحة الرسم هذا بواسطة Calvin Davis ، ستلاحظ أنه يستخدم HTML خامًا للمحتوى ، لكن النص نفسه غير قابل للتحديد.

بدلاً من ذلك يتم عرضها على الصفحة باستخدام عنصر Canvas الذي يمكنه تجريد النص خارج DOM. هذا يجعله يتصرف مثل صورة لذا سترى هذا التأثير حيث يقنع النص على الخلفية ، لكنه لا يبدو وكأنه نص.

قد لا يحب بعض المصممين هذا بسبب عدم قابليته للاستخدام ، لذلك إذا كنت تريد نصًا قابلاً للتحديد ، فلن أزعج هذا الإعداد.

لكنه مثال رائع على المدى الذي يمكنك من خلاله دفع الطباعة بأشكال قماشية.

7. التدرج المتحرك

تأثير نص رائع آخر هو هذا التدرج المتحرك الذي أنشأه المطور Svante Richter.

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

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

8. قناع لقطة متحرك

تستخدم هذه الرسوم المتحركة لقناع القطع المجردة فقاعات مدعومة بـ JS تم إنشاؤها عشوائيًا لإخفاء الصورة. يستخدم عنصر قماش جنبًا إلى جنب مع أقنعة القطع المتحركة التي تم تجميعها معًا لتشكيل شيء blob متماسك لـ SVG.

قد لا يبدو الأمر كثيرًا ، لكن المطور Neil McCallion كتب بعض التعليمات البرمجية الجميلة ، والنتيجة النهائية غريبة بالتأكيد.

يحدث التقنيع في الغالب في عنصر اللوحة ، ولكن يتم التحكم فيه من خلال JavaScript. إنها طريقة ممتعة لدمج صورتين مع رسوم متحركة SVG مجردة.

مرة أخرى ، قد لا يخدم هذا العديد من الأغراض على موقع ويب حقيقي ، ولكنه تجربة رائعة للعبث بالأقنعة.

9. قناع SVG BG

على الجانب الآخر ، هناك تأثير إخفاء يمكنك تشغيله على أي موقع ويب تقريبًا.

يستخدم هذا تدرج الخلفية جنبًا إلى جنب مع رأس رئيسي لإنشاء تأثير إخفاء معقد لا يزال يمتزج بشكل مثالي.

قامت المطورة Ryna Rudenko بدفع الظرف باستخدام هذا القلم باستخدام عنصر قماش خام مع معظم تأثيرات التقنيع في طبقات HTML.

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

10. أقنعة CSS و SVG

هذا المعرض الكامل لأقنعة SVG يقودك حقًا إلى المنزل إلى أي مدى يمكنك القيام به باستخدام CSS الخالص.

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

لكن هذا القلم الصغير يعمل كمقدمة إرشادية لتأثيرات إخفاء الصور المختلفة التي يمكنك القيام بها. مكان رائع للبدء إذا كنت تريد الغوص في SVGs والأقنعة بعروض توضيحية بسيطة.