#фишка дня
Я неоднократно выкладывал разные SVG-инструменты и генераторы. Вот, например: https://t.me/htmlshit/447
У многих есть одно общее: генератор блямб. Или капель. Я честно не уверен, как это должно называться по-русски. Blob, короче.
Почему-то эти капли попали в тренды и пока там держатся. Но совсем не обязательно делать их на SVG.
CSS тоже отлично справляется.
На чем это основано? На геометрии кривых :) Эллипсов, точнее. Через слэш задаются вертикальный и горизонтальный радиусы эллипсов соответственно. А дальше — математика спряжения кривых. Вот тут подробнее: https://www.w3.org/TR/css-backgrounds-3/#border-radius
А тут — попопулярнее: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
Кто смелый анимировать их? :)
#css #blob
Я неоднократно выкладывал разные SVG-инструменты и генераторы. Вот, например: https://t.me/htmlshit/447
У многих есть одно общее: генератор блямб. Или капель. Я честно не уверен, как это должно называться по-русски. Blob, короче.
Почему-то эти капли попали в тренды и пока там держатся. Но совсем не обязательно делать их на SVG.
CSS тоже отлично справляется.
На чем это основано? На геометрии кривых :) Эллипсов, точнее. Через слэш задаются вертикальный и горизонтальный радиусы эллипсов соответственно. А дальше — математика спряжения кривых. Вот тут подробнее: https://www.w3.org/TR/css-backgrounds-3/#border-radius
А тут — попопулярнее: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
Кто смелый анимировать их? :)
#css #blob
👍7❤4
#фишка дня
Я неоднократно выкладывал разные SVG-инструменты и генераторы. Вот, например: https://t.me/htmlshit/447
У многих есть одно общее: генератор блямб. Или капель. Я честно не уверен, как это должно называться по-русски. Blob, короче.
Почему-то эти капли попали в тренды и пока там держатся. Но совсем не обязательно делать их на SVG.
CSS тоже отлично справляется.
На чем это основано? На геометрии кривых :) Эллипсов, точнее. Через слэш задаются вертикальный и горизонтальный радиусы эллипсов соответственно. А дальше — математика спряжения кривых. Вот тут подробнее: https://www.w3.org/TR/css-backgrounds-3/#border-radius
А тут — попопулярнее: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
Кто смелый анимировать их? :)
#css #blob
Я неоднократно выкладывал разные SVG-инструменты и генераторы. Вот, например: https://t.me/htmlshit/447
У многих есть одно общее: генератор блямб. Или капель. Я честно не уверен, как это должно называться по-русски. Blob, короче.
Почему-то эти капли попали в тренды и пока там держатся. Но совсем не обязательно делать их на SVG.
CSS тоже отлично справляется.
На чем это основано? На геометрии кривых :) Эллипсов, точнее. Через слэш задаются вертикальный и горизонтальный радиусы эллипсов соответственно. А дальше — математика спряжения кривых. Вот тут подробнее: https://www.w3.org/TR/css-backgrounds-3/#border-radius
А тут — попопулярнее: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
Кто смелый анимировать их? :)
#css #blob
👍13
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Давайте вдогонку к шейдерам реализуем похожий эффект на чистом CSS. World of Goo, если вы понимаете, о чём я.
Если взять два кружка и сильно их размыть, то они, очевидно, слепятся друг с другом полупрозрачной каймой.
Но как добиться эффекта соединения двух капель? Выкрутить контраст на 11!
Если ты не знаешь, что такое выкрутить на 11, ты не настолько стар, как я. Поздравляю. Вообще это из фильма This is Spinal Tap. Неважно.
Помните пост про режимы наложения? Вот этот: https://t.me/htmlshit/1836
Секрет эффекта в том, что выкручивание контраста сильно повышает резкость картинки и даёт возможность творить странное.
Короче, смотрим тут: https://codepen.io/alinaki/pen/wvEmroe
Думаю, есть, как минимум, ещё вариант с SVG.
#goo #css #blob
Давайте вдогонку к шейдерам реализуем похожий эффект на чистом CSS. World of Goo, если вы понимаете, о чём я.
Если взять два кружка и сильно их размыть, то они, очевидно, слепятся друг с другом полупрозрачной каймой.
Но как добиться эффекта соединения двух капель? Выкрутить контраст на 11!
Если ты не знаешь, что такое выкрутить на 11, ты не настолько стар, как я. Поздравляю. Вообще это из фильма This is Spinal Tap. Неважно.
Помните пост про режимы наложения? Вот этот: https://t.me/htmlshit/1836
Секрет эффекта в том, что выкручивание контраста сильно повышает резкость картинки и даёт возможность творить странное.
Короче, смотрим тут: https://codepen.io/alinaki/pen/wvEmroe
Думаю, есть, как минимум, ещё вариант с SVG.
#goo #css #blob
❤9👍1