#glassmorphism — Public Fediverse posts

Чтобы не выглядело как пет-проект»: как я в одиночку сделал премиальный интерфейс кино-сервиса (с кодом)

В прошлой статье я рассказывал, каково в одиночку тащить фуллстек-проект, который разросся до кино-соцсети. В комментариях несколько раз спросили про конкретику — «покажи код», «как сделал, что не выглядит как очередной пет-проект». Логично: дизайн — это то, по чему встречают. Поэтому держите вторую часть, уже техническую и с кодом. Без маркетинга, только решения, которые реально сделали интерфейс «дорогим», и пара бэкенд-хитростей в довесок. Сразу дисклеймер: я не дизайнер. Всё нажито методом «смотрю на референсы (Letterboxd, Mubi, KinoPoisk HD) и пытаюсь повторить ощущение». Оказалось, премиальность — это не про дорогие шрифты, а про несколько повторяющихся приёмов. Разберём пять. 1. Акцентный цвет из постера фильма — фича, которая дороже всего «продаёт» Самое заметное решение. Раньше у меня на всех страницах был один статичный фиолетовый акцент — и это выглядело дёшево и одинаково. Идея: пусть каждая страница фильма подсвечивается доминантным цветом его постера. Заходишь на мрачный нуар — интерфейс уходит в холодный синий, открываешь комедию — тёплый янтарь. Страница будто «сделана под этот фильм». Делается без всяких ML, прямо в браузере через canvas: рисуем постер в крошечный буфер 32×48, усредняем цвета (выкидывая чёрные рамки и серость), переводим в HSL и принудительно «насыщаем», потому что постеры часто тусклые. Результат кладём в CSS-переменную — и весь интерфейс подхватывает её.

https://habr.com/ru/articles/1037818/

#Nextjs #React #CSS #glassmorphism #canvas #Web_Push #VAPID #FastAPI #петпроект #vibemuvik

Чтобы не выглядело как пет-проект»: как я в одиночку сделал премиальный интерфейс кино-сервиса (с кодом)

В прошлой статье я рассказывал, каково в одиночку тащить фуллстек-проект, который разросся до кино-соцсети. В комментариях несколько раз спросили про конкретику — «покажи код», «как сделал, что не выглядит как очередной пет-проект». Логично: дизайн — это то, по чему встречают. Поэтому держите вторую часть, уже техническую и с кодом. Без маркетинга, только решения, которые реально сделали интерфейс «дорогим», и пара бэкенд-хитростей в довесок. Сразу дисклеймер: я не дизайнер. Всё нажито методом «смотрю на референсы (Letterboxd, Mubi, KinoPoisk HD) и пытаюсь повторить ощущение». Оказалось, премиальность — это не про дорогие шрифты, а про несколько повторяющихся приёмов. Разберём пять. 1. Акцентный цвет из постера фильма — фича, которая дороже всего «продаёт» Самое заметное решение. Раньше у меня на всех страницах был один статичный фиолетовый акцент — и это выглядело дёшево и одинаково. Идея: пусть каждая страница фильма подсвечивается доминантным цветом его постера. Заходишь на мрачный нуар — интерфейс уходит в холодный синий, открываешь комедию — тёплый янтарь. Страница будто «сделана под этот фильм». Делается без всяких ML, прямо в браузере через canvas: рисуем постер в крошечный буфер 32×48, усредняем цвета (выкидывая чёрные рамки и серость), переводим в HSL и принудительно «насыщаем», потому что постеры часто тусклые. Результат кладём в CSS-переменную — и весь интерфейс подхватывает её.

https://habr.com/ru/articles/1037818/

#Nextjs #React #CSS #glassmorphism #canvas #Web_Push #VAPID #FastAPI #петпроект #vibemuvik

Чтобы не выглядело как пет-проект»: как я в одиночку сделал премиальный интерфейс кино-сервиса (с кодом)

