אפקטים של צל

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

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

צל לכיתוב

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

הקוד הנדרש בעבור הצל לכיתוב:

p { text-shadow: 2px 2px 2px black; }

אם כבר מדברים על טריקים, אפשר לעשות גם כמה שכבות של צל:

p { text-shadow: 1px 1px 1px black, 2px 2px 2px red, 4px 4px 4px yellow; }

ולסיכום, דפדפנים:

צל כללי

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

div {
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
}

צל כללי ודפדפנים:

אז מה אתם אומרים ? עזר לכם ?