⭐ 0
🔍
Текст Слика ПДФ и документи Аудио Музика Електроника Време Комуналне услуге Валидатори Езотерично Игре

Генератор стакленог морфизма

Подесите картицу од мат стакла – замућење, нијансу, истицање ивице, полупречник угла и сенку – са прегледом који лебди изнад стварно анимиране позадине, тако да је квалитет замућења видљив у покрету.

🔒 У потпуности се обрађује у вашем претраживачу — ништа што овде унесете се никада не отпрема.

12px
20px
20
40
1px
30px

Картица од мат стакла

Ова картица лебди изнад непрестано покретне позадине тако да можете проценити замућење у покрету, а не на равном узорку.

Обрада... 0%

Резултат

backdrop-filter: blur() је CSS својство које стоји иза изгледа мат стакла – провидан панел који замућује све што се креће иза њега, уместо да само затамњује равну боју. Проблем је у томе што је квалитет замућења готово немогуће проценити на статичном узорку; делује уверљиво тек када нешто заиста пролази иза њега, баш као на правом сајту са садржајем, видео снимком или анимираним херо делом. Овај генератор поставља прегледну картицу изнад стварно анимиране позадине уместо непокретне, па је оно што видите док повлачите клизаче управо оно што ће посетиоци доживети.

Позадина је права CSS анимација: велики linear-gradient исцртан на 400% величине елемента, са @keyframes који кружно помера његов background-position напред-назад – без JavaScript петље за анимацију, без canvas елемента, само иста техника померања позадине каква се користи у продукцијским херо секцијама. Замућење, боја и провидност нијансе, боја/провидност/ширина истицања ивице, полупречник угла и мекоћа сенке – све то покреће живе стилове плутајуће картице, а CSS оквир за копирање пресликава исте те вредности.

Не подржава сваки прегледач backdrop-filter, па генератор даје и стварни блок @supports not (backdrop-filter: blur(1px)) – не симболичан, већ резервно правило са сопственом бојом позадине израчунатом на основу ваше стварне провидности нијансе. Пошто прозирност без замућења изгледа знатно лошије (све што је иза пробија се незамућено), резервна варијанта аутоматски подиже alpha канал изнад одабране провидности нијансе, а коментар у генерисаном CSS-у објашњава тачно зашто и за колико.

Све се израчунава и приказује у вашем прегледачу: без отпремања, без налога, без комуникације са сервером. Копирајте CSS када картица изгледа добро, поставите га на било који елемент који желите да буде изнад фотографије, видео снимка или градијента, и задржите блок @supports како би и старији прегледачи добили читљиву, непрозирнију картицу уместо једва видљиве.

Уживате у овом алату? Мислите да је овај производ користан? Видите потенцијал у њему и желите да га подржите?

🛡️
Извршава се у прегледачу

Ваши фајлови и уноси никада не напуштају овај уређај. Обрада се одвија потпуно офлајн. 100% безбедно.

Прихваћени формати и правила

  • Контроле за замућење, боју/провидност нијансе, боју/провидност/ширину истицања ивице, полупречник угла и мекоћу сенке – све раде уживо.
  • Анимиран CSS градијент позадине иза картице остварен стварном @keyframes петљом background-position, тако да је мат замућење видљиво у односу на аутентични покрет.
  • CSS за копирање укључује и стварни блок @supports not (backdrop-filter) са аутоматски вишом непрозирношћу, пропраћен коментарима и објашњењима.

Кључне предности

✓ Прегледна картица лебди изнад непрестано покретног градијентног позадинског слоја, тако да замућење процењујете онако како ће га посетиоци заиста доживети – у покрету, а не на равном узорку.
✓ Излазни кôд испоручује стварну резервну варијанту @supports not (backdrop-filter) чија је непрозирност израчуната на основу вашег подешавања нијансе, а не унапред претпостављене вредности.
✓ Свака контрола – замућење, нијанса, истицање ивице, полупречник, мекоћа сенке – ажурира активну картицу и CSS спреман за копирање при сваком повлачењу.

Случајеви коришћења

  • • Дизајнирајте замућени навбар или модал и процените квалитет замућења на покретној позадини уместо на статичној палети боја.
  • • Подесите суптилно истицање ивице и мекоћу сенке за картицу са ценовником, а затим копирајте CSS који већ садржи пристојан fallback за старије прегледаче.
  • • Проверите колико прозирност тона треба да порасте у @supports fallback-у пре него што пошаљете у продукцију херо секцију са ефектом замућеног стакла.