CSS כפי שלא הכרתם

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

הפוסט נכתב על ידי אלכס וולקוב, מוביל UX ו-UI בקבוצת קונדואיט.

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

כיום, הרשת מוצפת בעוד ועוד דוגמאות לשימושים שונים, אם לא לומר מוזרים משהו, למודולים חדשים ב-CSS כאשר המשמעותיים ביניהם הם:

  1. box-shadow

  2. linear-gradient, radial-gradient

  3. border-radius

  4. pseudo-elements, pseudo-selectors

  5. 3d transforms rotate: scale, skew, translate

  6. ובנוסף, הנפשת את כל אלו עם CSS transitions, CSS animations

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

כיצד לייצר אייפון בעזרת וbox-shadow ואלמנט HTML אחד

התמונה הזו וודאי נראית לכם מוכרת מהאתר של אפל, אבל בפועל, זהו אלמנט HTML אחד בלבד אשר משמש ליצירת האייפון בתמונה, וזאת, ללא שימוש בכל תמונה, ותוך שימוש רחב ב-box-shadow. להלן דוגמא מקוד המקור:

box-shadow:
/* Front Cam: looking good */
-39px -410px 0 -23px #000f31,
-39px -410px 0 -22px #0a1c5a,
-40px -410px 0 -21px #0d1216,
-40px -410px 0 -19px #1b191a,

/* Speaker, it’s a mess. Really. */
/* now the outer covering of speaker, another mess */
-12px -410px 0 -22px #333,
-8px -410px 0 -22px #333,
-4px -410px 0 -22px #333,
-0px -410px 0 -22px #333,
4px -410px 0 -22px #333,
8px -410px 0 -22px #333,
12px -410px 0 -22px #333,
16px -410px 0 -22px #333,
20px -410px 0 -22px #333,
24px -410px 0 -22px #333,

-12px -410px 0 -18px #0a0a0a,
-9px -410px 0 -18px #0a0a0a,
-6px -410px 0 -18px #0a0a0a,
-3px -410px 0 -18px #0a0a0a,
0px -410px 0 -18px #0a0a0a,
3px -410px 0 -18px #0a0a0a,
6px -410px 0 -18px #0a0a0a,
9px -410px 0 -18px #0a0a0a,
12px -410px 0 -18px #0a0a0a,
15px -410px 0 -18px #0a0a0a,
18px -410px 0 -18px #0a0a0a,
21px -410px 0 -18px #0a0a0a,
24px -410px 0 -18px #0a0a0a;
}

הקוד המלא ותהליך הפיתוח זמין ב-Creating Single Element iPhone using CSSDeck.

הלוגו של כרום – בעזרת CSS gradients

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

את קוד המקור של הלוגו של כרום ניתן לראות ב-Single Element Google Chrome Logo.

transitions/ animations

ג’וליאן גרניאר בנה את הדמו המרשים המופיע בתמונה העליונה והפותחת בעזרת CSS בלבד. אמנם יש קוד JavaScript אך הוא נועד להחלת קלאסים בעמוד, ואפשרות להחליף בין ראיית תלת מימד לדו-מימדית , לסדר את הכוכבים לפי הסדר, המהירות ועוד. ג’וליאן השתמש במכלול הטכנולוגיות שציינתי למעלה; transitions ,animations ,3D transforms.

צפו בקוד המקור כאן: 3D CSS Solar System.

ועוד דברים מגניבים

לא מזמן, יצאה גרסה של כרום שתומכת ב CSS-filters. בקצרה, filters מעניקים לנו אפשרויות שלא היו לנו עד כה, כמו blur, shadow, sepia, ונוספים. בכדי להבין את משמעות הפילטרים השונים – בקרו ב-CSS Filters.

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

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


הפוסט בחסות איגוד האינטרנט הישראלי


אנו מזמינים אתכם לכנס השנתי לקהילת הווב הישראלית-  HTML5FEST שיקיים איגוד האינטרנט הישראלי  ומשרד ה-W3C הישראלי ב- 20.11.2012 בהשתתפות מפתחי הווב המובילים בישראל ונציגי W3C העולמי.

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

Avatar

כתב אורח

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

הגב

7 תגובות על "CSS כפי שלא הכרתם"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
רון
Guest

האייפון מhtml הוא טריק מגניב אך חסר כל ערך ובזבוז זמן מוחלט

אריאל
Guest

טוב, אז נמשיך לחפש תרופה לסרטן

איך לעשות כסף באינטרנט
Guest

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

בנצי
Guest

פשוט עולם ומלואו.. כמה שאני לומר יותר על css3/html5 ככה אני מופתע כמה הנושא הזה עמוק. תחפשו לדוגמא css flex box, מדהים כמה תתי נושא יש וכמה חבל שיקח לרוב הדברים האלה כל כך הרבה זמן עד שיתמכו.. מזל שיש לנו את המובייל שתומך בצורה סבירה.. סוג של נחמה :-)

רחל
Guest

HTML5 ו – CSS3 זה אכן עולם ומלואו. אני חובבת מקומות שבהם אפשר להתנסות בחוויה… למשל חברת WIX הישראלית מציעה את העורך שלה העובד עם שתי השפות הללו וחוויית השימוש אדירה! כמובן שבפלטפורמות כמו WORDPRESS ודומותיהן ניתן לטעום מזה עוד.
מה גם שאני מבקרת באופן די סדיר באתר של ה – W3C.

Uzi
Guest

There is no such thing as CSS4

http://www.xanthir.com/b4Ko0

QQ
Guest

כל התמונות שיש בכתבה הן באמת תמונות ולא CSS

wpDiscuz

תגיות לכתבה: