#codepen дня

Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.

Переливающийся всеми цветами радуги светящийся текст!

Вот: https://codepen.io/thebabydino/pen/rNPOpJK

Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.

Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.

#css #svg #filter #бородач

#codepen дня

Давно не было рубрики, потому что это ну как-то ну слишком лениво.

Но вы только посмотрите на эту кнопку от Петра Кнолла: https://codepen.io/Petr-Knoll/pen/QwWLZdx


Если это не приближает нас к пику глассморфизма — то я не знаю, что приближает :)

#css #glassmorphism

#codepen дня

Как сделать элементы интерфейса... зернистыми? Напоминающими шершавую структуру, например, пластика? Или плёнки...

Для достижения эффекта можно воспользоваться SVG-фильтром! Например, от Аны Тюдор: https://codepen.io/thebabydino/pen/MWBNrZq

К сожалению, на Safari съехали буквы, но сути дела не меняет :)

#svg #grainy #бородач

#codepen дня

Сайт по продаже пончиков должен быть пончиком и точка!

Пруф: https://codepen.io/narrowdesign/pen/ZYErvWv?editors=1000

Извините, я просто никак больше не могу это прокомментировать.

#threejs #3d

#codepen дня

Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?

Сегодня ваш шанс вспомнить то самое чувство!

Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)

Тут: https://codepen.io/donotfold/pen/ZYYYJRV

Работает в Chrome и Safari TP.

Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.

#css #scroll #animation

#статья дня

Я знаю, знаю — вас всех уже достали различные реализации Doom.

Тут дум, там дум, а на байкале не дум.

И точно так же я прекрасно знаю, как вам надоели все эти #codepen'ы дня в стиле «вы только посмотрите, Мона Лиза на одном div'е», которые являются эксплуатацией линейных и радиальных градиентов и часто вообще делаются через формулы в Excel: группы пикселей конвертируются в колор-стопы градиентов.

Формулы в экселе... погодите. Если что-то можно описать формулой, значит, это что-то можно и автоматизировать?

Сюрприз-сюрприз! Можно. И вот тут начинается абсолютная дичь. Подбираемся к статье дня!

Итак, есть такой проект: WASM DOOM. Это просто движок, на его выходе — canvas. И что делает безумный автор статьи дня?

Правильно, рендерит холст в CSS-градиенты! Вот, собственно, и статья: https://dev.to/grahamthedev/doomrendered-using-a-single-div-and-css-1fal?

А вот прямая ссылка «на поиграть»: https://grahamthe.dev/demos/doom/

Кажется, на этом разговоры о Моне Лизе в одном DIV'е можно заканчивать.

#css #doom

#codepen дня

Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?

Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.

Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX

Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/

А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/

А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html

А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ

#css #mixblendmode #бородач

#codepen дня

Просыпайся, страна! Minecraft подвезли...

...на CSS!

Подвезли-то давно, но завирусилось только сейчас: https://benjaminaster.com/css-minecraft/

CodePen: https://codepen.io/Benjamin_Aster/pen/gOKwpOd
GitHub: https://github.com/BenjaminAster/CSS-Minecraft

Я не так давно посмотрел серию видео о разработке Minecraft для 8- и 16-битных консолей и даже для калькуляторов, но даже после этого — версия на HTML+CSS повергла в культурный шок.

Скриптов на странице, кстати, нет. Даже поворот — это сочетание псевдокласса :active и animation-play-state!

Дичь совершенная.

#css #minecraft

#такое дня

Не открывайте этот кодпен, если не хотите повесить ваш Chrome!

https://codepen.io/chasewackerfuss/pen/JKGrJJ

Да-да, не вкладку, а весь браузер. Закрыть-то её можно, но на MacBook на M2 Pro я смог это сделать только через минуту.

Изоляция вкладок, говорили они. Нестинг и анимации не будут влиять на производительность стилей, твердили они... Ха-ха.

У Safari, кстати, всё хорошо. А Firefox сильно тормозит, но не так и не настолько плохо, как Chrome. И весь браузер не вешается.

