מדריך CSS3 - הוספת צל לתיבות ולטקסט

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

הצללה של תיבות

תכונת הbox-shadow היא אחת התכונות המעולות שהתווספו ל-CSS3, והיא נתמכת בכל הדפדפנים המובילים.

כיוון וצבע הצל

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

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

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

בשתי הדוגמאות המוצגות בהמשך, כשערכי ההסטה חיוביים (בדוגמה, 10px 10px) הצל פונה למטה וימינה, וכשערכים אלו שליליים (בדוגמה, -10px -10px) הצל פונה למעלה ושמאלה.

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

טשטוש

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

שקיפות

דרך נוספת שעשויה לגרום לצל להראות טבעי יותר היא באמצעות הוספת שקיפות לצבע הצל. כדי להוסיף שקיפות משתמשים ב-rgba, שדומה ל-rgb ומוסיפה לו ערך רביעי של שקיפות (a משמעותו ערוץ אלפא ששולט בשקיפות). לדוגמה:

ערך השקיפות יכול לקבל ערכים שבין 0 (הכי שקוף) ועד 1 (הכי אטום). בדוגמה הבאה נתתי לצל מידה שונה של שקיפות, ואפשר לראות את ההבדלים בגוון הצל:

יצירת צל פנימי

כדי לגרום לצל לפנות פנימה, נשתמש בערך inset. קוד זה ייראה כך:

box-shadow: inset 10px 10px 14px rgb(140,140,140);

והוא יגרום לתוצאה הבאה, שמדמה כפתור שנלחץ פנימה:

נסכם את תכונות הצל של תיבה

כדי לייצר צל שפונה פנימה נוסיף את הערך inset.

תאימות box-shaddow לדפדפנים

תכונת box-shadow פועלת בכל הגרסאות האחרונות של הדפדפנים, אפילו ב-IE9. אבל כדי למנוע בעיה עם גרסאות מיושנות של Chrome, Safari ו-firefox נוסיף את הקידומות –moz ו-webkit . הקוד ייראה כך:

box-shadow: inset 10px 10px 14px rgb(140,140,140);
-moz-box-shadow: inset 10px 10px 14px rgb(140,140,140);
-webkit-box-shadow: inset 10px 10px 14px rgb(140,140,140);

הצללה של טקסט

כפי שניתן להוסיף צל לתיבות באמצעות התכונה box-shadow, ניתן להוסיף צל לטקסט באמצעות התכונה text-shadow. נראה דוגמה לקוד:

text-shadow: 5px 5px 5px rgb(170,170,170);

וכך ייראה הטקסט, כשהצל זו התוספת האפורה מאחורי האותיות.

ואם נרצה להוסיף אפקט של טשטוש ושל שקיפות, נוכל להוסיף אותם כמו שהוספנו ל box-shadow. נראה דוגמה לקוד:

text-shadow: 5px 5px 3px rgba(170,170,170,0.7);

וזו התוצאה של הקוד:

תאימות text-shadow לדפדפנים השונים

כל הגרסאות האחרונות של הדפדפנים, לבד מ-IE9, תומכות בתכונה זו. אבל כדי למנוע בעיה עם גרסאות קודמות של Chrome, Safari ו-firefox נוסיף את הקידומות –moz ו-webkit . הקוד ייראה כך:

text-shadow: 5px 5px rgb(170,170,170);
-moz-text-shadow: 5px 5px rgb(170,170,170);
-webkit-text-shadow: 5px 5px rgb(170,170,170);

במדריך הבא בסדרה תוכלו ללמוד על צבע רקע מדורג באמצעות גרדיאנטים של CSS3.

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים