Media is too big
VIEW IN TELEGRAM
#статья дня
Я знаю, знаю — вас всех уже достали различные реализации 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
Я знаю, знаю — вас всех уже достали различные реализации 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
❤9👍2🤡1
This media is not supported in your browser
VIEW IN TELEGRAM
#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 #бородач
Признавайтесь, кто в 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 #бородач
👍12❤3
#фишка дня
Что раздражает больше, чем незагрузившаяся картинка?
Правильно, дефолтное оформление этих самых картинок!
В Firefox просто будет alt-текст, Chrome ещё добавит какую-то убогую иконку из девяностых... ну такое.
Что же делать?
А решение простое: когда картинка не загрузилась, её контейнер подчиняется основным блочным правилам, а значит, на него можно набросить псевдоэлементы!
Чтобы было понятно, что конкретно не загрузилось — стоит ещё и
К слову, обратите внимание на пример: https://codepen.io/alinaki/pen/qEdEZOK
Там ещё и старый трюк с переводом строк без использования
Кстати, почему не
Оформляйте картинки правильно, котаны!
#css #img
Что раздражает больше, чем незагрузившаяся картинка?
Правильно, дефолтное оформление этих самых картинок!
В Firefox просто будет alt-текст, Chrome ещё добавит какую-то убогую иконку из девяностых... ну такое.
Что же делать?
А решение простое: когда картинка не загрузилась, её контейнер подчиняется основным блочным правилам, а значит, на него можно набросить псевдоэлементы!
Чтобы было понятно, что конкретно не загрузилось — стоит ещё и
attr(alt)
докинуть.
img::after {
content: "Image of " attr(alt) "\A is not found 😞";
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
background: #eee;
border: 2px dashed;
white-space: pre-wrap;
color: #AA0000;
}
К слову, обратите внимание на пример: https://codepen.io/alinaki/pen/qEdEZOK
Там ещё и старый трюк с переводом строк без использования
br
использован: \A
+ pre-wrap
.Кстати, почему не
::before
, а ::after
? Да потому что Firefox занимает ::before
под отображение alt и некоторые средства доступности могут этим пользоваться.Оформляйте картинки правильно, котаны!
#css #img
👍30❤5
This media is not supported in your browser
VIEW IN TELEGRAM
#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 и
Дичь совершенная.
#css #minecraft
Просыпайся, страна! 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
1👍27🤩9🫡6❤4
#фишка дня
Многие недооценивают css variables, особенно при небольшой поддержке javascript.
Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).
Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве
Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob
#css #var
Многие недооценивают css variables, особенно при небольшой поддержке javascript.
Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).
Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве
--client-id
и изменили один раз для шапки/подвала/сайдбара.Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob
#css #var
codepen.io
Dynamic button text with css variable
...
❤9👍1🫡1
#фишка дня
...от Ахмада Шадида, уже хорошо нам известного.
Как отменить скругление углов на мобиле, но оставить на дестопе?
Конечно, можно написать медиазапросы. Конечно, можно подождать реализации if()...
А можно просто:
Или так:
Вообще, вот статья на тему: https://ishadeed.com/article/conditional-border-radius/
А вот так будем делать в будущем:
#css #clamp #math
...от Ахмада Шадида, уже хорошо нам известного.
Как отменить скругление углов на мобиле, но оставить на дестопе?
Конечно, можно написать медиазапросы. Конечно, можно подождать реализации if()...
А можно просто:
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
Или так:
clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
Вообще, вот статья на тему: https://ishadeed.com/article/conditional-border-radius/
А вот так будем делать в будущем:
border-radius: if(100% < 100vw: 8px; else: 0px);
#css #clamp #math
1👎40❤6🫡6🤩1
Media is too big
VIEW IN TELEGRAM
#фишка дня
Использование
А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
Обратите внимание,
А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).
#css #scroll #state
Использование
position: sticky
уже так-то стало обыденностью.А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
@container scroll-state(stuck: top) {
.pip {
width: 200px;
transform: translate(-50%, 0%)
translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
}
}
Обратите внимание,
translate
можно складывать, получая интересную математику в итоге :)А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).
#css #scroll #state
👍24❤14
#видео дня
А это что это? А это Юлия Миоцен вернулась (вот ссылка на первую часть) со второй частью обучающих видео по 3D в CSS!
Вот: https://www.youtube.com/watch?v=2FEgcYfiTEM
Напомню, что в прошлый раз мы с вами рисовали воксельных животных.
На этот раз речь пойдёт об освещении: где размещать источник света, как рассчитывать и строить тень, какого цвета эта самая тень должна быть.
Есть и текстовая версия с примерами: https://miocene.io/post/light-and-shadow-in-css/
Как и в прошлый раз, стоит отметить: возможно, вы никогда в жизни не будете рисовать животных на своих страницах. Но на промо-сайтах чего только не бывает, переворачивающиеся толстые карточки — несите их сюда!
#css #3d #light
А это что это? А это Юлия Миоцен вернулась (вот ссылка на первую часть) со второй частью обучающих видео по 3D в CSS!
Вот: https://www.youtube.com/watch?v=2FEgcYfiTEM
Напомню, что в прошлый раз мы с вами рисовали воксельных животных.
На этот раз речь пойдёт об освещении: где размещать источник света, как рассчитывать и строить тень, какого цвета эта самая тень должна быть.
Есть и текстовая версия с примерами: https://miocene.io/post/light-and-shadow-in-css/
Как и в прошлый раз, стоит отметить: возможно, вы никогда в жизни не будете рисовать животных на своих страницах. Но на промо-сайтах чего только не бывает, переворачивающиеся толстые карточки — несите их сюда!
#css #3d #light
❤14
#til дня
Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?
Мне — нет. Но вот сейчас почти да.
Вы знали, что вот уже пару лет как
Что я имею в виду: у тебя раньше был выбор,
Выходит какой-то бред, как мне посчитать второй элемент с классом
И вот чего я не знал, это что
Ведь счастье так возможно. Стефан Юдис мне это показал.
Вот, Baseline 2023: https://caniuse.com/css-nth-child-of
И демо: https://codepen.io/alinaki/pen/LYKXWYo
Я, короче, очень доволен.
#css #nth #фишка #бородач
Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?
Мне — нет. Но вот сейчас почти да.
Вы знали, что вот уже пару лет как
nth-child
в CSS стал нормальным?Что я имею в виду: у тебя раньше был выбор,
nth-child
для индексации узлов aka тегов любого вида или nth-of-type
для индексации конкретного типа узла (`div`, p
, `section`).Выходит какой-то бред, как мне посчитать второй элемент с классом
.star
?И вот чего я не знал, это что
nth-child
может принимать селектор в виде аргумента of
!:nth-child(2 of .star) {
background: red;
}
Ведь счастье так возможно. Стефан Юдис мне это показал.
Вот, Baseline 2023: https://caniuse.com/css-nth-child-of
И демо: https://codepen.io/alinaki/pen/LYKXWYo
Я, короче, очень доволен.
#css #nth #фишка #бородач
❤26👍9
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
От перемены мест слагаемых сумма не меняется, не правда ли?
А если речь о композиции? Например, композиции трансформаций в CSS?
Ну, вот, например раз:
и два
Это одно и то же, или нет? Так-то ответ интуитивен: нет, не одно и то же. Школьного курса математики должно хватить для понимания. Ну, окей.
А вот если так, три:
Что-то резко стало сложно, не правда ли? А что если я вам скажу, что итог номера три равнозначен итогу номера два? И именно он приведён на видео к посту.
Почему так? Потому что браузер немножечкосходит с ума от того преобразует то, что от него требуют, и организует переданные значения в единую матрицу преобразований, нивелируя порядок translate и scale.
А подробнее об этом в статье Джейка Арчибальда: https://jakearchibald.com/2025/animating-zooming/
CSS, конечно, прекрасен.
#css #transform #matrix
От перемены мест слагаемых сумма не меняется, не правда ли?
А если речь о композиции? Например, композиции трансформаций в CSS?
Ну, вот, например раз:
.demo {
transition: transform 1s ease;
}
.demo.zoom {
transform: scale(3) translate(-33.1%, 20.2%);
}
и два
.demo {
transition: transform 1s ease;
}
.demo.zoom {
transform: translate(-33.1%, 20.2%) scale(3);
}
Это одно и то же, или нет? Так-то ответ интуитивен: нет, не одно и то же. Школьного курса математики должно хватить для понимания. Ну, окей.
А вот если так, три:
.demo {
transition: transform 1s ease;
transform: rotate(0);
}
.demo.zoom {
transform: scale(3) translate(-33.1%, 20.2%);
}
Что-то резко стало сложно, не правда ли? А что если я вам скажу, что итог номера три равнозначен итогу номера два? И именно он приведён на видео к посту.
Почему так? Потому что браузер немножечко
А подробнее об этом в статье Джейка Арчибальда: https://jakearchibald.com/2025/animating-zooming/
CSS, конечно, прекрасен.
#css #transform #matrix
🤩6❤4🫡2
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.
Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота":
Пример: https://codepen.io/t_afif/pen/XWQMPqY
#css #animation #transform #trick #бородач
Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.
Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота":
.box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}
Пример: https://codepen.io/t_afif/pen/XWQMPqY
#css #animation #transform #trick #бородач
👍8❤1
#фишка дня
Electron так сильно пытается мимикрировать под нативные приложения, что доходит до абсурда.
Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!
Вот вам
Что это правило делает?
А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.
И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.
Чудны дела. А вот и ссылка на доку: https://www.electronjs.org/docs/latest/api/corner-smoothing-css
#css #squircle #macos #electron
Electron так сильно пытается мимикрировать под нативные приложения, что доходит до абсурда.
Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!
Вот вам
-electron-corner-smoothing
!Что это правило делает?
А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.
И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.
.box {
width: 128px;
height: 128px;
background-color: cornflowerblue;
border-radius: 24px;
-electron-corner-smoothing: system-ui; /* Match the system UI design. */
}
Чудны дела. А вот и ссылка на доку: https://www.electronjs.org/docs/latest/api/corner-smoothing-css
#css #squircle #macos #electron
🫡9❤4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Раз :has уже везде, грех не воспользоваться. Тем более, некоторые селекторы получаются весьма угарными.
Например, как затемнить все элементы, кроме того, на который наведена мышь?
Вот как-то так:
Собственно: https://codepen.io/alinaki/pen/XWGdadP
Впрочем, похожий, хоть и не настолько гибкий, эффект достигается и без :has:
Пруф: https://codepen.io/alinaki/pen/OJqNjWb
На самом деле, он не ровно такой же, он даже во многих ситуациях может оказаться лучше. Просто потому что промежутки между карточками тоже учтены.
Но тут кому как, конечно.
#css #trick #hover #бородач
Раз :has уже везде, грех не воспользоваться. Тем более, некоторые селекторы получаются весьма угарными.
Например, как затемнить все элементы, кроме того, на который наведена мышь?
Вот как-то так:
main:has(article:hover) article:not(:hover) {
opacity: 0.3;
}
Собственно: https://codepen.io/alinaki/pen/XWGdadP
Впрочем, похожий, хоть и не настолько гибкий, эффект достигается и без :has:
main:hover article:not(:hover) {
opacity: 0.3;
}
Пруф: https://codepen.io/alinaki/pen/OJqNjWb
На самом деле, он не ровно такой же, он даже во многих ситуациях может оказаться лучше. Просто потому что промежутки между карточками тоже учтены.
Но тут кому как, конечно.
#css #trick #hover #бородач
1❤14👍10
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня от Jhey
Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.
Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!
Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:
Вуаля, вы великолепны!
Естественно, символы надо определить заранее:
The Matrix has you.
А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY
#css #var #flip #бородач
Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.
Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!
Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:
button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}
Вуаля, вы великолепны!
Естественно, символы надо определить заранее:
<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>
The Matrix has you.
А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY
#css #var #flip #бородач
❤15👍12🤡1
This media is not supported in your browser
VIEW IN TELEGRAM
#такое дня
Не открывайте этот кодпен, если не хотите повесить ваш Chrome!
https://codepen.io/chasewackerfuss/pen/JKGrJJ
Да-да, не вкладку, а весь браузер. Закрыть-то её можно, но на MacBook на M2 Pro я смог это сделать только через минуту.
Изоляция вкладок, говорили они. Нестинг и анимации не будут влиять на производительность стилей, твердили они... Ха-ха.
У Safari, кстати, всё хорошо. А Firefox сильно тормозит, но не так и не настолько плохо, как Chrome. И весь браузер не вешается.
#codepen #css #nesting #fail
Не открывайте этот кодпен, если не хотите повесить ваш Chrome!
https://codepen.io/chasewackerfuss/pen/JKGrJJ
Да-да, не вкладку, а весь браузер. Закрыть-то её можно, но на MacBook на M2 Pro я смог это сделать только через минуту.
Изоляция вкладок, говорили они. Нестинг и анимации не будут влиять на производительность стилей, твердили они... Ха-ха.
У Safari, кстати, всё хорошо. А Firefox сильно тормозит, но не так и не настолько плохо, как Chrome. И весь браузер не вешается.
#codepen #css #nesting #fail
🤩6❤5🤡4🫡1
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
❤16🤩5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно:
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.
Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.
И да, поддерживается везде.
#css #has #appearance #бородач
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
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 #бородач
❤13👍4
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Каждому смотрящему сериалы известно, что один из самых лучших способов сделать текст субтитров видимым на практически любом фоне — это добавить инверсную обводку.
Белый контур для чёрного текста, чёрный — для белого (внезапно).
Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько.
Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями.
И есть ещё!
Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть).
Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же.
Поэтому
#css #stroke #outline
Каждому смотрящему сериалы известно, что один из самых лучших способов сделать текст субтитров видимым на практически любом фоне — это добавить инверсную обводку.
Белый контур для чёрного текста, чёрный — для белого (внезапно).
Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько.
Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями.
И есть ещё!
-webkit-text-stroke-color
Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть).
Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же.
Поэтому
paint-order: stroke
нам в помощь! Таким образом, штрих будет отрисован первым, натуральным образом превратившись в обводку (при достаточной толщине, конечно же):
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: var(--stroke);
paint-order: stroke;
#css #stroke #outline
❤16👍6🫡3
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
А помните (конечно же помните!) как мы с вами обсуждали CSS Custom Highlight API для реализации подсветки кода?
Ну вот же, положила: https://t.me/htmlshit/2715
Так вот, а почему бы не объединить подсветку CSS с поиском по тексту? Ну в самом деле, интересно же, как это реализовано, например, в текстовых редакторах или браузерах при поиске по странице. Хотя бы на минимальном уровне.
А реализовано это через, простите, обход дерева!
Алгориииииитмы
Ладно, нам не придётся самим писать обходчик, он уже имеется! Вот: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
Главное — это понять, какой параметр фильтрации узлов передать. Ведь объектная модель документа она не только из тегов состоит, там как минимум параллельно идут атрибуты, текст, комментарии... Нам незачем искать вообще по всему.
Ну в нашем случае всё просто: NodeFilter.SHOW_TEXT — ищем по текстовым нодам, словам.
Ну а дальше всё просто: проверяем регуляркой на совпадения и запускаем подсветку. Уж это за нас теперь может и браузер делать: https://codepen.io/alinaki/pen/zxvPbRJ
Да, теперь можно и ваших камтомных селектах красиво подсветить результат фильтрации.
Пользуемся, котаны.
#css #highlight
А помните (конечно же помните!) как мы с вами обсуждали CSS Custom Highlight API для реализации подсветки кода?
Ну вот же, положила: https://t.me/htmlshit/2715
Так вот, а почему бы не объединить подсветку CSS с поиском по тексту? Ну в самом деле, интересно же, как это реализовано, например, в текстовых редакторах или браузерах при поиске по странице. Хотя бы на минимальном уровне.
А реализовано это через, простите, обход дерева!
Алгориииииитмы
Ладно, нам не придётся самим писать обходчик, он уже имеется! Вот: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
Главное — это понять, какой параметр фильтрации узлов передать. Ведь объектная модель документа она не только из тегов состоит, там как минимум параллельно идут атрибуты, текст, комментарии... Нам незачем искать вообще по всему.
Ну в нашем случае всё просто: NodeFilter.SHOW_TEXT — ищем по текстовым нодам, словам.
Ну а дальше всё просто: проверяем регуляркой на совпадения и запускаем подсветку. Уж это за нас теперь может и браузер делать: https://codepen.io/alinaki/pen/zxvPbRJ
Да, теперь можно и ваших камтомных селектах красиво подсветить результат фильтрации.
Пользуемся, котаны.
#css #highlight
❤13👍7🤩2
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Как решить главную проблему бесконечной бегущей строки?
При создании бегущей строки (marquee, да) в CSS всегда встаёт вопрос: в какой момент элементу нужно «перепрыгнуть» в начало, чтобы анимация выглядела непрерывной? Если рассчитать неправильно — появляются рывки или пустые промежутки.
Как правило, это решается или через JavaScript, или дублированием элементов до какого-то неразумного предела. Или и так и так.
В статье на Frontend Masters уже так хорошо знакомым нам Темани Афифом (он автор CSS Shape) предложен современный способ, где эта проблема решается автоматически.
Используются новые функции sibling-index() и sibling-count(). Они позволяют CSS «понимать», какой по счёту элемент в наборе и сколько всего элементов.
На основе этих данных каждому элементу назначается своя задержка старта анимации. Это делается через формулу: задержка = индекс * (общая_длительность / количество_элементов).
Путь движения задаётся через offset: shape(...), а сама анимация повторяется бесконечно (infinite linear).
В результате элементы выстраиваются один за другим и «зацикливаются» без единого рывка — всё считается динамически, без ручных правок.
И самое приятное: HTML остаётся простым <div> с изображениями, а вся магия — в десятке строк CSS!
Почитайте, очень круто вышло.
#css #marquee
Как решить главную проблему бесконечной бегущей строки?
При создании бегущей строки (marquee, да) в CSS всегда встаёт вопрос: в какой момент элементу нужно «перепрыгнуть» в начало, чтобы анимация выглядела непрерывной? Если рассчитать неправильно — появляются рывки или пустые промежутки.
Как правило, это решается или через JavaScript, или дублированием элементов до какого-то неразумного предела. Или и так и так.
В статье на Frontend Masters уже так хорошо знакомым нам Темани Афифом (он автор CSS Shape) предложен современный способ, где эта проблема решается автоматически.
Используются новые функции sibling-index() и sibling-count(). Они позволяют CSS «понимать», какой по счёту элемент в наборе и сколько всего элементов.
На основе этих данных каждому элементу назначается своя задержка старта анимации. Это делается через формулу: задержка = индекс * (общая_длительность / количество_элементов).
Путь движения задаётся через offset: shape(...), а сама анимация повторяется бесконечно (infinite linear).
В результате элементы выстраиваются один за другим и «зацикливаются» без единого рывка — всё считается динамически, без ручных правок.
И самое приятное: HTML остаётся простым <div> с изображениями, а вся магия — в десятке строк CSS!
Почитайте, очень круто вышло.
#css #marquee
1👍17❤3