רואים את הציורים האלו? מפתחת יצרה אותם עם 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 בלבד"

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

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

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

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

מבין גדול
Guest

טטיאפכו והל טטכנו לי אט הדיכדוק

איתמר
Guest

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

שוקרן
Guest

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

חגי
Guest

אומנות זה לא משהו שתולים בסלון.

סטרייק
Guest

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

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

חזק

וואט
Guest

למה לא כתוב (או שאולי היא לא ציינה) כמה זמן זה לקח??

א.ס
Guest

מעניין אם זה רספונסיבי

י.ל.
Guest

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

Aspasianus Augustus
Guest

מישהו פתח פעם SVG כקובץ טקסט? זה די דומה. הוא בעצם XML שמתאר ציור צורות בסיסיות בצבעים שונים.

מישהו
Guest

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

יויו
Guest

ממש לא דומה ולא קשור

יורם
Guest

אני לא מצליח למרכז כותרת בcss. איך לכל הרוחות היא עשתה את זה איך???

אור
Guest

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

wpDiscuz

תגיות לכתבה: