אינדקס מאמרי CSS

צורות מיוחדות ב-CSS3

 

צורות מיוחדות ב-CSS3

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

כמובן שמכאן והלאה  הדימיון מאפשר לנו ליצור דברים באמת מרהיבים כמו סמיילי ש-100% ממנו הוא HTML ו-CSS3 והיתרונות של זה פותחים לנו דלתות רבות. מדובר בחסכון אדיר בבקשות שנשלחות לשרת שלנו. ולכן גם חסכון אדיר במשאבים


למשל תמונה של הסמיילי הזהה בסיומת PNG שוקל 8.21KB בזמן שהקובץ HTML כולו כולל הקוד של הסמיילי וכולל כל שאר הדוגמאות שוקל 3.84KB בלבד!



איך יוצרים עגול ב-CSS3

קודם כל קוד ה-HTML שלנו שבו נעזר ב-DIV ונקדיש לו קלאס בשם "circle":

<div id="circel"></div>
והקוד CSS3 שלנו יהיה זה:


	#circel {
		position:relative;
		left:15px;
		top:15px;
		height:25px;
		width:25px;
		background-color:#3D4DFF;
		border-radius:140px 140px 140px 140px;
	}

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

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


יצירת משולש ב-CSS3

יצירת המשולש מבחינת ה-HTML זהה לחלק הקודם, פשוט יוצרים DIV עם קלאס בשם מתאים במקרה הזה triangle.

וכך יראה קוד ה-CSS3 שלנו:

	#triangle {
		position:absolute;
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 90px solid #3D4DFF;
	}

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

הסוד טמון גם בכך שהגדרנו 0 גובה ו-0 רוחב והנה ההסבר היותר פשוט עם תמונות.

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

עכשיו זה מה שקורה כאשר אנחנו קובעים ריבוע ללא מסגרת עליונה:


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

אבל כשאתם נותנים לאלמנט שלנו רוחב שהוא אפסי זאת אומרת width:0px אז זה מה שיוצא:


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


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


		border-left: 50px solid transparent;
		border-right: 50px solid transparent;

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

כך זה נראה בסופו של דבר:


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


מגן דוד

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

הטכניקה הפשוטה להפוך את המשולש היא במקום להגדיר לו border-bottom נגדיר לו border-top כך הוא יהיה מלמעלה למטה במקום להפך.

ככה נראה קוד ה-HTML:

				<div id="david_star">
					<div id="triangle-up"></div>
					<div id="triangle-down"></div>
				</div>
ה-david_start חסר ערכים, זה סתם נועד לאחסן את שני המשולשים השניים.

ככה נראה ה-CSS3 שלנו:

	#triangle-up {
		position:absolute;
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 90px solid #3D4DFF;
	}

	#triangle-down {
		position:absolute;
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-top: 90px solid #3D4DFF;
		margin-top:27px;
	}	

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

חשוב לי להזכיר שבדפדפנים כמו אקספלורר 8 התמיכה ביכולות החדשות של CSS3 מאוד נמוכות, לכן כדאי שתשדרגו את הדפדפן אם ברשותכם דפדפן ישן.



יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!