עיצוב האות הראשונה ב CSS בעזרת first-letter::

::first-letter הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו span למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות הראשונה עם תגית כלשהי.

הצורה המסורתית והישנה לעיצוב האות הראשונה נראית כך:

HTML

<p>
    <span class="first-letter-style">ה</span>אות הראשונה היא גדולה וסגולה.
</p>

CSS

.first-letter-style{
    font-size: 30px;
    color: #c54088;
}

והתוצאה תראה בסגנון הבא:

האות הראשונה היא גדולה וסגולה.


אך דרך פשוטה יותר לעשות זאת היא באמצעות אותו psuedo element בשם ::first-letter כבדוגמה הבאה:

HTML

<p class="first-letter-pseudo">
     האות הראשונה היא גדולה וסגולה.
</p>

CSS

.first-letter-pseudo::first-letter {
    font-size: 30px;
    color: #c54088;
}

והתוצאה תהיה זהה לדוגמה הראשונה:

האות הראשונה היא גדולה וסגולה.

תמיכת דפדפנים

עד כאן. אם אתם בענייני CSS תנו מבט בסלקטורים חדשים שיגיעו אלינו ב ״CSS4״ – ויש סיבה מגוע אני רושם זאת במרכאות… 🙂

רועי יוסף
רועי יוסף

מפתח תבניות יעודייות על בסיס עיצוב. אוהב טיפוגרפיה, צבעים ומה שבינהם ומכוון לספק אתרים רספונסיבים עם ביצועים גבוהים, בעלי קוד ולידי, סמנטי ונקי.

0תגובות...

השאירו תגובה

 

Up!
לבלוג
הפוסט עודכן לאחרונה