В прошлой статье я рассказывал, каково в одиночку тащить фуллстек-проект, который разросся до кино-соцсети. В комментариях несколько раз спросили про конкретику — «покажи код», «как сделал, что не выглядит как очередной пет-проект». Логично: дизайн — это то, по чему встречают. Поэтому держите вторую часть, уже техническую и с кодом. Без маркетинга, только решения, которые реально сделали интерфейс «дорогим», и пара бэкенд-хитростей в довесок. Сразу дисклеймер: я не дизайнер. Всё нажито методом «смотрю на референсы (Letterboxd, Mubi, KinoPoisk HD) и пытаюсь повторить ощущение». Оказалось, премиальность — это не про дорогие шрифты, а про несколько повторяющихся приёмов. Разберём пять. 1. Акцентный цвет из постера фильма — фича, которая дороже всего «продаёт» Самое заметное решение. Раньше у меня на всех страницах был один статичный фиолетовый акцент — и это выглядело дёшево и одинаково. Идея: пусть каждая страница фильма подсвечивается доминантным цветом его постера. Заходишь на мрачный нуар — интерфейс уходит в холодный синий, открываешь комедию — тёплый янтарь. Страница будто «сделана под этот фильм». Делается без всяких ML, прямо в браузере через canvas: рисуем постер в крошечный буфер 32×48, усредняем цвета (выкидывая чёрные рамки и серость), переводим в HSL и принудительно «насыщаем», потому что постеры часто тусклые. Результат кладём в CSS-переменную — и весь интерфейс подхватывает её.

https://habr.com/ru/articles/1037818/

#Nextjs #React #CSS #glassmorphism #canvas #Web_Push #VAPID #FastAPI #петпроект #vibemuvik

Чтобы не выглядело как пет-проект»: как я в одиночку сделал премиальный интерфейс кино-сервиса (с кодом)

В прошлой статье я рассказывал, каково в одиночку тащить фуллстек-проект, который разросся до кино-соцсети. В комментариях несколько раз спросили про конкретику — «покажи код», «как сделал, что не выглядит как очередной пет-проект». Логично: дизайн — это то, по чему встречают. Поэтому держите вторую часть, уже техническую и с кодом. Без маркетинга, только решения, которые реально сделали интерфейс «дорогим», и пара бэкенд-хитростей в довесок. Сразу дисклеймер: я не дизайнер. Всё нажито методом «смотрю на референсы (Letterboxd, Mubi, KinoPoisk HD) и пытаюсь повторить ощущение». Оказалось, премиальность — это не про дорогие шрифты, а про несколько повторяющихся приёмов. Разберём пять. 1. Акцентный цвет из постера фильма — фича, которая дороже всего «продаёт» Самое заметное решение. Раньше у меня на всех страницах был один статичный фиолетовый акцент — и это выглядело дёшево и одинаково. Идея: пусть каждая страница фильма подсвечивается доминантным цветом его постера. Заходишь на мрачный нуар — интерфейс уходит в холодный синий, открываешь комедию — тёплый янтарь. Страница будто «сделана под этот фильм». Делается без всяких ML, прямо в браузере через canvas: рисуем постер в крошечный буфер 32×48, усредняем цвета (выкидывая чёрные рамки и серость), переводим в HSL и принудительно «насыщаем», потому что постеры часто тусклые. Результат кладём в CSS-переменную — и весь интерфейс подхватывает её.

https://habr.com/ru/articles/1037818/

#Nextjs #React #CSS #glassmorphism #canvas #Web_Push #VAPID #FastAPI #петпроект #vibemuvik

🚀 GMD v26.05 — GNU Media Downloader

The modern React-powered release is here!

🎨 Glassmorphism dark UI with smooth animations
📹 Video downloads up to 1080p |
🎵 Multi-format audio
🔄 Batch convert video, audio & images
✂️ Media trimming with live preview
🌐 Full Arabic & English support
📦 AppImage | DEB | RPM ready to download

Free · Open Source · Built for GNU/Linux

🔗 https://salehgnutux.github.io/GMD/

#GNUTUX #GMD #FreeSoftware #GNU #Linux #OpenSource #yt_dlp #React #Electron #MediaDownloader #FOSS #GPLv3 #Glassmorphism #ContentCreation

🚀 GMD v26.05 — GNU Media Downloader

The modern React-powered release is here!

🎨 Glassmorphism dark UI with smooth animations
📹 Video downloads up to 1080p |
🎵 Multi-format audio
🔄 Batch convert video, audio & images
✂️ Media trimming with live preview
🌐 Full Arabic & English support
📦 AppImage | DEB | RPM ready to download

Free · Open Source · Built for GNU/Linux

🔗 https://salehgnutux.github.io/GMD/

#GNUTUX #GMD #FreeSoftware #GNU #Linux #OpenSource #yt_dlp #React #Electron #MediaDownloader #FOSS #GPLv3 #Glassmorphism #ContentCreation

🚀 GMD v26.05 — GNU Media Downloader

The modern React-powered release is here!

🎨 Glassmorphism dark UI with smooth animations

📹 Video downloads up to 1080p |

🎵 Multi-format audio

🔄 Batch convert video, audio & images

✂️ Media trimming with live preview

🌐 Full Arabic & English support

📦 AppImage | DEB | RPM ready to download

Free · Open Source · Built for GNU/Linux

🔗 https://salehgnutux.github.io/GMD/

#GNUTUX #GMD #FreeSoftware #GNU #Linux #OpenSource #yt_dlp #React #Electron #MediaDownloader #FOSS #GPLv3 #Glassmorphism #ContentCreation

🚀 GMD v26.05 — GNU Media Downloader

The modern React-powered release is here!

🎨 Glassmorphism dark UI with smooth animations 📹 Video downloads up to 1080p | 🎵 Multi-format audio 🔄 Batch convert video, audio & images ✂️ Media trimming with live preview 🌐 Full Arabic & English support 📦 AppImage | DEB | RPM ready to download

Free · Open Source · Built for GNU/Linux

🔗 https://salehgnutux.github.io/GMD/

#GNUTUX #GMD #FreeSoftware #GNU #Linux #OpenSource #yt_dlp #React #Electron #MediaDownloader #FOSS #GPLv3 #Glassmorphism #ContentCreation

An older thing I made on @codepen: icon glassmorphism nav!

Live demo https://codepen.io/thebabydino/pen/XWaVYZy

#CSS #SVG #glassmorphism #coding #web #dev #webDev #webDevelopment #code #frontend

Emoji glassmorphism nav on @codepen: https://codepen.io/thebabydino/pen/mdwYmWW

Because the glassmorphism effect just behind an emoji or a letter is a lot trickier than you might think.

Detailed write-up on @csstricks: https://css-tricks.com/icon-glassmorphism-effect-in-css/

#CSS #glassmorphism #emoji #emojicon #nav #navigation #code #coding #filter #web #dev #webDev #webDevelopment #frontend #cssFilter

Emoji glassmorphism nav on @codepen: https://codepen.io/thebabydino/pen/mdwYmWW

Because the glassmorphism effect just behind an emoji or a letter is a lot trickier than you might think.

Detailed write-up on @csstricks: https://css-tricks.com/icon-glassmorphism-effect-in-css/

#CSS #glassmorphism #emoji #emojicon #nav #navigation #code #coding #filter #web #dev #webDev #webDevelopment #frontend #cssFilter

Emoji glassmorphism nav on @codepen: https://codepen.io/thebabydino/pen/mdwYmWW

Because the glassmorphism effect just behind an emoji or a letter is a lot trickier than you might think.

Detailed write-up on @csstricks: https://css-tricks.com/icon-glassmorphism-effect-in-css/

#CSS #glassmorphism #emoji #emojicon #nav #navigation #code #coding #filter #web #dev #webDev #webDevelopment #frontend #cssFilter

Emoji glassmorphism nav on @codepen: https://codepen.io/thebabydino/pen/mdwYmWW

Because the glassmorphism effect just behind an emoji or a letter is a lot trickier than you might think.

Detailed write-up on @csstricks: https://css-tricks.com/icon-glassmorphism-effect-in-css/

#CSS #glassmorphism #emoji #emojicon #nav #navigation #code #coding #filter #web #dev #webDev #webDevelopment #frontend #cssFilter

