الصفحة الرئيسية » الترميز » فقرة Dropcap مع عناصر الخط الأول والحرف الأول في CSS

    فقرة 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 هذه على موقع الويب الخاص بك.