אמנות ה-CSS: איך בגיל 32 למדתי סוף סוף לצייר

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

מקור: Pixabay

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

למען האמת, אני כל כך גרועה בציור, שבתחילת הקורונה, כשכולם שיחקו ב-Draw Something אני פתחתי ערוץ בסלאק המשרדי שבו חלקתי את הציורים המזעזעים שלי, למטרות העלאת המורל. a.k.a “אולי אנחנו תקועים בבית ומטפסים על הקירות, אבל לפחות אנחנו מסוגלים לצייר בית”.
רוב הזמן הרגשתי בסדר גמור עם החוסר הספציפי הזה. לכולנו יש חולשות וחזקות, ואין לי סיבה להתלונן. אבל אז, לפני שבוע, נחשפתי ל-CSS art.

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

הסיבה להתלהבות הגדולה שלי מ-CSS art הייתה גם בגלל שהציורים היו ממש יפים, אבל גם בגלל שמדובר בקוד. כשכל מה שיש לי ביד הוא עט ונייר אני יודעת שלא ייצא מזה שום דבר יפה. אבל בקוד אני מבינה, זו השפה שאני מדברת בה ביום יום. ציור שאפשר לקודד – זה משהו שיש לי סיכוי להצליח בו.
אז החלטתי לבחון את הנושא – האם זה אפשרי? האם אומנות CSS תאפשר לי להכין משהו חמוד שאוכל להסתכל עליו בגאווה ולדעת שאני יצרתי אותו (חוץ מהבן שלי, כמובן)?

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

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

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

אז איך מתחילות?

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

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

העבודה על הציור הייתה סופר כיפית ובעיקר מאוד מספקת.

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

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

nice-css-penguin

פינגווין נחמד

mean-penguin

פינגווין שזומם משהו

shy-penguin

פינגווין פעור

is-this-still-a-penguin

האם זה בכלל פינגווין?

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

  1. הדבר הכי חשוב ביצירת CSS art הוא מיקום נכון של אלמנטים אחד בתוך השני בצורה שתקל עליכן. לדוגמא, במקרה של הפינגווין, האישונים הלבנים הם אלמנטים בתוך העיניים השחורות, ולכן הם ממוקמים ביחס אליהן. כשהעיניים זזות הם זזים איתן. זה מאוד מקל על המשחק עם העיצוב, וחוסך ממך לשנות מיליון אלמנטים כל פעם
  2. אל תתעכבי על העיצוב המושלם של כל פרט ופרט. עדיף לרוץ קדימה ולהשאיר את המשחק עם הפרופורציות והצבעים לסוף, כשיש לך את התמונה המלאה. הרבה יותר קל להבין ככה מה עובד ומה לא
  3. כל האלמנטים בציורי CSS הם מרובעים או מעגלים. אם את רואה משהו שנראה מורכב – למשל הפרצוף של הפינגווין שלי שנראה קצת כמו לב – זה סימן שהוא משלב כמה אלמנטים. כדאי לחשוב מראש על הצורות הבסיסיות שתרצי להשתמש בהן, ולהבין עד כמה הן מורכבות. שאפתנות זה אחלה, פשוט צריך לדעת מראש שבחרנו בפרויקט שאפתני
  4. פשוט תתחילי ואל תפחדי, זה כיף וקל יותר ממה שזה נראה

לסיכום – רעיון לפרויקט

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

bigpanda-logo

הלוגו האמיתי של BigPanda

bigpanda-logo-pure-css

הלוגו שיצרתי עם CSS

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

  1. יש פיצ’ר ב-CSS בשם clip path. שימוש ב-clip path מאפשר ליצור מגוון פסיכי של צורות ב-CSS, והיה חוסך לי בערך שעתיים עבודה על יצירת המצולע שלי. גל המליץ לי על האתר הזה שהוא משתמש בו, ואני בהחלט אנצל אותו בציור הבא שלי.
    *בדיעבד, ההסבר על clip path הופיע גם בדקות האחרונות של השיעור אליו קישרתי למעלה, ואני פרשתי קצת לפני. אופס. לקח חשוב – תצפו בשיעורים עד סופם
  2. יש בגיטהאב מאגר של לוגואים של חברות שצוירו ב-CSS. אני חושבת שזה רעיון ממש מגניב, אני כל כך אוהבת שאנשים יוצרים פרויקטים שמעודדים את כולם להיות יצירתיים יותר.
    אני מציעה לכל אחת שקוראת את הפוסט הזה ומחפשת רעיון לציור מעניין ב-CSS לנסות וליצור את הלוגו של החברה שלה ולהכניס אותו למאגר, יש עוד כל כך הרבה חברות שלא מיוצגות שם

בהצלחה לכולן

פורסם במקור בבלוג “מאיה כותבת אלגוריתמים”

מאיה גרשוביץ בר

מתכנתת, גיקית, כותבת הבלוג "מאיה כותבת אלגוריתמים"

הגב

13 תגובות על "אמנות ה-CSS: איך בגיל 32 למדתי סוף סוף לצייר"

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

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

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

נחמד לראות שיש במאגר את הלוגו של גיקטיים ????

אשטנקר
Guest

פועלי בניין וירטואלים שלמדו לעשות גרפיטי וירטואלי

בזיל
Guest

תראה מה נהיה ממך. נהיית אשטנקר בוט

כרובי
Guest

נכון, מתכנתים זה פועלי בניין, מנתחים זה אינסטלטורים, טייסים זה נהגי אוטובוסים, ראשי ממשלה זה אחמ”שים.
עכשיו אתה מבסוט?

אף אחד
Guest

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

NEO
Guest

יש מצב שגם אתה וירטואלי

virtualME
Guest

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

סבלטנה נחוי
Guest

אשטנקר הוא מהגר סובייטי דחוי שלא מוצא עבודה
ולא נקלט בישראל.

Name
Guest
בזיל
Guest

יפה מאוד!

גרופר
Guest

אשטנקר יא מלך אל תפסיק

עמית
Guest

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

אם אתם רוצים דוגמאות, יש מלא כאלו ב-Codepen שלי: https://codepen.io/amitsheen

בקאנדיסט
Guest

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

wpDiscuz

תגיות לכתבה: