צל עם css3



שתפו את הפוסט

זה מדריך ראשון בסדרה שלימה בנושא css3. אמנם לא כל הדפדפנים עדיין תומכים בו (נחשו מי? IE) אבל התמיכה מגיעה לעוד ועוד דפדפנית. אגב שמעתי שגירסה 9 של אקספלורר כבר תתמוך. לכן בבחינת היה מוכן, נתחיל בלימודים קצרים של הנושא.
עד לא מזמן (ועדיין אנחנו יכולים לראות שימוש בצל לאלמנטים שונים על הדף. זה יכול להות לדיב לתמונה או לטקסט. עד בואו של css3 הדבר התאפשר רק עם תוכנה גרפית כגון פוטושופ. אז חסל סדר פוטושופ,היום ניתן ליצור צל עם css בלבד.
המדריך יחולק לשניים: צל לאלמנט כמו דיב וצל לטקסט.
צל לדיב
ליצירת צל לדיב אנחנו צריכים להעביר כמה פרמטרים: סטיה (תרגום שלי לoffset:) אופקית,סטיה אנכית ,כמות הבלר (הטישטוש) וצבע.
ניצור דיב וניתן לו את הסטייל הבא:

#box{

	width:200px;

	height:200px;

	background-color:#09C;

	-moz-box-shadow: 10px 10px 20px #666;


	-webkit-box-shadow: 10px 10px 5px #666;

	padding:5px 5px 5px 15px;

}

והתוצאה תיראה כך:

boxshadowend_1

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

h1{

	color:#F00;

	text-shadow: 3px 3px 10px #666;

	

}

כן ,פשוט וקצר. והתוצאה:

textshadow1

זהו. כמובן שיש עוד מה להרחיב בנושא ,אבל לשימוש ראשוני זה כל מה שצריך.



שתפו את הפוסט

אולי יעניין אתכם לקרוא גם:


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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