Създаване на картина с програмен код

Всеки от нас е виждал колко „красиво“ изглежда един програмен код. Да си го кажем честно, тези редове съдържащи букви, думи и цифри, по никакъв начин не изглеждат красиво. Но можете ли да си представите, че HTML и CSS код, може да създава уникални картини? Точно това прави Диана Смит.

Как се правят картини чрез CSS код? 

Инженерът Диана Смит обединява техническите си познания и любовта си към изкуството за да създаде красиви портрети с помощта на CSS. Това е невероятна работа, която показва колко много творчески проекти могат да бъдат направени от хора с опит в CSS.

Уеб разработчиците се удивляват от работата на Диана Смит, която е UI специалист, CSS експерт, с опит в JavaScript разработването и разработчик на приложения в MVC модел. Тя успява с помощта на HTML и CSS и най-обикновен редактор да създаде уникални картини и резултатите са зашеметяващи. Картините, които пресъздава тя с писането на код, са главно фламандски и барокови портрети. Смит стриктно спазва едно свое правило, а именно всички редове код да са написани ръчно.

Портретите запълват хиляди редове код а строгото правило на Смит, оставя доста уеб разработчици потресени: всички елементи трябва да бъдат въведени на ръка. Което означава, че тя не разчита на библиотеки, преки пътища или някакъв визуален редактор.

С помощта единствено на текстов редактор – и години опит като уеб разработчик – UI инженерът Даяна Смит създава вдъхновени от фламандския и бароков портрети, използвайки HTML и CSS.

Отстраняването на сложните проблеми със CSS или HTML може да забави един добър разработчик с часове, да не говорим за оформянето на перлени огърлици, прически, изражения на лицето и дантелени яки. Чрез Twitter Смит казва, че е завършила най-новото си парче за период от два уикенда.

Една от най-впечатляващите ѝ картини е наречена „Pure CSS Francine“. За направата ѝ тя използва единствено HTML и CSS. Процесът по създаване на изображение представлява наслагване и подреждане на форми. „Рисуването“ на една творбата не е бърз процес. Отнема приблизително две седмици до построяването ѝ, като хубавото е, че при следване на стриктна последователност на кода, в резултат се получава една и съща картина.

Това е старателна работа, особено когато става въпрос за детайли като коса, което изисква от Смит да изпише всеки кичур. И все пак, тези проекти са  удовлетворяващ начин за нея да се вдъхнови от изкуството, което вижда, и да приложи знанията си, в направата на нещо красиво. Всъщност творческият процес е този, който носи най-голяма радост на Диана. 

И така, какво я накара да започне с изкуството на CSS?

„Бях вдъхновен да започна CSS изкуство, докато работех като уеб разработчик и бях раздразнена от това колко досадно беше да синхронизирам изображения в локални/тестващи/ производствени среди,” казва Смит пред My Modern Met.

„Първите ми проекти включваха работа върху сайтове, чиито оформления бяха много натоварени с графика, така че не винаги беше толкова бързо да се правят актуализации на тези вече внедрени оформления. Но забелязах, че почти всички тези сайтове са с доста минималистичен дизайн, така че започнах да създавам наново много от тях в CSS, само за да улесня живота си. Започнах да правя някои домашни илюстрации с CSS, просто се забавлявах.”

Смит качва цялата си работа в GitHub, където почитателите могат не само да видят готовия продукт, но и да разгледат обширния код, който тя е написала. Смит се надява, нейният труд и любов към това което прави, да вдъхнови още хора да използват уменията си за да създадат нещо красиво.

Искате ли и вие да се научите как да пишете CSS и HTML код? Ние от Advance Academy сме подготвили курс Front-end Fundamentals. Където ще научите как да използвате основата на програмирането, а именно HTML/CSS. Очакваме Ви!