תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך 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.

 

 

 

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

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

 

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?

 

תמונת המגיב

מור בתאריך: 18.08.2013

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

תמונת המגיב

שיר בתאריך: 07.12.2022

תודה

תמונת המגיב

ליאל בתאריך: 08.05.2023

תודה רבהה