נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

מחבר:
בתאריך:

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

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

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

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

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

 

CSS3 box-shadow צל לתיבה

 

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

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

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

 

CSS3 כוון לצל התיבה box-shadow

 

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

טשטוש

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

 

CSS3 אפקט טשטוש box-shadow

 

שקיפות

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

 

CSS3 הוספת שקיפות באמצעות rgba box-shadow

 

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

 

CSS3 רמות שונות של שקיפות rgba box-shadow

 

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

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

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

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

 

CSS3 צל שפונה פנימה inset box-shadow

 

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

 

CSS3 סיכום box-shadow

כדי לייצר צל שפונה פנימה נוסיף את הערך 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);

 

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

 

CSS3 הוספת צל לטקסט text-shadow

 

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

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

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

 

CSS3 צל לטקסט עם טשטוש ושקיפות text-shadow

 

תאימות 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.

 

 

הוסף תגובה חדשה

 

= 6 + 9

תמונת המגיב

מור בתאריך: 18.08.2013

מדריך מצוין. תודה רבה.