Голограммы, пленочные засветки и шейдеры на чистом CSS

Как вы обычно делаете визуальные эффекты для веб-страницы? Наверное, используете какую-нибудь JS-библиотеку, которая может прокачать сцену, добавив освещение, 3D, шейдеры и прочее, например threejs. Верно?

Но на самом деле в некоторых кейсах уже можно смело отказывать от JS в пользу CSS, ведь браузеры наконец поддерживают mix-blend-mode. Например, вы можете добавить эффект засветки при скролле страницы, как на этой картинке выше (как это работает можно увидеть по ссылке). В этой статье вы узнаете, как добавить крутые эффекты для ваших изображений только благодаря CSS и заодно увидите, как они работают в жизни:

https://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html

#css #фронтенд

Frontend Hash

Голограммы, пленочные засветки и шейдеры на чистом CSS

Как вы обычно делаете визуальные эффекты для веб-страницы? Наверное, используете какую-нибудь JS-библиотеку, которая может прокачать сцену, добавив освещение, 3D, шейдеры и прочее, например threejs. Верно?

Но на самом деле в некоторых кейсах уже можно смело отказывать от JS в пользу CSS, ведь браузеры наконец поддерживают mix-blend-mode. Например, вы можете добавить эффект засветки при скролле страницы, как на этой картинке выше (как это работает можно увидеть по ссылке). В этой статье вы узнаете, как добавить крутые эффекты для ваших изображений только благодаря CSS и заодно увидите, как они работают в жизни:

https://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html

#css #фронтенд

👍5🔥1

hottg.com/hashdev/307

993 viewsDec 5, 2022 at 13:42