Emoji glassmorphism nav on @codepen: https://codepen.io/thebabydino/pen/mdwYmWW

Because the glassmorphism effect just behind an emoji or a letter is a lot trickier than you might think.

Detailed write-up on @csstricks: https://css-tricks.com/icon-glassmorphism-effect-in-css/

#CSS #glassmorphism #emoji #emojicon #nav #navigation #code #coding #filter #web #dev #webDev #webDevelopment #frontend #cssFilter

shadcn-glass-ui: Glassmorphism поверх shadcn/ui без миграции

Привет, Хабр! Представляю shadcn-glass-ui — библиотеку React-компонентов с glassmorphism-эффектами, которая работает поверх существующих shadcn/ui проектов без миграции.

https://habr.com/ru/articles/979046/

#react #typescript #ui #glassmorphism #shadcn #tailwind #frontend #opensource #componentlibrary

#Design #Launches
Glass3D generator · Compose stylish frosted glass effects in CSS https://ilo.im/16544z

_____
#Generator #Glassmorphism #Glass #Effects #3D #WebDesign #Development #WebDev #Frontend #CSS

Show HN: CSS generator for a high-def glass effect
https://glass3d.dev/
#ycombinator #glass3D #glass_ui #glassmorphism #3d_ui #CSS_generator

Another year, another UI. Get ready for some pretty chonky box-shadow declarations…

box-shadow: inset -1.5px -1.5px 3px color-mix(in oklch, DarkSlateBlue, transparent 40%), inset 1px 1px 2px color-mix(in oklch, lightcyan, transparent 50%), 0px 10px 40px color-mix(in oklch, darkblue, transparent 70%);

and don't forget to play with backdrop-filter: blur()! 😅

#LiquidGlass #Glassmorphism

A few years ago, I wrote an article about creating an icon glassmorphism effect https://css-tricks.com/icon-glassmorphism-effect-in-css/

Hint: nowhere near as simple as when working with rectangular shapes!

At the time, Firefox didn't respect `clip-path`/ `mask` shapes for `backdrop-filter` - now that has changed! 🥳

Here's the final live demo on @codepen https://codepen.io/thebabydino/pen/mdwYmWW

#glassmorphism #emoji #CSS #filter #cssFilter #code #coding #fronted #web #dev #webDev #webDevelopment

Uh oh... the Linux brainrot has started once again... I want this...
Glassmorphism is like. so good. i need it.

(image taken from https://www.reddit.com/r/unixporn/comments/ys4nfs/hyprland_glassmorphism/#lightbox)

#Linux #Glassmorphism

#Design #Trends
Glassmorphism · Modern UI looks with the cool frosted glass effect https://ilo.im/15xvdb

_____
#Glassmorphism #3D #AR #VR #Content #Interactivity #Accessibility #ProductDesign #UiDesign #WebDesign

Saw this little demo I made a few months ago on #CodePen just got picked 🌟 https://codepen.io/thebabydino/pen/VwqgrrE

It's a little #glassmorphism + 3D thing. 😼

The concept behind the 3D part is something I detailed in an article well over 5 years ago! https://css-tricks.com/what-houdini-means-for-animating-transforms/

#css #3d #transform #cssFilter #glass #coding #frontend #webDev #webDevelopment

Anyway if you're into #glassmorphism effects https://github.com/web-platform-tests/interop/issues/564#issuecomment-1759136166

Started out as me coming across a GIF on Dribbble https://dribbble.com/shots/18943317-Animation

Within minutes, made this #CodePen demo:
✨ https://codepen.io/thebabydino/pen/VwqgrrE

But this demo animates CSS variables, so it can't work in Firefox.

Okay, no CSS vars animation version 🤷‍♀️
https://codepen.io/thebabydino/pen/OJrddJj

But we still hit 🪲 1816561 https://bugzilla.mozilla.org/show_bug.cgi?id=1816561#c2

So here's a fake 3D version https://codepen.io/thebabydino/pen/poqmJNa

#css #coding #frontend #webDev #webDevelopment