צביעת טקסט בצבע מורכב (gradient)

הקדמה:

האפשרות של background-clip קיימת ועובדת ברב הדפדפנים של היום.

background-clip נועד בשביל לקבוע מאיפה אנחנו רוצים שתמונת ה-background תופיע.

האם שתופיע מה-borders או מה-padding או מה-contentbox model שמוכר לכם).

ככה כותבים את זה:

ככה זה יופיע על המסך  בהתאמה:

Check out this Pen!

האפשריות האלה נתמכות בכל הדפדפנים ובאקספלורר מגרסה 8.

אפשרות חדשה שנוספה לאחרונה

אפשרות חדשה שנוספה ל background-clip היא אפשרות שהרקע יופיע על טקסט באלמנט שלו ובעצם ישמיש לסוג של masking.

כדי שזה יעבוד יש לצבוע את הטקסט בצבע שקוף ע”י שימוש ב rgba, וכמובן לתת את צבע הגראדינט הרצוי שאותו נרצה לצבוע את הטקסט, אותו אנחנו נותנים ל”רקע”, אך בגלל ההגדרה של background-clip:text הוא יצבע לנו את הטקסט.

דוגמא של הקוד

 התוצאה על המסך

Check out this Pen!

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

Divya Manian, מצא fallback סביר שלפחות יציג את הטקסט במידה והbackground-clip:text לא עובד.

לפוסט של Divya Manian

אם יש שאלות אתם מוזמנים להגיב כאן או בקבוצה.

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">