#codepen #css #nesting #fail

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач

#codepen дня

Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?

Сегодня ваш шанс вспомнить то самое чувство!

Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)

Тут: https://codepen.io/donotfold/pen/ZYYYJRV

Работает в Chrome и Safari TP.

Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.

#css #scroll #animation #бородач

#codepen дня

Мы когда-то давно смотрели на интересный пример использования clip-path и маскинга в CSS для создания кружочка статуса пользователя в сети: https://xn--r1a.website/htmlshit/2741

И вот Саймон Гелнер довёл этот пример до идеала! Размер, положение — всё настраивается через CSS-переменные и выглядит шикарно. Вот, можно поиграться: https://codepen.io/simeydotme/pen/ogNWvMN

Кстати, что даже более интересно, там используется прикольный API аватарок! https://www.dicebear.com/

Максимально неожиданная штука, конечно, с весьма интересными решениями по настройке внешнего вида аватарки и даже с предопределёнными генераторами (seed) на тысячи и миллионы вариантов.

Потрясающая находка, я считаю.

#css #svg #api #avatar

#codepen дня

Почти забытая рубрика!

Вариативные шрифты давно с нами, но вот весёлых вариантов применения пока не так много. Учитывая разворот индустрии в сторону более формальной коммуникации на лендингах, страницы с ошибками — это то немногое, где ещё можно развернуться.

Ну и вообще, весьма интересное напоминание, что вариативность в шрифтах не ограничивается одной лишь жирностью — осей вариативности может быть много! И задаются они создателем шрифта. Стандартных не так-то и много: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings

Мне ещё не очень понятно, кто заставляет создателей стандартов на шрифты экономить буквы: wght — серьёзно?

В данном случае у нас шрифт Cheee, у которого какое-то невероятное число осей, ну и ссылка на кодпен: https://codepen.io/Grooo/pen/ZMdqOb

А на символы это всё разбито плагином GSAP — SplitText.

#css #font #variation

#codepen дня

Jhey стал очень редко радовать нас новыми дропами — готовится к изданию своего курса по эффектной вёрстке, потому кодом делиться — увы — почти перестал.

Но надо отдать должное, когда идея не полностью исходит от него — он всё ещё продолжает демонстрировать уровень!

Итак, помните мы с вами пытались делать эффект Ambilight? Как оказалось, ту же идею можно применить чтобы подсветить края карточек!

Немного JS для передачи координат курсора в CSS, немного SVG-фильтров для размытия продублированного контента — и вы неотразимы!

Собственно, пример: https://codepen.io/jh3y/pen/WbwZaNa

Не забудьте потыкать настройки, чтобы понять реализацию.

#svg #css #ambilight

#codepen дня

Наткнулся на приятный и эффектный пример 3D-интерфейса — Painting Wheel.

Выглядит и ощущается как Three.js, но это CSS-преобразования.

По сути, берётся набор карточек и раскладывается по окружности. У каждой есть свой угол и одно и то же расстояние от центра. За счёт этого из обычного списка получается кольцо. Дальше вся сцена чуть наклоняется и добавляется перспектива.

JavaScript используется только чтобы поменять перспективу.

Ну а чтобы показать, что это всё совсем не запредельно сложно, я решил вытащить непосредственно реализацию кольца в отдельный кодпен: https://codepen.io/editor/alinaki/pen/019d2f65-9738-7ea5-a667-524ee1a68bef

Чтобы стало совсем понятно, я добавил панель управления: можете прощёлкать чекбоксы в верхнем правом углу и настроить любой аспект карусели.

Можно вообще сделать простую бесконечную прокрутку!

Из наворотов — только зум колесом, чтобы было проще рассматривать и понимать происходящее. Понятное дело, ваш ИИ-агент с лёгкостью вытащит код и из оригинального примера, но из упрощённого это делать сподручнее, не правда ли? :)

#css

#codepen дня

В какую сторону крутится? :)

https://codepen.io/jkantner/pen/bNwOdbw


#threejs #3d

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач