بعد الانتهاء من مشروع تطلب مني أن أتعلم كل ما أستطيع تعلمه عن الرسوم المتحركة CSS وSVG، بدأت في كتابة هذه السلسلة حول Smashing Animations و"كيف تلهم الرسوم الكاريكاتورية الكلاسيكية CSS الحديثة". في ختام هذا العام، أريد أن أوضح لك كيفية استخدام CSS الحديث لإنشاء هذا العنصر الذي يجعل Toon Titles مؤثرًا للغاية: أسلوب الطباعة. تصميم العمل الفني العنوان في العصر الصامت في العشرينيات وأوائل الثلاثينيات من القرن الماضي، خلقت طباعة بطاقة عنوان الفيلم حالة مزاجية، وجهزت المشهد، وذكّرت الجمهور بنوع الفيلم الذي دفعوا مقابل مشاهدته.
كانت بطاقات العناوين الكرتونية أيضًا عبارة عن علامات تجارية، ومزاج، وإعدادات للمشهد، وكلها مدمجة في بطاقة واحدة. في السنوات الأولى، عندما كانت ميزانيات الاستوديوهات الكبرى أكبر، كانت بطاقات العناوين هذه غالبًا توضيحية ومصورة.
ولكن عندما ازدهر التلفزيون خلال خمسينيات القرن العشرين، انخفضت الميزانيات، واعتمدت البطاقات التي صممها فنانون مثل لورانس "آرت" جوبل لغة بصرية جديدة، وأصبحت أكثر رسومية، ومنمقة، وأقل تعقيدًا. ملحوظة: لورانس "آرت" جوبل هو أحد أبطال الرسوم المتحركة الأمريكية في منتصف القرن الذي غالبًا ما يتم تجاهله. كان يعمل في المقام الأول لدى شركة Hanna-Barbera خلال السنوات الأكثر تأثيرًا في الخمسينيات والستينيات. لم يكن Goble رسامًا للرسوم المتحركة. كان دوره هو خلق الجو، لذلك قام بتصميم بيئات لـ The Flintstones وHuckleberry Hound وQuick Draw McGraw وYogi Bear، بالإضافة إلى بطاقات العنوان الافتتاحية التي تحدد النغمة. ساعدت بطاقات العناوين الخاصة به، والتي تحتوي على لوحات مغطاة بشعار، في تحديد المظهر الأيقوني لهانا باربيرا. كان عمل Goble الفني لشخصيات مثل Quick Draw McGraw وYogi Bear فعالاً على شاشات التلفزيون الأصغر حجمًا. وبدلاً من إعادة إنتاج صورة ثابتة من الرسوم الكاريكاتورية، ركز على تقديم فكرة واحدة قوية - غالبًا في صورة ظلية - تستحوذ على جوهرها. في فيلم "The Buzzin’ Bear"، يمر يوغي بطائرة هليكوبتر. لقد ارتد بعيدًا، وفي يده سلة pic-a-nic، في "Bear on a Picnic"، ومن أجل "Prize Fight Fright"، قام Yogi بوضع نص العنوان.
مع وجود حركة قليلة أو معدومة يمكن الاعتماد عليها، كان على إطارات جوبل الفردية أن تخلق حالة مزاجية، وتهيئ المشهد، وتصف القصة. لقد فعلوا ذلك باستخدام الألوان المسطحة والأشكال الرسومية والطباعة التي تم دمجها بشكل متكرر في العمل الفني.
باعتبارنا مصممين يعملون على الويب، يمكن لعناوين الرسوم المتحركة أن تعلمنا الكثير حول كيفية نقل شخصية العلامة التجارية، وترك الانطباع الأول، وتحديد التوقعات لتجربة شخص ما باستخدام منتج أو موقع ويب. يمكننا أن نتعلم من تقنيات الفنانين لإنشاء لافتات فعالة، ورؤوس الصفحات المقصودة، وحتى شاشات البداية الرائعة. طباعة عنوان تون تُظهر بطاقات العناوين الكرتونية كيف يؤدي دمج الكتابة مع الصور إلى توفير التأثير الذي يحتاجه الرأس أو البطل. مع مجموعة من حيل تظليل النص، وخطوط النص، والتحويل، يتيح لك CSS الحديث الاستفادة من نفس الطاقة.
مولد عنوان النص تون أثناء كتابة هذا المقال، أدركت أنه سيكون من المفيد أن يكون لدي أداة لإنشاء نص على غرار عناوين الرسوم المتحركة التي أحبها كثيرًا. لذلك صنعت واحدة. يتيح لك My Toon Text Title Generator تجربة الألوان والحدود وظلال النص المتعددة. يمكنك ضبط ترتيب الطلاء، وتطبيق تباعد الأحرف، ومعاينة النص في مجموعة مختارة من نماذج الخطوط، ثم نسخ ملف CSS الذي تم إنشاؤه مباشرة إلى الحافظة الخاصة بك لاستخدامه في المشروع. تون العنوان CSS يمكنك ببساطة نسخ ولصق ملف CSS الذي يوفره لك Toon Text Title Generator. ولكن دعونا نلقي نظرة فاحصة على ما يفعله. ظل النص انظر إلى النوع الموجود في هذا العنوان من حلقة Augie Doggie "Yuk-Yuk Duck"، بأحرفه الصفراء الباهتة وظله الداكن القاسي الذي يرفعه عن الخلفية ويخلق وهم العمق.
ربما تعلم بالفعل أن ظل النص يقبل أربع قيم: (1) الإزاحات الأفقية و(2) الرأسية، (3) التمويه، و(4) اللون الذي يمكن أن يكون ثابتًا أو شبه شفاف. يمكن أن تكون قيم الإزاحة هذه موجبة أو سالبة، لذا يمكنني تكرار "Yuk-Yuk Duck" باستخدام ظل صلب تم سحبه إلى الأسفل وإلى اليمين: اللون: #f7f76d؛ ظل النص: 5px 5px 0 #1e1904;
من ناحية أخرى، فإن عنوان "Pint Giant" هذا له إحساس مختلف بظله السلبي شبه الناعم: اللون: #c2a872؛ ظل النص: -7px 5px 0 #b100e، 0 -5px 10px #546c6f;
لإضافة عمق إضافي وإنشاء تأثيرات أكثر إثارة للاهتمام، يمكنني وضع طبقات متعددة من الظلال. بالنسبة إلى "Let's Duck Out"، قمت بدمج أربعة ظلال: الأول ظل ثابت مع إزاحة أفقية سلبية لرفع النص عن الخلفية، متبوعًا بظلال أكثر نعومة تدريجيًا لإنشاء ضبابية حوله: اللون: #6F4D80؛ ظل النص: -5 بكسل5px 0 #260e1e، /* الظل 1 */ 0 0 15px #e9ce96, /* الظل 2 */ 0 0 30px #e9ce96, /* الظل 3 */ 0 0 30 بكسل #e9ce96; /* الظل 4 */
توضح هذه الظلال أن استخدام ظل النص لا يتعلق فقط بإنشاء تأثيرات الإضاءة، حيث يمكن أيضًا أن يكون زخرفيًا ويضيف شخصية. السكتة الدماغية النص تحتوي العديد من بطاقات العناوين الكرتونية على أحرف ذات مخطط غامق يجعلها بارزة في الخلفية. يمكنني إعادة إنشاء هذا التأثير باستخدام ضغط النص. لفترة طويلة، كانت هذه الخاصية متاحة فقط عبر البادئة -webkit-، ولكن هذا يعني أيضًا أنها مدعومة الآن عبر المتصفحات الحديثة.
ضربة النص هي اختصار لخاصيتين. الأول، عرض حد النص، يرسم محيطًا حول الحروف الفردية، بينما الثاني، لون حد النص، يتحكم في لونه. بالنسبة إلى "Whatever Goes Pup"، أضفت حدًا أزرق بحجم 4 بكسل إلى النص الأصفر: اللون: #eff0cd؛ -webkit-text-stroke: 4px #7890b5; ضربة النص: 4 بكسل #7890b5؛
يمكن أن تكون الضربات مفيدة بشكل خاص عندما يتم دمجها مع الظلال، لذلك بالنسبة لـ "Growing, Growing, Gone"، أضفت حدًا رفيعًا بحجم 3 بكسل إلى ظل غير واضح بالكاد يبلغ 1 بكسل لإنشاء تأثير النص ثلاثي الأبعاد هذا: اللون: #fbb999؛ ظل النص: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; ضربة النص: 3 بكسل #984336؛
ترتيب الطلاء لا يؤدي استخدام حدود النص دائمًا إلى النتيجة المتوقعة، خاصة مع الأحرف الرفيعة والحدود الأكثر سمكًا، لأن المتصفح يرسم حدًا فوق التعبئة بشكل افتراضي. للأسف، لا يزال CSS لا يسمح لي بضبط موضع الحد كما أفعل غالبًا في Sketch. ومع ذلك، فإن خاصية ترتيب الطلاء لها قيم تسمح لي بوضع الحد خلف التعبئة، وليس أمامها.
ترتيب الطلاء: يقوم الرسم برسم الحد أولاً، ثم التعبئة، في حين أن ترتيب الطلاء: التعبئة يقوم بالعكس: اللون: #fbb999؛ ترتيب الطلاء: ملء؛ ظل النص: 3px 5px 1px #5160b1; لون خط النص:#984336; عرض حد النص: 3 بكسل؛
تعمل السكتة الدماغية الفعالة على إبقاء الحروف قابلة للقراءة، وتضيف وزنًا، و- عند دمجها مع الظلال وترتيب الطلاء - تعطي النص المسطح حضورًا حقيقيًا. الخلفيات داخل النص تتجاوز العديد من بطاقات العناوين الكرتونية الألوان المسطحة عن طريق إضافة مادة أو تدرجات أو تفاصيل توضيحية إلى الحروف. في بعض الأحيان يكون هذا نسيجًا، وفي أحيان أخرى قد يكون تدرجًا مع تغير لوني دقيق. على الويب، يمكنني إعادة إنشاء هذا التأثير باستخدام صورة خلفية أو تدرج خلف النص، ثم قصها على شكل الحروف. يعتمد هذا على خاصيتين تعملان معًا: مقطع الخلفية: النص ولون تعبئة النص: شفاف.
أولاً، أقوم بتطبيق خلفية خلف النص. يمكن أن تكون هذه صورة نقطية أو صورة متجهة أو تدرج CSS. بالنسبة لهذا المثال من حلقة Quick Draw McGraw "Baba Bait"، يتضمن نص العنوان تدرجًا دقيقًا من الأعلى إلى الأسفل من الداكن إلى الفاتح: الخلفية: التدرج الخطي (0deg، #667b6a، #1d271a)؛
بعد ذلك، أقوم بقص تلك الخلفية إلى الحروف الرسومية وجعل النص شفافًا بحيث تظهر الخلفية من خلال: -webkit-background-clip: نص؛ -webkit-text-fill-color: شفاف؛
مع هذين الخطين فقط، لم تعد الخلفية مرسومة خلف النص؛ بدلاً من ذلك، تم رسمه بداخله. تعمل هذه التقنية بشكل جيد بشكل خاص عند دمجها مع الحدود والظلال. يوفر التدرج المقطوع للحروف اللون والملمس، ويحافظ الحد على حوافها حادة، ويرفعها الظل من الخلفية. معًا، يقومون بإعادة إنشاء المظهر متعدد الطبقات لبطاقات العناوين المرسومة يدويًا باستخدام القليل من CSS فقط. كما هو الحال دائمًا، اختبر النص المقطوع بعناية، حيث يمكن أن تؤثر مراوغات المتصفح أحيانًا على الظلال والعرض. تقسيم النص إلى أحرف فردية في بعض الأحيان لا أرغب في تصميم كلمة أو عنوان كامل. أريد تصميم حروف فردية - لدفع الشخصية إلى مكانها، أو إعطاء وزن إضافي لحرف رسومي واحد، أو تحريك بعض الحروف بشكل مستقل. في HTML وCSS العاديين، هناك طريقة واحدة موثوقة للقيام بذلك: لف كل حرف في عنصر الامتداد الخاص به. يمكنني القيام بذلك يدويًا، لكن ذلك سيكون هشًا، ويصعب صيانته، وسوف ينهار بسرعة عند تغيير النسخة. بدلاً من ذلك، عندما أحتاج إلى التحكم في كل حرف، أستخدم مكتبة تقسيم النص مثل splt.js (على الرغم من توفر حلول أخرى). يأخذ هذا عقدة نصية ويغلف الكلمات أو الأحرف تلقائيًا، مما يمنحني روابط إضافية للتحريك والأسلوب دون إفساد العلامات الخاصة بي. إنه أسلوب يجعل HTML الخاص بي قابلاً للقراءة ودلاليًا، بينما يمنحني التحكم الدقيق الذي أحتاجه لإعادة إنشاء الطباعة المميزة غير المتساوية التي تراها في بطاقات العناوين الكرتونية الكلاسيكية. ومع ذلك، يأتي هذا النهج معتحذيرات بشأن إمكانية الوصول، حيث أن معظم برامج قراءة الشاشة تقرأ العقد النصية بالترتيب. لذلك هذا:
همهمة حلوة همهمة
...يقرأ كما تتوقع: همهمة حلوة همهمة
لكن هذا: <ح2> ح ش م
…يمكن تفسيرها بشكل مختلف اعتمادًا على المتصفح وقارئ الشاشة. سيقوم البعض بتسلسل الحروف وقراءة الكلمات بشكل صحيح. قد يتوقف البعض الآخر بين الحروف، وهو ما قد يبدو في أسوأ الحالات كما يلي: "ح..." "أنت..." "م..."
للأسف، بعض حلول التقسيم لا تقدم نتائج يمكن الوصول إليها دائمًا، لذلك قمت بكتابة أداة تقسيم النصوص الخاصة بي، splinter.js، والتي هي حاليًا في مرحلة تجريبية. تحويل الحروف الفردية لتنشيط Toon Text Splitter، أقوم بإضافة سمة بيانات إلى العنصر الذي أريد تقسيمه:
همهمة حلوة همهمة
أولاً، يقوم البرنامج النصي الخاص بي بفصل كل كلمة إلى أحرف فردية وتغليفها في عنصر امتداد مع تطبيق سمات الفئة وARIA:
يأخذ البرنامج النصي بعد ذلك المحتوى الأولي للعنصر المقسم ويضيفه كسمة نغمة للمساعدة في الحفاظ على إمكانية الوصول:
مع تطبيق سمات الفئة هذه، يمكنني بعد ذلك تصميم الأحرف الفردية حسب اختياري.
على سبيل المثال، بالنسبة لـ "Hum Sweet Hum"، أريد تكرار كيفية تحول الحروف بعيدًا عن خط الأساس. بعد استخدام Toon Text Splitter، قمت بتطبيق أربع قيم ترجمة مختلفة باستخدام محددات :nth-child لإنشاء مظهر شبه عشوائي: /* الرابع، الثامن، الثاني عشر... */ .toon-char:nth-child(4n) { ترجمة: 0 -8px؛ } /*الأول، الخامس، التاسع...*/ .toon-char:nth-child(4n+1) { ترجمة: 0 -4px; } /* الثاني، السادس، العاشر... */ .toon-char:nth-child(4n+2) { ترجمة: 0 4px; } /* الثالث، السابع، الحادي عشر... */ .toon-char:nth-child(4n+3) { ترجمة: 0 8px; }
لكن الترجمة هي خاصية واحدة فقط يمكنني استخدامها لتحويل نص الرسوم المتحركة الخاص بي.
يمكنني أيضًا تدوير تلك الشخصيات الفردية للحصول على مظهر أكثر فوضوية: /* الرابع، الثامن، الثاني عشر... */ .toon-line .toon-char:nth-child(4n) { تدوير: -4deg; } /*الأول، الخامس، التاسع...*/ .toon-char:nth-child(4n+1) { تدوير: -8deg; } /* الثاني، السادس، العاشر... */ .toon-char:nth-child(4n+2) { تدوير: 4deg; } /* الثالث، السابع، الحادي عشر... */ .toon-char:nth-child(4n+3) { تدوير: 8 درجة؛ }
لكن الترجمة هي خاصية واحدة فقط يمكنني استخدامها لتحويل نص الرسوم المتحركة الخاص بي. يمكنني أيضًا تدوير تلك الشخصيات الفردية للحصول على مظهر أكثر فوضوية: /* الرابع، الثامن، الثاني عشر... */ .تون-خط .تون-شار:nth-child(4n) { التدوير: -4 درجة؛ }
/*الأول، الخامس، التاسع...*/ .تون شار:nth-child(4n+1) { التدوير: -8 درجة؛ }
/* الثاني، السادس، العاشر... */ .تون-شار:nth-child(4n+2) { التدوير: 4 درجات؛ }
/* الثالث، السابع، الحادي عشر... */ .تون-شار:nth-child(4n+3) { تدوير: 8 درجة؛ }
وبالطبع، يمكنني إضافة رسوم متحركة لهز تلك الشخصيات وإضفاء الحيوية على عناوين نمط النص الخاص بي. أولاً، قمت بإنشاء رسم متحرك للإطار الرئيسي يقوم بتدوير الأحرف:
@keyframes تهزهز { 0%, 100% { التحويل: تدوير(var(--base-rotate, 0deg)); } 25% { تحويل: تدوير(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { تحويل: تدوير(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { تحويل: تدوير(calc(var(--base-rotate, 0deg) + 1deg)); } }
قبل تطبيقه على عناصر الامتداد التي أنشأها برنامج Toon Text Splitter الخاص بي: .تون شار { الرسوم المتحركة: تهزهز 3s بسهولة لا نهائية؛ أصل التحويل: أسفل المركز؛ }
وأخيرًا، تحديد مقدار التدوير والتأخير قبل أن يبدأ كل حرف في الاهتزاز: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { تأخير الرسوم المتحركة: 0.1 ثانية؛ } .toon-char:nth-child(4n+1) { تأخير الرسوم المتحركة: 0.3 ثانية؛ } .toon-char:nth-child(4n+2) { تأخير الرسوم المتحركة: 0.5 ثانية؛ } .toon-char:nth-child(4n+3) { تأخير الرسوم المتحركة: 0.7 ثانية؛ }
إطار واحد لترك انطباع كان لدى فناني عناوين الرسوم المتحركة إطار واحد لترك انطباع، وكانت الطباعة الخاصة بهم لا تقل أهمية عن العمل الفني الذي رسموه. وينطبق الشيء نفسه على شبكة الإنترنت. رأس أو بطل مصمم جيدًاتحتاج المنطقة إلى الوضوح والشخصية والثقة - وليس مجرد صورة خلفية باهتة كاملة العرض. باستخدام بعض خصائص CSS المختارة بعناية - الظلال والحدود والخلفيات المقطوعة وبعض الرسوم المتحركة المقيدة - يمكننا إعادة إنشاء نفس التأثير. أحب النصوص المتحركة ليس لأنني أشعر بالحنين إلى الماضي، ولكن لأن تصميمها مقصود. اتخذ اختيارات مدروسة، ودع القليل من طباعة النص الكرتوني تضيف تأثيرًا إلى تصميماتك.
