قبعات CSS المبدئية

تعلم كيفية إنشاء القبعات الأولية الفاخرة باستخدام CSS والصور

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

أنماط أساسية من القبعات الأولية

هناك ثلاثة أنماط أساسية من الأحرف الاستهلالية الأولية في المستندات:

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

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

إنشاء غطاء أولي بسيط

كل ما عليك القيام به لإنشاء غطاء أولي بسيط هو جعل الحرف الأول من فقرتك أكبر حجمًا مع عنصر الزائفة من الحرف الأول:

ص: الرسالة الأولى {font-size: 3em؛ }

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

ص: الرسالة الأولى {font-size: 3em؛ } p: السطر الأول {line-height: 1em؛ }

العب مع ارتفاع الخط داخل المستند حتى تجد الحجم المناسب لنصك.

اللعب مع كاب الأولي الخاص بك

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

ص: الرسالة الأولى {font-size: 300٪؛ لون الخلفية: # 000؛ اللون: #fff؛ } p: السطر الأول {line-height: 100٪؛ }

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

ص: الرسالة الأولى {font-size: 300٪؛ لون الخلفية: # 000؛ اللون: #fff؛ } p: السطر الأول {line-height: 100٪؛ } p {text-indent: 45٪ ؛ }

قبعات الأولية المجاورة صعبة مع CSS

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

p {text-indent: -2.5em؛ left-left: 3em؛ } p: الرسالة الأولى {font-size: 3em؛ } p: السطر الأول {line-height: 100٪؛ }

الحصول على قبعات خيالية حقا

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

ص: الرسالة الأولى {font-size: 3em؛ font-family: "Edwardian Script ITC"، "Brush Script MT"، cursive؛ } p: السطر الأول {line-height: 100٪؛ }

وكما هو معتاد ، يمكنك وضع كل هذه الاقتراحات معًا لإنشاء حد أولي يناسب أسلوب الإعلانات إلى فقرتك.

باستخدام رسم أولي رسومية

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

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

أولا ، تحتاج إلى إنشاء الرسم للحرف الأول. لقد استخدمت Photoshop لإنشاء الحرف L مع الخط "Edwardian Script ITC". أنا جعلت هذا ضخم - 300pt في الحجم. ثم قمت بإزاحة الصورة إلى الحد الأدنى حول الحرف ولاحظت عرض الصورة وارتفاعها.

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

تحتاج إلى استخدام عرض الصورة وارتفاعها لضبط المسافة البادئة للفقرة وحشو الحشو الخاص بالفقرة. بالنسبة إلى صورة L الخاصة بي ، احتجت إلى مسافة بادئة 95px وحشوًا يبلغ 72 بكسل.

p.capL {line-height: 1em؛ background-image: url (capL.gif)؛ تكرار الخلفية: لا تكرار ؛ مسافة بادئة النص: 95 بكسل ؛ الحشو أعلى: 72px. }

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

span.initial {display: none؛ }

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