فقرة Dropcap مع عناصر الخط الأول والحرف الأول في CSS

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

كيف تستعمل?

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

 p: الحرف الأول font-size: 50px؛  

ينتج عن هذا الرمز العرض التقديمي التالي.

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

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

 p: السطر الأول font-weight: bold؛  

مثل الرمز السابق ل :الرسالة الأولى, سيؤثر هذا أيضًا على جميع الأسطر الأولى في عناصر الفقرة الموجودة في الصفحة.

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

 p: first-child: first-letter font-size: 50px؛  p: أول طفل: السطر الأول font-weight: bold؛  

هناك نذهب ، الفقرة المتأثرة الآن فقط الأولى.

العناصر الزائفة في العمل

حسنًا ، دعونا الآن نحاول تصميم مظهر أفضل للفقرة من خلال استخدام العناصر الزائفة. ولكن قبل أن نبدأ ، نحن بحاجة إلى خط خاص لغطاء الإسقاط الخاص بنا ، وهنا خياري: Hominis by Paul Lloyd. ثم نحدد عائلة خطوط جديدة في ورقة الأنماط ، على النحو التالي.

 @ font-face font-family: 'HominisNormal'؛ src: url ('fonts / HOMINIS-webfont.eot') ؛ src: تنسيق url ('fonts / HOMINIS-webfont.eot؟ #iefix') ('embent-opentype') ، تنسيق url ('fonts / HOMINIS-webfont.woff') (url ('fonts / HOMINIS-webfont.ttf ') format (' truetype ') ، url (' fonts / HOMINIS-webfont.svg # HominisNormal ') format (' svg ')؛ وزن الخط: عادي ؛ نمط الخط: عادي.  

بعد ذلك ، قمنا بتعيين عائلة الخطوط الافتراضية للفقرات.

 p color: # 555؛ font-family: 'Georgia'، Times، serif؛ ارتفاع الخط: 24px ؛  

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

 p: أول طفل padding: 30px؛ الحدود اليسرى: 5px solid # 7f7664؛ لون الخلفية: # f5f4f2 ؛ ارتفاع الخط: 32 بكسل ؛ box-shadow: 5px 5px 0px 0px rgba (127، 118، 100، 0.2)؛ الموقف: نسبي  

ثم ، نضيف غطاء انخفاض باستخدام :الرسالة الأولى, تكبير حجم الخط وكذلك تعيين عائلة الخط جديدة إليه ؛

 p: first-child: first-letter font-size: 72px؛ تعويم: اليسار؛ الحشو: 10px. الارتفاع: 64 بكسل ؛ font-family: 'HominisNormal'؛ لون الخلفية: # 7F7664 ؛ الهامش الأيمن: 10 بكسل ؛ اللون الابيض؛ دائرة نصف قطرها الحدود: 5px ؛ ارتفاع الخط: 70 بكسل ؛  

سنؤكد أيضا السطر الأول مع :السطر الأول, مثل ذلك.

 p: first-child: السطر الأول font-weight: bold؛ حجم الخط: 24 بكسل ؛ اللون: # 7f7664 ؛  

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

 p: first-child: after background: url ("... /images/paper-clip.png") no-تكرار scroll 0 0 transparent؛ يحتوى: " "؛ عرض: كتلة مضمنة. الارتفاع: 100 بكسل ؛ الموقف: مطلق ؛ اليمين: -5 بكسل ؛ أعلى: -35 بكسل ؛ العرض: 100 بكسل ؛  

هذا هو الكود الذي نحتاجه ، والآن يجب أن تبدو فقرتنا أفضل ؛

يمكنك أيضًا مشاهدة العرض التوضيحي المباشر من الروابط أدناه:

• عرض تجريبي
• تحميل المصدر

الفكر النهائي

كما ذكرنا في وقت سابق في هذا المنصب ، وهذه العناصر الزائفة ، وتحديدا في :الرسالة الأولى و :السطر الأول تم تضمينه منذ CSS1 ، وبالتالي فهو مدعوم أيضًا في Internet Explorer 8 مسبقًا.

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