Что это за черная магия?

Question

[antimodern]

Что происходит здесь вообще?


Или от это


Это как так блин вообще? Как такое возможно вообще? Что это за безумство? Или это читерство (кодогенерация)?

Comments

[Сергей delphinpro]

Я встречал сервисы, которые генерируют из картинки на входе её имитацию с помощью теней. По-моему, на хабре статья была, с джокондой в качестве примера.
Собственно в этом и заключается вся магия =))
Берем картинку, генерим подобным сервисом несколько кадров. Если это гифка, то всё совсем упрощается. Далее копипастим эти кадры (стили с box-shadow) в кей-фреймс и дело в шляпе.
Ловкость рук и никакого мошенничества.

[Дмитрий Кузнецов]

Сергей delphinpro, если увидите такой сервис, не могли бы прислать ссылку?

[Алекс Глебов]

https://dribbble.com/shots/3632380-Time-To-Party
можно у автора спросить

[crdrads]

Алекс Глебов, это не автор

Answer 1

[Ivan Bogachev]

Давным давно (года 2-3 назад) заварилась тема рисования с помощью CSS. Я тогда даже небольшую заметку на хабр писал по этому поводу. В те времена мы делали простые картинки вроде таких:

Это было интересно и познавательно. С одной стороны это челлендж, с другой - способ самообразования. На тот момент картинки были не очень сложными для понимания и тема людям понравилась. Время шло, народ постепенно изучал основы CSS (правда как всегда не у нас, у нас это дело в основном критиковали со словами "фигней маятесь, зачем это нужно" или "ну я же фронтенд-сеньер-реакт-помидор-разработчик, зачем мне нужно знать CSS"), но так или иначе картинки становились все более интересными, появлялись новые квесты и на данный момент можно сказать, что это своеобразный вид искусства с практически полезной составляющей. Понятное дело, что в продакшен такие картинки делать долго - проще взять SVG, но для обучения они хорошо подходят. Магии там нет.

Comments

[Spaceoddity]

"Давным давно"))))

Answer 2

[Павел Антонов]

myxotod.github.io/shadow-image

я просто оставлю это здесь..

Comments

[tundramani]

ваще бессмысленная штука

[Павел Антонов]

программист, согласен, но все же является ответом на вопрос автора, на поиграться сойдет.

[Олег]

программист, так там и меньше 100 строк кода
https://github.com/MyXoToD/shadow-image/blob/maste...

Был уверен, что автор лицензировал под WTFPL, но там пусто.
Как говориться "говорящая лягуха" это по приколу

Answer 3

[Вячеслав Успенский]

Тут происходит css-анимация через keyframe.
Вполне реально на глаз расчитать. Вот с кроликами жесть, да)

Comments

[antimodern]

На глаз? Серьезно?

Answer 4

[Ао]

Там где поле с кодом css справа есть галочка, нажми на неё и выбери view compiled css и увидишь реальный css который генерируется с помощью postcss.. ну вообщем да чёрная магия маразма:)

Comments

[antimodern]

Ты это серьезно сейчас?

Answer 5

[Сергей]

Мне показалось, что такое можно делать в Google Web Designer.

Comments

[antimodern]

Точно показалось.