משחקים וציורים ב-css

משך זמן קריאה: 4 דקות

בואו נתחיל עם הפיל שבחדר: לא,  הנושא של הפוסט הזה הוא לא הכי פרקטי. אין באמת שימוש בחיי יום יום לאיורי css או משחקי css בפרודקשן (למרות שפה ושם דווקא כן יש). הביצועים בדר"כ לא מספיק מוצלחים, ואין באמת הצדקה שלא להשתמש ביכולות של JS להפעלה של משחק. יחד עם כל זאת, עדיין ברחבי הרשת יש המון מכל אלה ויותר. אז למה כן?

כן – כי זה כיף

כן – כי זה משפר טכניקה ושליטה ב-css

כן – כי בסופו של דבר זה הופך אותנו למפתחי.ות css טובים.ות יותר!

ואם כל זה לא שכנע, פנו לעצמכם שעה, תצפו ב- A Single (Spooky) Div with Lynn Fisher ותבינו. לא הצלחתם לפנות שעה או מעדיפים לקרוא? ל-Css Tricks יש את הפוסט Why would you do that in CSS?

 

צילום מסך מתוך https://a.singlediv.com

ציורים ואיורים ב 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 ליצירה של צורות הנדסיות וגאומטריות, ספירלות סטטיות או מונפשות. ישנן אין סוף דוגמאות ברשת, ואני אפילו לא מתיימרת להביא אחוז מתוכם, אז רק אביא דוגמה אחת לעניין 🙂

 

The Simpsons – https://pattle.github.io/simpsons-in-css/

Pure Css Games

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

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

 

See the Pen
CSS Little Witch
by agathaco (@agathaco)
on CodePen.

לסיכום

יש עוד המון המון איורים, ציורים, משחקים, אייקונים ועוד שנוצרו אך ורק בעזרת css, רק צריך לחפש אותם (ובדר"כ codepen הוא מקום לא רע להתחיל בו).
נכתבו לא מעט פוסטים על איך להתחיל לצייר עם css, מביאה פה כמה מהם:

בסוף המפגש של לין עם Jason Lengstorf (שמומלץ לחפור בערוץ הוידאו שלו) שבו הם יוצרים איור ב-div בודד, מספרת לין קצת על התהליך, איך היא התחילה עם ציורי css ואיך כל אחד יכול להתחיל. באותו מפגש ציין ג'ייסון שההבדל בין לראות מאייר יוצר איור והתוצר הסופי לעומת איור ב-css, הוא שבאחרון כל אחד יכול להיות שותף בתהליך, לבדוק איך האלמנטים נעשו ולנסות אפילו לשנות אותם, במיוחד אם נוצרו ב codepen ואפשר לעשות fork.

יאללה – לכו לצייר ב css ותצרפו לינק לתוצר בתגובות 🙂

 

כתיבת תגובה

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