שטיגליץ עיצובים

גבולות בcss3


מאי 11, 2015 4:56 pm

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

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

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

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

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

simpleradius

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

 

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

גבול-תמונה

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

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

imageborder

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

כתיבת תגובה

ספק שם מלא

@

אנא ספק כתובת דוא"ל תקפה

אנא ספק כתובת אינטרנט תקפה. כגון: http://www.yoursite.com

Show Buttons
Hide Buttons