10 قصاصات CSS لإنشاء تأثيرات نصية تسطير متحركة مذهلة

يعمل تسطير CSS الافتراضي بشكل رائع. من يستطيع أن يكرهها؟

ولكن هناك دائمًا مجال لتحسين الأمور. قد لا تعتقد أن هناك الكثير الذي يمكنك القيام به باستخدام التسطير ، ولكن إذا تعمقت في الرسوم المتحركة لـ CSS ، فسوف تدرك مقدار ما يمكنك فعله حقًا!

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

1. تسطير بالتناوب

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

ليس ذلك فحسب ، بل إنه يتحرك عبر التنقل ديناميكيًا لإعطاء الوهم بأنه كتلة فردية واحدة. رائع أليس كذلك؟

يمكنك القيام بكل هذا بنفسك باستخدام القليل من CSS عن طريق إضافة الكتلة التي تحتها خط إلى عنصر HTML. بسيطة بشكل مدهش بالنظر إلى قلة الكود الذي تحتاجه (حوالي 60 سطرًا من CSS).

2. تمتد خطوط متعددة

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

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

بالإضافة إلى أن هذا الأمر برمته يستخدم تدرج CSS3 مخصصًا للخلفية وهو أمر رائع جدًا.

3. تسطير منزلق

أنشأ المطور Ryan Morse هذا التأثير البسيط للتسطير المنزلق الذي يعتمد فقط على CSS. إنه حل أنيق جدًا نظرًا لأنه لا يتطلب عنصر HTML إضافيًا.

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

4. تسطير نص أفضل

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

في نص Lukas Horak الأفضل ، ستلاحظ أن الشريط الموجود أسفل النص يتناسب بشكل أفضل مع العناصر التنازلية. يأخذ هذا في الاعتبار أشكال الحروف مثل "g" و "p" حيث تنخفض الخطوط تحت ارتفاع السطر المعتاد.

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

5. أنماط الرسوم المتحركة

يتميز هذا القلم الفريد ببعض تأثيرات التسطير المخصصة التي تم إنشاؤها باستخدام CSS النقي بواسطة المطور Matthew Scott.

يتميز بأربعة أنماط تسطير محددة للغاية بناءً على بعض انتقالات CSS الشائعة:

• من اليمين الى اليسار
• من اليسار إلى اليمين
• تنشيط الخارج
• تنشيط الداخل

ستلاحظ أن هذا يعمل على انتقالات CSS3 الشائعة التي تعمل أثناء التمرير فوق الرابط وأثناء تحريك المؤشر بعيدًا عن الارتباط.

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

6. المزيد من أنماط الرسوم المتحركة

إليك حزمة أخرى من الرسوم المتحركة المخصصة للتسطير ، تلك التي أنشأها dev Kseso.

تصبح هذه أكثر تطرفًا مع أنماط التسطير التي تدفع ظلال CSS3 للحصول على تأثيرات متوهجة. ربما يمكنك استخدام هذا كقالب لإنشاء تصميم لضوء Star Wars إذا كان لديك الوقت (أو أحببت Star Wars فقط).

7. مجرد اسقاط

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

مع هذه الرسوم المتحركة لا يزال لديك شعور بأن كل "حد" تسطير يتصل بكل رابط. يعجبني أكثر من الخطوط التي تنزلق بين الروابط لأن هذا التأثير يبدو أكثر سلاسة وأكثر مباشرة.

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

8. توسيع الرسوم المتحركة

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

لاحظ أنه يستخدم وظيفة cubic-Bezier () لإنشاء رسم متحرك فريد عند التمرير.

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

9. تسطير CSS مخصص

إليك أسلوب آخر يمكن أن يعمل حقًا على أي موقع ويب. قام المطور Tristan Wilson بإنشاء هذه التسطير البسيط الذي يحيط بالخط على بعد بضع وحدات بكسل أسفل النص.

إنها دقيقة بما يكفي لتلاحظها ولكنها بالتأكيد لن تحدث فرقًا كبيرًا في سهولة الاستخدام. هذا التأثير يتعلق بالجمال أكثر من قابلية الاستخدام الإضافية.

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

10. تركيب بين سليل

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

يتوقف التأثير بأكمله على اثنين من خصائص CSS3: ظل المربع وظل النص على وجه الدقة.

هذا يخلق الوهم بأن هناك مساحة إلى جانب العناصر السفلية ويعطي التسطير إحساسًا أنيقًا.

بالتأكيد اختيار نظيف لأي موقع ويب وهي طريقة رائعة لتبديل لون التسطير أيضًا.

11. التدرجات المخصصة

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

يمر التدرج اللوني عبر CSS3 حتى تتمكن من تغيير الألوان إلى أي شيء تريده. وإذا كنت تصدق أن هذا الشيء لا يتطلب أي HTML إضافي للعمل. ما عليك سوى استهداف أي روابط إرساء تريدها ونسخ / لصق أكواد CSS للحصول على تسطير متدرج خاص بك.

من بين كل هذه التصميمات ، آمل بالتأكيد أن يكون هناك تأثير واحد لطيف يمكنك أن تستخلصه من هذه المجموعة.

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