Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»
Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb
Весь секрет в наложении маски в виде градиента под элемент:
&::after {
mask: linear-gradient(calc(var(--pointer-angle) * 1deg), #ffffff80, #ffffff30 30% 60%, #fff);
}
И всё, дальше просто вращаем по желанию. Техника не нова, даже блендинг не нужен. Ну а весь JS-код — он просто для обработки позиции курсора и для фирменного эффекта взрыв-диаграммы, ставшей визитной карточкой Джея.
Работает, кстати, во всех современных браузерах.
#css #gradient #mask