This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Если в CSS есть встроенные фильтры, наверное, можно и редактор картинок сделать?
И таки да, можно.
Если в CSS есть (где-то, впрочем, только планируется) анимация по скроллу, наверное, на её основе можно делать элементы-ползунки?
И таки да, можно.
Зная всё это, можно ли на (почти) чистом CSS сделать фоторедактор?
Да!
https://codepen.io/paulnoble/pen/bGyNRNE
JS тут используется буквально для того, чтобы зарегистрировать CSS-переменные как анимируемые. Ну и добавить drag-возможности для десктопа.
Забавно, что при всех этих возможностях у нас так и нет нормального API для получения картинки из DOM-ноды...
#css #filters #scroll
Если в CSS есть встроенные фильтры, наверное, можно и редактор картинок сделать?
И таки да, можно.
Если в CSS есть (где-то, впрочем, только планируется) анимация по скроллу, наверное, на её основе можно делать элементы-ползунки?
И таки да, можно.
Зная всё это, можно ли на (почти) чистом CSS сделать фоторедактор?
Да!
https://codepen.io/paulnoble/pen/bGyNRNE
JS тут используется буквально для того, чтобы зарегистрировать CSS-переменные как анимируемые. Ну и добавить drag-возможности для десктопа.
Забавно, что при всех этих возможностях у нас так и нет нормального API для получения картинки из DOM-ноды...
#css #filters #scroll
🤩11👍3🤡3❤2
Media is too big
VIEW IN TELEGRAM
#ссылка дня
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://t.me/htmlshit/1416
#svg #filters #html #shaders
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://t.me/htmlshit/1416
#svg #filters #html #shaders
👍5❤2