#codepen дня

Если в CSS есть встроенные фильтры, наверное, можно и редактор картинок сделать?

И таки да, можно.

Если в CSS есть (где-то, впрочем, только планируется) анимация по скроллу, наверное, на её основе можно делать элементы-ползунки?

И таки да, можно.

Зная всё это, можно ли на (почти) чистом CSS сделать фоторедактор?

Да!

https://codepen.io/paulnoble/pen/bGyNRNE

JS тут используется буквально для того, чтобы зарегистрировать CSS-переменные как анимируемые. Ну и добавить drag-возможности для десктопа.

Забавно, что при всех этих возможностях у нас так и нет нормального API для получения картинки из DOM-ноды...

#css #filters #scroll

#codepen дня

На WWDC24 Apple похвастались тем, что на SwiftUI теперь можно создавать параллакс-галереи буквально несколькими строчками кода.

Но мы же с вами все знаем, что Web намного круче, как платформа. Мы тоже так умеем!

Правда, только в Chrome...

Ведь у нас есть CSS-переменные и Scroll Timeline API, который мы рассматривали вот тут, даже с полифиллом: https://t.me/htmlshit/621

Итак, вашему вниманию конфигурируемая параллакс-галерея от Джея: https://codepen.io/jh3y/pen/XWwzYZo

Весь JS там — это часть универсальной панели управления, чтобы задавать параметры.

#css #scroll #animation

#codepen дня

Фокусы с типографикой в CSS весьма ограничены, но даже имея на руках лишь их — можно вытворять эффектные вещи.

Например, комбинируя грид и вертикальный режим вывода текста можно получить забавную змейку, как на демо от Adam Argyle: https://codepen.io/alinaki/pen/VwOJoXY

Я форкаю кодпены, потому что они имеют особенность пропадать.

Заодно демо являет собой хороший пример контейнерных запросов, зажимая размер шрифта в адекватных рамках:

grid
font-size: max(1rem, 15cqmin)
writing-mode: vertical-rl
line-height: 1.1cap

Пользуемся :)

#css #vertical #text

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

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

Правильно, на 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