قرارات التصميم المستوحاة مع Herb Lubalin: يمكن أن تكون الطباعة مثيرة مثل الرسم التوضيحي والتصوير الفوتوغرافي

بينما يساعد الاستخدام الجيد للكتابة الأشخاص على القراءة ، يمكن للطباعة الرائعة أن تفعل الكثير. يمكن للطباعة أن تعبر ببلاغة عن فكرة وتوصيل رسالة ملونة بطرق قوية مثل أي رسم أو صورة.

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

في الآونة الأخيرة ، تعكس الطباعة في ملصقات أفلام كوينتين تارانتينو تمامًا جو وشخصية أفلامه. في Pulp Fiction ، يكون محرف العنوان Aachen Bold صعبًا مثل الفيلم نفسه. في فيلم Once Upon a Time in Hollywood ، على الرغم من أن تنضيد اللافتة الأيقونية ينحرف عن الواقع بقدر ما ينحرف عن أجزاء أخرى من الفيلم ، فإن الملصق يستحضر روح هوليوود.

من المحتمل أن يكون Saul Bass هو أشهر مصمم جرافيك في عصره ، وفي الخمسينيات والستينيات من القرن الماضي ، ابتكر ملصقات أفلام يمكن التعرف عليها مثل العلامة نفسها. لتصميم الملصق الخاص به في فيلم Hitchcock's Vertigo في عام 1958 ، استخدم باس أسلوب الطباعة المقطوع يدويًا الذي يستحضر أفلامًا تعبيرية ألمانية في عشرينيات القرن الماضي. في عام 1960 ، كانت طباعة العنوان المقطوعة لباس لبيشو - مرة أخرى لألفريد هيتشكوك - ذكية وواضحة في نفس الوقت. في حين يُنسب الفضل إلى Saul Bass غالبًا في تصميم أحد ملصقات الأفلام المفضلة لدي من West Side Story ، - قام باس بتصميم تسلسل العنوان - تم تصميم الملصق بالفعل بواسطة جوزيف كاروف الذي أنشأ أيضًا شعار 007 الشهير لجيمس بوند.

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

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

مستوحى من Herb Lubalin

كان Herb Lubalin مصمم جرافيك أمريكيًا أمضى حياته المهنية في تصميم كل شيء بدءًا من الإعلانات والملصقات وحتى الطوابع البريدية. لقد كان مفتونًا بمظهر الكلمات وكيف يمكن للتصميم المطبعي أن يجعلها تبدو سليمة. فهم لوبالين كيف أنه من خلال الجمع بين الفن والنسخ والطباعة ، يضيف مصممو الرسوم الاقتناع عند توصيل الرسائل. هو قال:

"كلما تواصل الأشخاص بشكل أفضل ، كلما زادت الحاجة إلى أسلوب طباعة معبرة أفضل."

- عشب لوبالين

بعد اجتياز امتحان القبول في مدرسة Cooper Union الفنية في نيويورك ، تم فصل هربرت (Herb) Lubalin من وظيفته الأولى كفنان رسومي لطلبه زيادة قدرها 2 دولار في الأسبوع. في وكالات الإعلان الأمريكية قبل الحرب ، كانت وظيفة فنان التخطيط هي ببساطة وضع العناوين الرئيسية والنسخ والصور في المساحة المتاحة ، لكن ذلك تغير بعد الحرب العالمية الثانية مع تدفق المصممين المهاجرين من أوروبا. وكان من بينهم النمساوي هربرت باير والروسي محمد فهمي آغا والبيلاروسي أليكسي برودوفيتش.

استورد هؤلاء المصممون عمليات جديدة جمعت مديري الفن وفناني التخطيط والكتاب معًا لتشكيل الفرق الإبداعية التي اشتهرت من قبل المدير الإبداعي الشهير للإعلان بيل بيرنباخ في الستينيات والسبعينيات.

في عام 1945 ، أصبح لوبالين مديرًا فنيًا في Sudler & Hennessey - وهو استوديو إبداعي متخصص في صناعة الأدوية - حيث قاد فريقًا من المصممين والرسامين والمصورين. العملية التي أسسها لوبالين أولاً في Sudler & Hennessey وابتداءً من عام 1964 في الاستوديو الخاص به كانت رائعة. قاد عملية التصميم من خلال صنع "المناديل" - رسومات بالقلم الرصاص والحبر التي حددت الترتيب المكاني لعناصرها - وملاحظات تفصيلية حول تصميمات الطباعة بما في ذلك خيارات الخطوط والأحجام والأوزان.

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

