#инструмент дня

Итак, потребовалось тебе написать статью. В статье что должно быть? Правильно, примеры. Где у нас лежат одни из лучших примеров?

Правильно, на CodePen.

Но как вставить кодпен на страницу, да ещё так, чтобы это все удобно хранить в гите и даже редактировать?

Ответ: использовать web-компонент <code-pen>!

Вот этот вот: https://darn.es/code-pen-web-component/

<script type="module" src="code-pen.js"></script>

<code-pen>
<pre>
<code>&lt;p&gt;Hello world&lt;/p&gt;</code>
</pre>
</code-pen>

Красота.

#component #codepen

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform #бородач

#codepen дня

Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.

Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.

Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)

В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa

И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.

Короче, моё демо теперь тоже не за горами :)

#css #scroll #animation

#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 дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂

Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

#codepen дня

К посту про interpolate-size: allow-keywords и о том, что теперь можно анимировать высоту, отлично подойдёт сегодняшний кодпен от Адама Аргайла.

Демо: https://codepen.io/argyleink/pen/BaXyJRL

Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).

Кстати, там же можно увидеть применение селектора :user-valid, а именно, концепции грязных полей: чтобы показать поле пароля в первый раз, надо сойти с поля ввода имени, blur; но после этого поле считается грязным и ввод пароля появляется моментально.

Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.

Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.

Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size

#css #animate #height

#codepen дня

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

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

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

#svg #grainy