קסטומיזציה של underlines בעזרת text-decoration

המודול CSS Text Decoration Module Level 3 מספק לנו מספר דרכים חדשות לקִשּׁוּט ועִטּוּר טקסט בעמודים אינטרנטים, ותמיכת הדפדפנים לשמחתנו במודול זה היא די רחבה.

תכונות ה CSS החדשות דוגמת text-decoration-thickness ו text-decoration-color יכולות לעזור בקִשּׁוּט ועִטּוּר טקסט וקווים תחתונים בדרכים שלא היו אפשרויות בעבר.

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

כמפתחים, עד לא מזמן היינו משתמשים בתכונה border-bottom בכדי להציג קו תחתון בצבע שונה מצבע הטקסט, אך לא עוד…

התכונה text-decoration

במקור, התכונה text-decoration הייתה רלוונטית רק לבחירה בין הערכים none, underline, overline ו line-through.

אך עם ההמלצות החדשות באפשרותינו לרשום תכונה זו באופן מקוצר (shorthand) ולשלב בין הערכים text-decoration-color, text-decoration-style ו text-decoration-line. לדוגמה, הנה קו תחתון כפול בצבע ורוד לוהט:

קו תחתון מדליק

הנה שורת ה CSS בה השתמשנו:

text-decoration: #ff00d3 double underline;

נראה כי אותו shorthand לא עובד כראוי בדפדפן Safari, אז פשוט השתמשנו בצורת הכתיבה הלא מקוצרת של התכונות.

הערך הראשון בשורה מעלה הוא text-decoration-color, השני הוא text-decoration-style והשלישי הוא text-decoration-line. ישנן תכונות נוספות אגב, סט התכונות המלא הקשור לדקורציית טקסט שהוצגו עבורנו (או יוצגו בעתיד) הינם:

5 דוגמאות לתכונות ה decoration וה underline

בואו נראה דוגמאות לתכונות המדוברות ומה ניתן לעשות איתן. זאת כמובן רק בהנחה ואתם משתמשים בדפדפן התומך בתכונות אלו (מרבית הדפדפנים המודרנים):

א. text-decoration-thickness

בדוגמה הראשונה נשנה את התכונה text-decoration-thickness השולטת על עובי הקו התחתון:

קו תחתון מדליק

ב. text-decoration-color

בדוגמה זו נשנה את צבע הקו התחתון באמצעות התכונה text-decoration-color:

קו תחתון מדליק

ג. text-underline-offset

בדוגמה מספר שלוש נשנה את מיקום הקו התחתון באמצעות התכונה text-underline-offset. ניתן לקבוע את ההיסט (offset) שלו מהמיקום המקורי ולשנות אותו לכל מקום שנרצה:

קו תחתון מדליק

ד. text-decoration-skip-ink

כנראה וחדי העין ביניכם שמו לב שאותו קו תחתון פוסח על הצ׳ופצ׳יק של האותיות ׳ק׳, ׳ן׳ ו-׳ל׳ בדוגמאות המצורפות. אותו קו תחתון בעצם יפסח על אותו צ׳ופצ׳יק כברירת מחדל, אך בעזרת התכונה text-decoration-skip-ink אנו יכולים לשנות התנהגות דיפולטיבית זו. שימוש בערך none למשל יבטל את הפסיחה על הצ׳ופצ׳יק:

קו תחתון מדליק

לידע כללי, אותו צ׳ופצ׳יק מדובר נקרא בלעז Decender…

ה. שילוב ארבעת התכונות האלו יחד + Hover

אז כפי שאתם מניחים, וכפי שאפשר לראות בדוגמה הבאה, אפשר לשלב את ארבעת התכונות שהזכרנו ולהגיע לתוצאות מעניינות. הנה למשל דוגמה שמשלבת תכונות אלו (יחד עם Hover):

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

אגב, הנה סרטון מעולה של Jenn Simmons המסביר לפרטים על התכונות שהזכרנו בפוסט זה:

עד כאן.

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

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

1תגובות...
  • ברק 19 בינואר 2022, 15:05

    נראה מגניב ממש! איישם באתר שלי

השאירו תגובה

 

Up!
לבלוג