רואים את הציורים האלו? מפתחת יצרה אותם עם CSS ו-HTML בלבד
אלפי שורות קוד יוצרות את הציורים המדהימים של דיאנה סמית’ שרוצה להראות לכם אילו דברים מיוחדים אפשר ליצור בעזרת כלים בסיסיים וידע
צילום מסך. מתוך האתר של דיאנה סמית’
טוב, גם אנחנו קצת לא האמנו שראינו את זה: מעצבת UI בשם דיאנה אדריאן סמית’ מסן פרנסיסקו החליטה לקחת את הידע הנרחב שלה בקוד ובעיצוב, ואת האהבה שלה לאמנות לדרגה מעוררת השראה, ויצרה יצירות אומנות של ממש, רק שבמקום להשתמש במכחול, היא השתמשה רק ב-CSS ו-HTML. האם בקרוב יצירות השמן על גבי קנבס במוזיאונים יוחלפו ביצירות קוד על גבי דפדפן?
אלפי שורות קוד ליצירה אחת
סמית’ שילבה כ-1,200 תגיות DIV ב-HTML לצורך מבנה הציור, ועל גביהן הלבישה כ-2,000 שורות CSS המורכבות מלא מעט Classes ומאפיינים שונים לצורך עיצוב האלמנטים בציור. אחרי שתסיימו להתרשם מהציור המלא (מומלץ בכרום בלבד), לחצו עליו קליק ימני ובחרו ב-Inspect. שם תוכלו לראות כיצד סמית’ בנתה את הציור ולצלול לנבכי הקוד שהיא בנתה. מומלץ לשים לב כיצד כל פרט ופרט בציור קיבלה שורות קוד משלה. אם תרצו, סמית’ הציבה את כל היצירות שלה ב-GitHub, כך שתוכלו לעשות איתם פחות או יותר מה שתרצו.
מתוך האתר של דיאנה סמית’
אם האתגר הכללי לא היה מספיק, סמית’ איתגרה את עצמה להשתמש רק בעורכי טקסט וללא שימוש בספריות או Frameworks למינהם. סמית’ טוענת שהיא גם רוצה לעורר השראה במתכנתים ומתכנתות אחרים כדי להראות את הכוח של יצירה ב-CSS. בנוסף, יצרה מדריך קצר עם 5 ה-Properties שכדאי לכם להכיר כדי ליצור עוד יצירות דומות ב-CSS. סמית’ היא מעצבת UI בהכשרתה, אך מציינת כי היא בעלת ניסיון רב בפיתוח JavaScript (ב-React, Vue, Backbone ו-JQuery).
מתוך האתר של דיאנה סמית’
אם אתם כבר מסיירים במדריך, אל תפספסו את האפשרות לראות מה קורה כשמורידים קלאסים של CSS מתוך היצירות שלה.
עידן בן טובים
נולד עם ג׳ויסטיק ביד. יש לו הרבה יותר מדי גאדג׳טים והרבה פחות מדי זמן פנוי כדי לשחק עם כולם. בעל פטיש לא מוסבר לביצוע קליברציות לסוללות של מכשירים. כשהוא לא עסוק בלכתוב על טכנולוגיה, הוא אוהב לדבר עליה, והרבה
הגב
16 תגובות על "רואים את הציורים האלו? מפתחת יצרה אותם עם CSS ו-HTML בלבד"
* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.
זה לא ציורי שמן זה ציורי פלסטיק, ועם כל הכבוד לדרך בה היא עשתה זאת (עוד אחת שטיפסה על הר רק כי הוא שם) אין תחליף לציור אמיתי,למרות שאני לא מזלזל שבכלים שבהם היא יצרה זאת זה אכן מדהים למרות שהתמונות עצמם מכוערות, ההבדל בין ציור לתמונה הוא בידיעת הדרך שעשה צייר, אם אתה רואה תמונה של אגם זה לא יעשה לך כלום, אבל אם תראה ציור של אגם ותבין עד כמה מדהים מח האדם והיכולות שיש לאנשים מסויימים אז אפילו ציור של אגם יגרום לך לעמוד נדהם.
טטיאפכו והל טטכנו לי אט הדיכדוק
מדהים כמה “אנשי אומנוצ” פרובינציאליים בנוגע לטכנולוגיה. גם עפרונות וצבעים במיליון גוונים היו לפני 300 שנה טכנולוגיות. למה לפסול יצירות אמנות באמת מדהימות, בגלל שהאצבעות של האמן עשו תנועות הקלדה במקום משיכה?
זה שמשהו קיים הרבה זמן לא הופך אותו לרומנטי יותר או אמנותי יותר.
אין ספק שהיא מוכשרת, אבל התמונה שהיא עשתה זה לא דבר שהיית תולה בסלון, זה בדיוק כמו שמישהו יצייר ציור מגעיל. מי שראה את הסרט מלך האריות לא צריך עוד הוכחה ליכולות של יצירה במחשב.
אומנות זה לא משהו שתולים בסלון.
את האומנות שאני אוהב מציירים גם על הפחי זבל ואתה עדיין עוצר ואומר וואלה איזה יופי, את האומנות שאתה אוהב צריך לשים בחדר עם מדריך שיסביר לך על מה לעזאזל אתה מסתכל ולמה לכל הרוחות תלו את הציור ולא את הצייר.
חזק
למה לא כתוב (או שאולי היא לא ציינה) כמה זמן זה לקח??
מעניין אם זה רספונסיבי
מדהים.
נראה שכל המזלזלים לא יודעים איך לאיית את המילה קוד.
הקטע פה זה לא הרמה האמנותית. גם במחשב אפשר לעשות אמנות ברמה גבוהה יותר. אבל לעשות כזה דבר ע”י קוד בלבד? בלתי נתפס
מישהו פתח פעם SVG כקובץ טקסט? זה די דומה. הוא בעצם XML שמתאר ציור צורות בסיסיות בצבעים שונים.
“דומה” כמו שמטוס הנייר שלי דומה לתוכנית של 747.
לכתוב svg בעצמך בלי כלים זה בין לא אפשרי לבין חוסר אפשרות להגיע לתוצאה זהה לכלים, ובכל מקרה לא תגיע לתוצאה של css
ממש לא דומה ולא קשור
אני לא מצליח למרכז כותרת בcss. איך לכל הרוחות היא עשתה את זה איך???
לדעתי היא עשתה את זה בעזרת סקריפט , ואז עשתה שינויים קטנים כדי שיהיה קריא קצת. לא הגיוני שהיא תשב 500 שעות על ציור שלא מועיל