המודול 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. ישנן תכונות נוספות אגב, סט התכונות המלא הקשור לדקורציית טקסט שהוצגו עבורנו (או יוצגו בעתיד) הינם:
- text-decoration-thickness
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-skip
- text-decoration-skip-ink
- text-decoration
- text-underline-offset
- text-underline-position
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 המסביר לפרטים על התכונות שהזכרנו בפוסט זה:
עד כאן.
נראה מגניב ממש! איישם באתר שלי