גבולות בcss3



שתפו את הפוסט

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

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

פינות מעוגלות

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

#box {

	width:400px;


	height:400px;

	background-color:#FFF;

    -moz-border-radius: 80px;

	-webkit-border-radius: 80px;

}

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

simpleradius

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

#box {

	width:400px;

	height:400px;

	background-color:#FFF;

    -moz-border-radius-topleft: 80px;

	-moz-border-radius-bottomright: 80px;


	-webkit-border-top-left-radius: 80px;

	-webkit-border-bottom-right-radius: 80px;

}

 

שימו לב שהפעם הקוד מעט שונה בין דפדפני מוז ודפדפני וובקיט (כלומר פייפוקס למשל וכרום).

גבול-תמונה

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

border-width:25px; 

  -moz-border-image:url(border-image.png) 30 30 repeat; 


  -webkit-border-image:url(border-image.png) 30 30 repeat; 

   width:580px; padding:15px 25px; height:inherit;

       height:100px;

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

imageborder

שימו לב שכתבתי בקוד repeat יש לציין שניתן להשתמש גם בround וגם בstrech . בנוסף שליטה גבוהה יותר ניתן להשיג עם ארבעה מספרים ולא שניים (כפי שאני עשיתי). שחקו עם הפרמטרים השונים ותראו שאתם מקבליפ אפקטים שונים.
ככל שאני לומד יותר על css3 אני מתלהב יותר. נדמה לי שהשימוש בתוכנות הגרפיות יהא מוגבל יותר למה שבאמת צריך אותן: לתמונות שנרצה להציג באתר, ולא ליצירת אפקטים. css3 יאפשר לנו גם לייצר אנימציות, מה שאומר פחות שימוש בפלאש או בג'אווהסקיפט (במקרה שלי בjquery).



שתפו את הפוסט

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


כתיבת תגובה

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

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