TG Telegram Group & Channel
Будни разработчика | United States America (US)
Create: Update:

#статья дня

Итак, перед тобой задача: поставить заглушку, пока грузится основное изображение.

Нет проблем, говоришь ты, и шлёпаешь серый прямоугольник.

И все такие: «Ну чот...»

Наверное, есть же что-то получше?

Да, есть. LQIP-техники вида, собственно, LQIP, SQIP и BlurHash. Вот, писал тут: https://hottg.com/htmlshit/2565

Ну или генерация всенаправленного градиента по фото: https://hottg.com/htmlshit/3517

Но это всё как-то муторно... вот бы что попроще.

И таки есть! Лин Рада — разработчик из Canva — придумал новую технику LQIP, основанную на CSS. Заключается она в кодировании цветных тёмных/светлых участков короткой последовательностью символов.

Ну, типа:


<img src="…" style="--lqip:192900">


И пример того, что получается, можно посмотреть на иллюстрации.

А сама статья шикарный пример умного использования различного рода координат: https://leanrada.com/notes/css-only-lqip/

Изображение бьётся на 6 частей и фон, уровень светлости этих частей задаётся простым кодом. А дальше в дело вступают простые радиальные градиенты и размытие, которые и дают нужный эффект.

Конечно, математики там сильно больше, чем я сейчас описал, потому очень рекомендую хотя бы пролистать её.

Кстати, там же есть и скрипт для обработки картинок, чтобы не гадать координаты самому.

#css #lqip #math

This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня

Итак, перед тобой задача: поставить заглушку, пока грузится основное изображение.

Нет проблем, говоришь ты, и шлёпаешь серый прямоугольник.

И все такие: «Ну чот...»

Наверное, есть же что-то получше?

Да, есть. LQIP-техники вида, собственно, LQIP, SQIP и BlurHash. Вот, писал тут: https://hottg.com/htmlshit/2565

Ну или генерация всенаправленного градиента по фото: https://hottg.com/htmlshit/3517

Но это всё как-то муторно... вот бы что попроще.

И таки есть! Лин Рада — разработчик из Canva — придумал новую технику LQIP, основанную на CSS. Заключается она в кодировании цветных тёмных/светлых участков короткой последовательностью символов.

Ну, типа:


<img src="…" style="--lqip:192900">


И пример того, что получается, можно посмотреть на иллюстрации.

А сама статья шикарный пример умного использования различного рода координат: https://leanrada.com/notes/css-only-lqip/

Изображение бьётся на 6 частей и фон, уровень светлости этих частей задаётся простым кодом. А дальше в дело вступают простые радиальные градиенты и размытие, которые и дают нужный эффект.

Конечно, математики там сильно больше, чем я сейчас описал, потому очень рекомендую хотя бы пролистать её.

Кстати, там же есть и скрипт для обработки картинок, чтобы не гадать координаты самому.

#css #lqip #math


>>Click here to continue<<

Будни разработчика




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)