הגדרת צלליות לטקסט ב - CSS3

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

דוגמה לשימוש בתכונה Text-Shadow

p{text-shadow: 2px 2px 7px #111;}

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

כפי שניתן ללמוד מן הדוגמה למעלה התכונה מקבלת ארבעה ערכים:

  1. הערך הראשון מייצג את אורך הצל בציר ה – X, כלומר בציר האופקי הנע מימין לשמאל.
  2. הערך השני מייצג את גובה הצל בציר ה – Y, כלומר בציר האנכי – מלמעלה למטה.
  3. הערך השלישי מייצג את עומק המריחה (blur raduis) או אם תרצו מידת הטשטוש של הצל.
  4. הערך הרביעי פשוט יותר והוא מייצג את צבע הצל.

אם נרצה להשתמש בתכונה זו נרצה להגדיר כמובן גם את צבע הטקסט (צבע הטקסט ולא צבע הצל) וגודלו כפי שניתן לראות בדוגמה הבאה: 

.text-shadow {
  text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;
 }

שימוש בתכונה Text-Shadow כדי להגדיר יותר מצללית אחת לטקסט

ניתן להגדיר באמצעות התכונה text-shadow מספר צלליות:

.multiple-shadows {
text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
font-size: 3.2em;
color: #fff;
text-align: center;
padding: 10px 0px 5px 0px;
background: #151515;
}

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

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


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש