Search

עיצוב האות הראשונה ב 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!
לבלוג