كان لوبالين مهووسًا بالكمال فيما يتعلق بالطباعة. بالنسبة إلى "Let's talk type" - إعلان تجاري لـ Sudler & Hennessey - وضع لوبالين الفقرة الوحيدة بدقة. توجد هذه النسخة تمامًا على خط الأساس جنبًا إلى جنب مع كلمة "Let" وحجمها والمسافة البادئة يسمحان بالسقوط من الحرف "y" أعلاه.

كان لوبالين دقيقًا بنفس القدر بشأن وضع النص في الملصق الذي أعلن عن مسابقة الملصق Avant Garde المناهضة للحرب. غالبًا ما كان يأخذ شفرة مشرط للكتابة ، وضبط التباعد بين الحروف وتغيير ارتفاع الصاعدين والمنحدرين لتناسب تصميماته. الرسائل في العنوان الرئيسي لـ "لا مزيد من الحرب" هي رسائل بحجم ومحاذاة دقيقة. يؤدي تتبع القاعدة الزرقاء الكبيرة إلى إنشاء كتلة من النسخ تتناسب تمامًا مع مساحتها.

في "الرابع من تموز (يوليو) يعني النزهات ..." استخدم لوبالين المنظور لتمثيل الطريق إلى الأمام. وهذا يعني النظر في تتبع كل سطر من النص ، وفي بعض الأحيان تغيير الكلمات لتناسب التصميم. لم يكن العمل مع تصميمات لوبالين سهلاً ، وكما وصف لاحقًا أحد مساعديه:

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

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

هناك كتابان عن Herb Lubalin وعمله يجب أن تضيفهما إلى مجموعتك. "هيرب لوبالين: مدير فني ومصمم غرافيك وطباعي" (1985) لجيرترود سنايدر وآلان بيكوليك نفدت طبعته ، لكن النسخ الجيدة متاحة على موقع eBay. والأفضل من ذلك هو "Herb Lubalin: American Graphic Designer" (2013) من تأليف Adrian Shaughnessy ونشرته Unit Editions. إصدار محدود من عام 2000 ، يعرض كتاب Shaughnessy مئات الأمثلة من أعمال لوبالين.

عناوين التنسيق المسبق

العناوين الرئيسية هي المكان المثالي للبدء في أن تكون أكثر ميلًا إلى المغامرة مع الكتابة. لا تحتاج الطباعة التعبيرية إلى خطوط رائعة. يمكنك إنشاء عنوان لافت للنظر باستخدام أنماط وأوزان مختلفة موجودة في العديد من مجموعات الخطوط اليومية. ابحث عن العائلات الممتدة مثل Montserrat - التي صممتها Julieta Ulanovsky والمتاحة على Google Fonts - مع مجموعة متنوعة من الأوزان التي تتراوح من رقيقة وخفيفة إلى فائقة الجرأة وحتى سوداء.

لهذا التصميم الأول المستوحى من Herb Lubalin ، يستخدم العنوان الرئيسي الخاص بي أوزانًا سوداء وخفيفة من محرف sans-serif هذا. يتحد التتبع السلبي (تباعد الأحرف) والمسافة الضيقة (ارتفاع الخط) لإنشاء كتلة من النوع تتطلب الانتباه.

في الماضي ، كان تطوير عناوين مثل هذا يتطلب ترميز التصميم في HTML الخاص بك عن طريق إضافة فواصل بين الكلمات الفردية ، مثل هذا:

 <h1><strong>UK's <br> best-<br> selling <br> car</strong> <br> during <br> the <br> 1970s</h1>

في أوقات أخرى ، يمكنك استخدام التفاف كل كلمة بعنصر امتداد مضمن ثم تغيير خاصية العرض للحظر:

 <h1><strong><span>UK's</span> <span>best-</span> <span>selling</span> <span>car</span></strong> <span>during</span> <span>the</span> <span>1970s</span></h1>

