בואו נתחיל עם הפיל שבחדר: לא, הנושא של הפוסט הזה הוא לא הכי פרקטי. אין באמת שימוש בחיי יום יום לאיורי css או משחקי css בפרודקשן (למרות שפה ושם דווקא כן יש). הביצועים בדר"כ לא מספיק מוצלחים, ואין באמת הצדקה שלא להשתמש ביכולות של JS להפעלה של משחק. יחד עם כל זאת, עדיין ברחבי הרשת יש המון מכל אלה ויותר. אז למה כן?
כן – כי זה כיף
כן – כי זה משפר טכניקה ושליטה ב-css
כן – כי בסופו של דבר זה הופך אותנו למפתחי.ות css טובים.ות יותר!
ואם כל זה לא שכנע, פנו לעצמכם שעה, תצפו ב- A Single (Spooky) Div with Lynn Fisher ותבינו. לא הצלחתם לפנות שעה או מעדיפים לקרוא? ל-Css Tricks יש את הפוסט Why would you do that in CSS?
ציורים ואיורים ב css
בשנים האחרונות css עברה התקדמות מטאורית, והיכולות לעיצוב בעזרתה הפכו את הכל לאפשרי. השימוש בגריד שינה את כללי המשחק לגמרי, אבל הוא לא המאפיין היחיד שאחראי לשינוי. הרחבה והוספה של מאפיינים שונים כמו לדוגמה קוניק-גראדיאנט שהתמיכה שלו בדפדפנים הולכת וגדלה, השימוש ב clip-path לעבודה עם זרימה של טקסט ועוד, תרמו את חלקם למהפכה. css ללא ספק משפיעה על טרדנדים עיצוביים ולהפך. במקביל לכל השינויים האלה, ואפילו בעצם עוד הרבה לפני, התפתחה מגמה של שימוש ביכולות של css לאו דווקא למטרה לשמה היא קיימת (עיצוב דפי אינטרנט).
אם אפשר לשרטט בזהירות את ההתחלה הייתי בוחרת את הטרנד של one div design. ל-לין פישר (המטורפת!) יש פרויקט שנקרא A Single Div ששווה צפיה, ואפשר גם לקרוא את הפוסט שלה על למה מה ואיך. אפשר גם לראות את הכוננית של לין שעשויה כולה גם היא מאלמנטים ב-div בודד. לין איננה היחידה בתחום ואם תעשו חיפוש זריז בגוגל תוכלו להגיע להמון תוצאות, כמו למשל Drawing with CSS inside single div container ועוד.
למען האמת, ציורי css לא מוגבלים רק לשימוש ב-div בודד, ויש המון ציורי css בשנים האחרונות. אחד הראשונים שנתקלתי בהם היה היצירה של כל הדמויות של משפחת סימפסונס שהרשימה ושיעשעה אותי במיוחד, וגם איורי ה-pixel-art בפוסט של Una Kravets הרשימו אותי מאוד. מאז, ציורי css הם כבר לא ממש משהו נדיר, ואפילו אני לקחתי חלק בנסיון ליצור איורים ב-css ואפילו כתבתי על זה פוסט 🙂 . אפשר למצוא המון איורים וציורי css ברחבי הרשת – הפוסט הזה שמרכז לינקים ליצירות כאלו הוא אחד מני רבים, ומדי פעם מבליחות יצירות יוצאות דופן כמו למשל ציורי האמנות המטורפים של דיאנה סמית.
בגדול, אפשר לומר שכמעט כל יום עולות ל-codepen יצירות css שונות כמו למשל אלה של רותם הורוביץ, ומצלמת הפולורויד המיוחדת שאפילו מלווה אותה פוסט מעניין על תהליך היצירה. ואם מדברים על איורים, איך אפשר בלי להזכיר סטים של אייקונים שנבנו ב css כמו ICONO, ו-cssicon.
שניה לפני שאני ממשיכה למשחקים אני רוצה להוסיף בהערת ביניים שמעבר לציורים או איורים, יש המון דוגמאות לשימוש ביכולות של ה-css ליצירה של צורות הנדסיות וגאומטריות, ספירלות סטטיות או מונפשות. ישנן אין סוף דוגמאות ברשת, ואני אפילו לא מתיימרת להביא אחוז מתוכם, אז רק אביא דוגמה אחת לעניין 🙂
Pure Css Games
אני חושבת שבמשחקי css נתקלתי לראשונה בזכות הקבוצה של Css Masters Israel בפייסבוק. אחד מהם היה של איציק פופ – משחק של מבוך. אחריו נתקלתי בעוד כמה, כמו המשחק של סופר מריו שנבנה כולו ב-css. לפני חצי שנה יצר אלעד שכטר את משחק הקורונה ב-css ואפילו יצא עם הרצאה שמפרטת איך הוא בנה כל אלמנט במשחק ואיך הפעיל אותו אלמנטים במשחק (ויש גם פוסט שמסביר למי שלא רוצה לצפות). אם יצירה של איורים וציורים מחדדת את השליטה שלנו ב-css, אני חושבת שביצירה של משחק, מעבר לשיפור הטכניקה בשימוש ב-css, יש שיפור ולמידה גם ביכולות של HTML.
לאחרונה אני נתקלת ביותר ויותר משחקים. אולי זה בגלל שנוצרים יותר משחקים, ואולי זה כי עכשיו המוח שלי מכיר יותר ומחפש את זה. כך או כך קבלו מבחר ממה שנתקלתי והיה שווה בעייני:
- The Caretaker – A pure CSS Horror / Puzzle game
- A Pure CSS Game – You Must Build a Lighthouse
- pure css game
- kill the birds (אמנם לא לאחרונה, אבל הייתי חייבת להוסיף :))
- האוסף של Una Kravets למשחקי css
See the Pen
CSS Little Witch by agathaco (@agathaco)
on CodePen.
לסיכום
יש עוד המון המון איורים, ציורים, משחקים, אייקונים ועוד שנוצרו אך ורק בעזרת css, רק צריך לחפש אותם (ובדר"כ codepen הוא מקום לא רע להתחיל בו).
נכתבו לא מעט פוסטים על איך להתחיל לצייר עם css, מביאה פה כמה מהם:
- Pocket Guide to CSS only Drawings and Animations
- A Beginner’s Guide to Pure CSS Images
- How I started drawing CSS Images
- Learn to DevArt
בסוף המפגש של לין עם Jason Lengstorf (שמומלץ לחפור בערוץ הוידאו שלו) שבו הם יוצרים איור ב-div בודד, מספרת לין קצת על התהליך, איך היא התחילה עם ציורי css ואיך כל אחד יכול להתחיל. באותו מפגש ציין ג'ייסון שההבדל בין לראות מאייר יוצר איור והתוצר הסופי לעומת איור ב-css, הוא שבאחרון כל אחד יכול להיות שותף בתהליך, לבדוק איך האלמנטים נעשו ולנסות אפילו לשנות אותם, במיוחד אם נוצרו ב codepen ואפשר לעשות fork.
יאללה – לכו לצייר ב css ותצרפו לינק לתוצר בתגובות 🙂