بدلاً من هذه العناصر التقديمية ، أقوم بإضافة فواصل أسطر صريحة في HTML الخاص بي:

 <h1><strong>UK's best- selling car</strong> during the 1970s</h1>

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

 h1 { font-size: 6vmax; font-weight: 300; line-height: .75; letter-spacing: -.05em; text-transform: uppercase; color: #fff; } h1 strong { font-weight: 600; color: #bd1f3a; }

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

1. white-space: normal;
   يملأ النص مربعات الأسطر وفواصل كما هو مطلوب
2. white-space: nowrap;
   لن يلتف النص ، وقد يتجاوز الحاوية الخاصة به
3. white-space: pre;
   يتم احترام فواصل الأسطر الصريحة ، وفواصل النص مع الأسطر الجديدة وعناصر br
4. white-space: pre-wrap;
   يتم احترام المساحة البيضاء ، ولكن سيتم التفاف النص أيضًا لملء مربعات الأسطر

أحتاج فقط إلى تأثيرات خاصية white-space على منافذ العرض الأكبر ، لذلك أعزلها باستعلام وسائط:

 @media (min-width: 64em) { h1 { white-space: pre; } }

يؤدي استخدام عدة أنماط من عائلة خطوط واحدة إلى إضافة اهتمام بصري. يشتمل تصميمي المستوحى من Lubalin على أوزان خفيفة وجريئة وسوداء ، بالإضافة إلى أنماط مكثفة ومنتظمة لمحرف sans-serif لإنتاج مجموعة متنوعة من المعالجات النصية.

أولاً ، أحتاج إلى عنصرين هيكليين لإنجاز تصميمي ، أساسي وجانبي:

 <main>…</main> <aside>…</aside>

بينما يتضمن العنصر الرئيسي العنوان الرئيسي والنص الجاري ، يحتوي الجانب الجانبي على أربع صور في قسم وخمس مقالات حول إصدارات Cortina الكلاسيكية:

 <aside> <div> <img src="img-1.svg" alt="Ford Cortina Mark 1 front profile"> <img src="img-2.svg" alt="Ford Cortina Mark 3 rear"> <img src="img-3.svg" alt="Ford Cortina Mark 4 front"> <img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile"> </div> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </aside>

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

 article:nth-of-type(1) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(2) p { font-family: 'bold-condensed'; font-weight: 600; text-transform: uppercase; } article:nth-of-type(3) p { font-family: 'bold-condensed'; font-weight: 600; } article:nth-of-type(4) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(5) p { font-family: 'bold-condensed'; font-weight: 600; }

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

 @media (min-width: 48em) { aside { display: grid; grid-template-areas: "abc" "def" "ghi"; grid-gap: 1.5rem; } }

أحتاج إلى وضع الصور الأربع في مناطق القالب الخاصة بي ، وليس التقسيم الذي يحتوي عليها. أقوم بتغيير خاصية عرض هذا العنصر إلى محتويات ، مما يؤدي إلى إزالته بشكل فعال من DOM لأغراض التصميم:

 aside div { display: contents; }

أضع تلك الصور باستخدام أسماء المناطق. نقلهم إلى منطقة أخرى يتضمن فقط الإشارة إلى اسم منطقة مختلف ولا تغيير في ترتيبهم في HTML الخاص بي:

 aside img:nth-of-type(1) { grid-area: a; } aside img:nth-of-type(2) { grid-area: e; } aside img:nth-of-type(3) { grid-area: g; } aside img:nth-of-type(4) { grid-area: i; }

بعد ذلك ، أضع المقالات في المناطق الخمس المتبقية لإكمال تخطيطي:

 aside article:nth-of-type(1) { grid-area: b; } aside article:nth-of-type(2) { grid-area: c; } aside article:nth-of-type(3) { grid-area: d; } aside article:nth-of-type(4) { grid-area: f; } aside article:nth-of-type(5) { grid-area: h; }

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

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(5, 1fr); } }

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

 main { grid-column: 1; } aside { grid-column: 3 / -1; } }

إعادة الترتيب والتدوير

تعد CSS Grid الآن أفضل أداة لاستخدامها في تنفيذ المخططات الملهمة ، كما أن خصائصها القوية مفيدة أيضًا في تطوير تصميمات طباعة معقدة.

يحتوي رأسي على عنوان متبوع بفقرتين ، ويعني ترتيبها في HTML أنها منطقية عند قراءتها دون تطبيق أي نمط:

 <header> <h1>Cortina</h1> <p>UK's best-selling car</p> <p>From <span>1962–1983</span></p> </header>

لبدء هذا التصميم ، أقوم بإضافة أنماط الأساس لكلا العنصرين ، مع تحديد محاذاةهما وألوانهما وأحجامهما:

 header h1, header p { margin: 0; text-align: center; } header h1 { font-size: 10vmax; color: #ebc76a; line-height: 1; } header p { font-size: 4vmax; line-height: 1.1; text-transform: uppercase; }

لقد طلبت HTML الخاص بي للحصول على بنية الجملة الدلالية ، بدلاً من أي عرض تقديمي مرئي ، لذلك للسماح لي بإعادة ترتيب العناصر بصريًا ، أقوم بإضافة خصائص Flexbox إلى رأسي وقيمة الاتجاه المرن للعمود:

 header { display: flex; flex-direction: column; }

بشكل افتراضي ، تظهر العناصر بالترتيب الذي تظهر به في HTML ، ولكن في تصميمي ، تظهر الفقرة الأخيرة في هذا الرأس أولاً ، فوق العنوان.

قيمة الترتيب الافتراضية لجميع العناصر هي 0 ، لذا لتغيير موضع هذه الفقرة دون تغيير HTML ، أضفت قيمة سالبة -1 ، والتي تضعها في الأعلى:

 header p:last-of-type { order: -1; }

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

 @media (min-width: 48em) { body { background-image: linear-gradient(to right, #0a0a08 0%, #0a0a08 50%, #fff 50%, #fff 100%); } header h1 { color: #fff; } header p { color: #ebc76a; } }

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

 @media (min-width: 64em) { header { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 0; } }

ينتشر عنواني في جميع الأعمدة الأربعة:

 header h1 { grid-column: 1 / -1; }

بينما الأول - الذي يظهر أسفل رأسي - اترك العمود الأول فارغًا:

 header p:first-of-type { grid-column: 2 / -1; }

الفقرة الأخيرة - الموضوعة الآن في أعلى الرأس - تمتد عبر الأعمدة الثلاثة الأولى ، مع ترك مسافة على اليسار:

 header p:last-of-type { grid-column: 1 / 4; }

من غير المعتاد رؤية عناصر النص المستدير على الويب ، ولكن عندما تفعل ذلك ، غالبًا ما لا تُنسى وتكون مفاجأة رائعة دائمًا. أريد أن يتم تدوير العنوان الخاص بي عكس اتجاه عقارب الساعة ، لذلك أقوم بإضافة تحويل يقوم بتدويره بشكل سلبي بمقدار 30 درجة ونقله رأسيًا لأسفل بمقدار 150 بكسل:

 header { transform: rotate(-30deg) translateY(150px); transform-origin: 0 100%; }

يحدد transform-origin النقطة التي تحدث حولها التحولات. يمكنك اختيار الأصل في المركز أو أي من الزوايا الأربع للعنصر - top-left (0 0) ، top-right (100% 0) ، bottom-right (100% 100%) أو bottom-left (0 100%) . يمكنك أيضًا تحديد أصل في وحدات البكسل أو em أو rem.

لعنصر إضافي من المفاجأة ، أضفت انتقالًا دقيقًا إلى هذا التحويل وتقليل مقدار الدوران عندما يمرر شخص ما مؤشره فوق العنوان الرئيسي الخاص بي:

 header { transition: transform .5s ease-in; } header:hover { transform: rotate(-25deg) translateY(150px); }

الجمع بين عناصر الرأس

في تصميمي التالي المستوحى من Lubalin ، قمت بدمج قائمة مرتبة من طرازات Cortina مع عنوان متعدد الألوان للإدلاء ببيان قوي مع هذا العنوان:

 <header> <div> <h1>…</h1> <ol>…</ol> </div> </header>

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

 <h1> <span>Best</span> <span>Selling</span> <span>Cortina</span> </h1>

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

 <ol> <li><strong>Mark I</strong> 1962–1966</li> <li><strong>Mark II</strong> 1966–1970</li> <li><strong>Mark III</strong> 1970–1976</li> <li><strong>Mark IV</strong> 1976–1979</li> <li><strong>Mark V</strong> 1979–1983</li> </ol>

بالنسبة لإطارات العرض الصغيرة ، أحتاج فقط إلى عدد قليل من أنماط الأساس. يؤدي حجم الخط الكبير والحد الأدنى من المسافة البادئة إلى إنشاء كتلة صلبة من النص. بعد ذلك ، أقوم بتغيير قيمة عرض عنصر الامتداد من مضمن إلى حظر واستخدام محددات الفئة الزائفة لتغيير ألوان المقدمة للخطين الأول والثالث:

 h1 { font-size: 18vmin; line-height: .9; color: #fff; } h1 span { display: block; } h1 span:nth-of-type(1) { color: #ba0e37; } h1 span:nth-of-type(3) { color: #31609e; }

أريد العناصر الموجودة في قائمتي المرتبة لتشكيل شبكة متناظرة من عمودين حيث يشغل كل عمود قدرًا متساويًا من المساحة المتوفرة:

 ol { list-style-type: none; display: grid; grid-template-columns: 1fr 1fr; }

بعد ذلك ، أقوم بتشديد المسافة البادئة للعناصر وأضف حدًا أزرق ثابتًا إلى أسفل الكل ما عدا العنصر الأخير في القائمة:

 li { display: inline-block; line-height: 1.2; } li:not(:last-of-type) { border-bottom: 1px solid #31609e; }

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

 li strong { display: block; font-size: 1.266rem; font-weight: 600; text-transform: uppercase; }

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

يظل الاتجاه المرن لرأسي صفًا ، لذلك أقوم بمحاذاة العناصر في الوسط على المحور المتقاطع (عموديًا ،) ثم ضبط مركز المحتوى على طول المحور الرئيسي (أفقيًا :)

 @media (min-width: 48em) { header { display: flex; align-items: center; justify-content: center; } }

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

 header > div { display: grid; grid-template-columns: repeat(3, min-content); grid-template-rows: auto auto; }

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

 h1 { display: contents; }

بعد ذلك ، أضع هذا النص متعدد الألوان في أعمدة وصفوف باستخدام أرقام الأسطر:

 h1 span:nth-of-type(1) { grid-column: 1; grid-row: 2; } h1 span:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } h1 span:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }

أريد أن يظهر النص في رأسي عموديًا ، لذلك أقوم بتدوير كل امتداد في اتجاه عقارب الساعة بمقدار 180 درجة ، ثم تغيير وضع الكتابة إلى وضع رأسي من اليسار إلى اليمين:

 h1 span { transform: rotate(180deg); writing-mode: vertical-lr; }

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

 ol { display: block; } li { text-align: right; }

SVG والنص

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

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

 <svg> <text>'70's best-selling Cortina British car</text> </svg>

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

على سبيل المثال ، يعيّن textLength عرض النص الذي تم تجسيده ، والذي سيتقلص ويمتد لملء الفراغ اعتمادًا على lengthAdjust القيمة التي تختارها.

• textLength
  سيتم تحجيم النص ليلائم. عيّن textLength بالنسبة المئوية أو استخدم أي قيم عددية. أفضل استخدام وحدات نصية ، em أو rem.
• lengthAdjust
  يحدد كيفية ضغط النص أو تمديده ليلائم العرض المحدد في سمة textLength.

عند استخدامها مباشرة على عنصر نص ، تعمل خصائص SVG مثل الأنماط المضمنة:

 <svg> <text textLength="400">'70's best-selling Cortina British car</text> </svg>

ولكن كما هو الحال مع الأنماط المضمنة ، يتم تحقيق أفضل قيمة من خلال تصميم عناصر SVG باستخدام CSS ، سواء في ورقة أنماط خارجية أو مضمنة في HTML. يمكنك حتى استخدام عنصر نمط في ملف SVG خارجي أو كتلة من SVG مضمنة إلى جانب HTML:

 <svg> <text class="display">'70's best-selling Cortina British car</text> </svg> <style> .display { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -1px; text-anchor: middle; text-transform: uppercase; } </style>

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

 <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text>

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

• x هي نقطة البداية الأفقية لخط الأساس للنص ؛
• y هي نقطة البداية الرأسية لخط الأساس للنص ؛
• dx ينقل النص أفقيًا من عنصر سابق ؛
• يغير dy النص رأسيًا من عنصر سابق.

بالنسبة إلى العنوان الخاص بي ، أضع عنصر tspan الأول 80 بكسل من الأعلى ، ثم يظهر كل عنصر لاحق أسفله بمقدار 80 بكسل:

 <text> <tspan y="80">'70's</tspan> <tspan dy="80">best-</tspan> <tspan dy="80">selling</tspan> <tspan dy="80">Cortina</tspan> <tspan dy="80">British</tspan> <tspan dy="80">car</tspan> </text>

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

 <tspan>C</tspan> <tspan>o</tspan> <tspan>r</tspan> <tspan>t</tspan> <tspan>i</tspan> <tspan>n</tspan> <tspan>a</tspan>

كما:

"C" ، "o" ، "r" ، "t" ، "i" ، "n" ، "a"

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

تمسيد النص باستخدام CSS و SVG

غالبًا ما تساعد إضافة حد في الوضوح عند وضع النص أمام صورة الخلفية ، ويمكن أن تؤدي أيضًا إلى نتائج دقيقة وملفتة للنظر. لن تجد طريقة رسمية لضغط النص في أي من مواصفات CSS. ولكن هناك خاصية تجريبية تستخدم بادئة بائع Webkit وتدعمها المتصفحات المعاصرة على نطاق واسع.

text-stroke الفرشاة هو اختصار لخاصيتين: text-stroke-color text-stroke-width . بالنسبة إلى العنوان الرئيسي المرسوم ، قمت أولاً بتعيين أنماط طباعة الأساس family size weight ، ثم اضبط البادئة والتتبع:

 h1 { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -6px; line-height: .8; color: #fff; }

ثم أقوم بتطبيق حد text-stroke وإضافة text-fill-color property بقيمة transparent تتجاوز لون المقدمة الأبيض:

 h1 { /* -webkit-text-stroke-color: #fff; */ /* -webkit-text-stroke-width: 5px; */ -webkit-text-stroke: 5px #fff; -webkit-text-fill-color: transparent; }

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

يتمتع SVG بخصائص stroke أيضًا ، بالإضافة إلى بعض الخيارات غير المتوفرة في CSS. إذا كنت بحاجة إلى مزيد من الخيارات ودعم أوسع للمتصفح ، فإن SVG هو الحل. يتضمن رأس SVG ستة عناصر tspan :

 <svg> <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text> </svg>

في الجزء العلوي من أنماط الطباعة الأساسية ، أقوم بإضافة خصائص SVG المكافئة text-stroke-color text-stroke-width . أقوم أيضًا بتقليل عتامة حدتي ، وهو خيار غير متوفر في CSS:

 text { stroke: #fff; stroke-width: 1.5px; stroke-opacity=".8"; }

يتضمن SVG خصائص أخرى تعمل على ضبط جوانب ضربة الفرشاة. على عكس CSS ، يمكن أن تتقطع حدود SVG باستخدام خاصية stroke-dasharray. تحدد القيم البديلة المساحات المعبأة والمساحات الفارغة ، لذا فإن الشرطات حول نص العنوان الخاص بي هي وحدة واحدة مملوءة ، ثم عشر وحدات فارغة:

 text { stroke-dasharray: 1, 10; }

إذا كنت بحاجة إلى أنماط أكثر تعقيدًا ، فقم بإضافة أرقام إضافية إلى النمط ، بحيث ينتج عن قيمة Str-dasharray 1 ، 10 ، 1 حد متقطع يكون 1 (ممتلئ ،) 10 (فارغ ،) 1 (ممتلئ ،) 1 ( فارغ ،) 10 (ممتلئ ،) 1 (فارغ ،) ويكرر.

تحسين إمكانية الوصول إلى SVG

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

يحتوي هذا الرأس على محرفين. أحدهما هو Magehand ، وهو نص زخرفي على الطراز القديم من تصميم المصمم الإندونيسي عارف Setyo Wahyudi. والآخر هو Mokoko ، وهو بلاطة سيريف من شركة Dalton Maag ومقرها لندن والمتوفرة بسبعة أوزان من الرقيق إلى الأسود.

سيؤدي دمج هذين الخطين في كل من تنسيق Web Open Font Format (WOFF) و WOFF2 إلى إضافة أكثر من 150 كيلو بايت إلى صفحتي. في حين أن تحويل هذه الخطوط إلى مخططات في محرر رسومات وتقديم الرأس كصورة SVG محسّنة سيضيف 17 كيلو بايت فقط.

تحتوي صورة SVG في رأسي على ثلاثة مسارات:

 <svg xmlns="https://www.w3.org/2000/svg"> <path>…</path> <path>…</path> <path>…</path> </svg>

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

 <path fill="#bd1f3a">…</path> <path fill="#31609e">…</path> <path fill="#fff">…</path>

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

 <defs> <linearGradient gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#bd1f3a" /> <stop offset="100%" stop-color="#31609e" /> </linearGradient> </defs> <path fill="#fff">…</path> <path fill="#fff">…</path> <path fill="url('#cortina')">…</path>

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

يزيد كل عنصر ومقبض وعقدة من حجم ملف SVG ، لذا استبدل المسارات بأشكال أساسية مثل الدوائر أو الأشكال البيضاوية أو المستطيلات حيثما أمكن ذلك. تبسيط المنحنيات لتقليل عدد العقد واستخدام مقابض أقل. تقوم برامج الرسوم الشائعة مثل Adobe Illustrator و Affinity Designer و Sketch بتصدير الملفات المنتفخة بواسطة عناصر غير محسنة وبيانات وصفية غير ضرورية. ولكن ، أدوات مثل SVGOMG للمطور Jake Archibald ستزيل العناصر غير الضرورية ويمكن في كثير من الأحيان تقليل حجم ملف SVG بشكل كبير.

يمكن أيضًا إتاحة الوصول إلى صور SVG التي تحتوي على مخططات نصية باستخدام النص البديل وخصائص ARIA. عند الارتباط بملف SVG خارجي ، أضف نصًا بديلاً كما ينبغي مع أي صورة غير تزيينية:

 <img src="header.svg" alt="Cortina. '70s best-selling British car">

أفضل طريقة لمساعدة الأشخاص الذين يستخدمون التكنولوجيا المساعدة هي تضمين SVG في HTML. أضف دور ARIA وستتعامل تسمية وصفي وقارئات الشاشة مع SVG كعنصر واحد وقراءة وصف التسمية بصوت عالٍ:

 <svg role="img" aria-label="Cortina. '70s best-selling British car"> … </svg>

تساعد إضافة عنصر العنوان التقنية المساعدة على فهم الاختلاف بين عدة كتل من SVG ، ولكن لن يتم عرض هذا العنوان في المستعرض:

 <svg> <title>Cortina. '70s best-selling british car</title> </svg>

عندما يكون هناك عدة كتل من SVG في مستند ، امنح كل واحدة معرفًا فريدًا وأضف ذلك إلى عنوانها:

 <svg> <title>…</title> </svg>

لدى ARIA العديد من السمات التي تساعد في الوصول إلى SVG. عندما يكون SVG مزخرفًا تمامًا وليس له قيمة دلالية ، قم بإخفائه من التكنولوجيا المساعدة عن طريق إضافة سمة aria-hidden :

 <svg aria-hidden="true"> … </svg>

بالنسبة لتصميمي ، أستخدم SVG بدلاً من عنوان HTML. لاستبدال الدلالات المفقودة للتقنية المساعدة ، استخدم سمة دور ARIA وقيمة العنوان. ثم أضف سمة المستوى التي تطابق HTML المفقود:

 <svg role="heading" aria-level="1"> … </svg>

نوع القطع

تحدد خاصية CSS background-clip ما إذا كانت خلفية عنصر ما تمتد أسفل border-box padding-box content-box ، وفقًا لنموذج مربع CSS:

• border-box
  تمتد الخلفية إلى الحافة الخارجية للحد (وتحت الحد).
• padding-box
  تمتد الخلفية إلى الحافة الخارجية من المساحة المتروكة فقط.
• content-box
  يتم تقديم الخلفية داخل (مقطوعة إلى) مربع المحتوى فقط.

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

In my next example, the brake disk background image is visible only where there's text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

 h1 { background-image: url(pattern.svg); background-clip: text; -webkit-background-clip: text; color: transparent; }

You can apply the text value for background-clip to any element except the :root , HTML. As support for background-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

 h1 { color: #fff; } @supports (background-clip: text) or (-webkit-background-clip: text) { h1 { background-color: #fff; background-image: url(pattern.svg); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50%; background-clip: text; -webkit-background-clip: text; color: transparent; } }

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

نظرًا لأن صورة SVG هذه تمثل عنوانًا ، فأنا أقوم بإضافة نص بديل بالإضافة إلى دور ومستوى ARIA لضمان استمرار إمكانية الوصول إليه:

 <img src="header.svg" alt="Cortina" role="heading" aria-level="1">

في SVG ، يخزن عنصر defs الكائنات الرسومية التي يمكن الرجوع إليها من مكان آخر في الملف. تتضمن هذه الأنماط التي تحتوي على صوري وأضيف واحدة لكل حرف:

 <svg> <defs> <pattern>…</pattern> <pattern>…</pattern> <pattern>…</pattern> … </defs> … </svg>

لا يتم عرض المحتوى الموجود في عنصر defs مباشرةً ، ولعرضه أشير إليهم إما باستخدام سمة استخدام أو عنوان url. يحتوي ملف SVG الخاص بي على مسار واحد لكل حرف من الأحرف السبعة في كلمة "Cortina" ، وأقوم بملء كل مسار بنمط باستخدام معرفه الفريد:

 <svg> <defs>…</defs> <path fill="url(#letter-c)">…</path> <path fill="url(#letter-o)">…</path> <path fill="url(#letter-r)">…</path> … </svg>

تسمح عناصر الصورة إما بعرض الصور النقطية أو الصور المتجهة ضمن SVG. يشتمل تصميمي على ثلاث صور لمخطط أجزاء السيارة التي أقوم بربطها باستخدام سمة href قياسية:

 <defs> <pattern width="100%" height="100%"> <image href="pattern-c.png" height="250" width="250"/> </pattern> … </defs>

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

الجمع بين التقنيات

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

لتطوير هذا التصميم ، أحتاج إلى عنصرين هيكليين يجب أن يكونا مألوفين جدًا الآن ، عنصر رئيسي وجانبي:

 <main>…</main> <aside>…</aside>

يحتوي العنصر الرئيسي الخاص بي على عنصر رأس مع عنوان SVG متبوعًا بقسم يتضمن نصي الجاري. أقوم بإضافة دور ومستوى ARIA إلى العنوان الرئيسي الخاص بي لضمان إمكانية الوصول إلى نص SVG:

 <main> <header> <svg role="heading" aria-level="1">…</svg> </header> <div>…</div> </main>

لعرض صورة كاملة على شاشات صغيرة ونصف لإطارات عرض أكبر ، أستخدم عنصر صورة واستعلام وسائط بحد أدنى للعرض:

 <aside> <picture> <source media="(min-width: 74em)"> <img src="full.svg" alt="Ford Cortina"> </picture> </aside>

غالبًا ما تكون تصميمات Lubalin نشطة ، لذلك لملء عنصري الرئيسي بالطاقة ، أقوم بتطبيق خصائص الشبكة واستخدام ثلاثة أعمدة وخمسة صفوف لتطوير تخطيط غير متماثل.

 main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(5, 1fr); }

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

 main { background-image: url(main.svg); background-origin: content-box; background-position: top right; background-repeat: no-repeat; background-size: 100% 100%; }

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

 header { grid-column: 1 / 3; grid-row: 2 / 3; } main div { grid-column: 2 / 4; grid-row: 3 / 6; }

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

 <svg> <text x="0" y="60">Ford</text> <text x="0" dy="70">Cortina</text> <text x="250" y="60">1962–1983</text> </svg>

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

 @media (min-width: 74em) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; } }

بعد ذلك ، أضع العناصر الرئيسية والجانبية على شبكتي باستخدام أسماء الخطوط:

 main { grid-column: main; } aside { grid-column: aside; } }

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

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

قم بتطبيق عامل تصفية واحد أو عدة عوامل تصفية باستخدام نفس بنية عامل تصفية CSS التي أظهرتها في إصدار سابق:

 main { backdrop-filter: brightness(25%); } main { backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter هو جزء من مواصفات المستوى 2 لوحدة تأثيرات المرشح. لديها بالفعل دعم قوي في المتصفحات المعاصرة ، على الرغم من أن البعض لا يزال يتطلب بادئة بائع Webkit:

 main div { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

قراءة المزيد من السلسلة

• قرارات التصميم الملهمة: مجلة Avaunt
• قرارات التصميم المستوحاة: الأمور الملحة
• قرارات التصميم الملهمة: مجلة إرنست
• قرارات التصميم الملهمة: أليكسي برودوفيتش
• قرارات التصميم الملهمة: بيا فيتلر
• قرارات التصميم الملهمة: نيفيل برودي
• قرارات التصميم الملهمة: Otto Storch
• قرارات التصميم الملهمة: ماكس هوبر
• قرارات التصميم الملهمة: جيوفاني بينتوري
• قرارات التصميم الملهمة: Emmett McBain
• قرارات التصميم الملهمة: برادبري طومسون

ملاحظة: أعضاء تحطيم الأعضاء لديهم حق الوصول إلى ملف PDF مصمم بشكل جميل لمجلة Andy Inspired Design Decisions وأمثلة كاملة من التعليمات البرمجية من هذه المقالة. يمكنك شراء ملفات PDF الخاصة بهذه المشكلة والأمثلة بالإضافة إلى كل مشكلة أخرى مباشرةً من موقع Andy على الويب.