# 03 Anyagok, fény és felületi effektek | Astro Dizájn Elemek > Öt különböző anyagi hatás: CSS fagyott üveg, Three.js fénytörő üvegtest, szálcsiszolt fémek, shaderes folyékony képátmenet, selymes háló és 3D márkaplakett. *Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny* --- [Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 02](/autonom-weboldal/astro-dizajn-elemek/02-kamera-es-ter)[12](/autonom-weboldal/astro-dizajn-elemek)[04 →](/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras) [01Morphing](/autonom-weboldal/astro-dizajn-elemek/01-morphing)[02Kamera & Tér](/autonom-weboldal/astro-dizajn-elemek/02-kamera-es-ter)[03Anyagok & Fény](/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny)[04Tartalomfeltárás](/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras)[05Tipográfia](/autonom-weboldal/astro-dizajn-elemek/05-mozgo-tipografia)[06Termék 3D](/autonom-weboldal/astro-dizajn-elemek/06-terbeli-termek)[07UI & Átmenetek](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet)[08Karakter & Állapot](/autonom-weboldal/astro-dizajn-elemek/08-reagalo-karakter)[09Röntgen-látás](/autonom-weboldal/astro-dizajn-elemek/09-rontgen-latas)[10Élő Kalkulátor](/autonom-weboldal/astro-dizajn-elemek/10-elo-adat-es-kalkulator)[11Bento & Tér](/autonom-weboldal/astro-dizajn-elemek/11-bento-es-gorgetesi-ter)[12Mikro-UI & Hang](/autonom-weboldal/astro-dizajn-elemek/12-magneses-mikrointerakciok) 03 / 12 · Élő Bemutató 3. lépcső · Three.js 3D Kozmetika · Ékszer & Luxus · Hardver & Tech ✦ Weboldalon alkalmazva elérhető # Anyagként viselkedő felületek és fénytörés Fagyott CSS-üveg, valódi hátteret megtörő térbeli üvegtest, szálcsiszolt fémek, hullámzó képátmenet és selymes háló. PREMIUM CARD · GLASSMORPHISM #### Fényáteresztő felület Ez valódi, éles HTML szövegtartalom egy CSS `backdrop-filter` elmosású panelen. Nem előre exportált grafika. **100%** Natív CSS motor **0 ms** CLS terhelés Állapot: **CSS elmosás aktív (16px)** ### A. Fagyott üveg — CSS A háttérben mozgó geometriai formák színeit lágyan összemossa a felette elhelyezkedő áttetsző réteg. Olvasható szöveget és prémium mélységet ad 0 KB extra könyvtárral. Pontos megnevezés: „CSS-háttérelmosás, stilizált üveghatás”. Ez nem számol optikai fénytörést (IOR). Elmosás mértéke (Blur): 16px Panel áttetszőség: 70% AIRanking.pro Optikai modell: **Three.js MeshPhysicalMaterial (Fénytörés + Vastagság)** ### B. Térbeli üveg — Three.js Valódi 3D optikai fénytörés. Az üvegtest mögött lévő sakktábla és geometriai elemek torzulnak az üveg vastagsága, érdessége és törésmutatója (IOR) alapján. **Különbség az A változathoz képest:** Nem pusztán elmos, hanem optikailag elhajlítja a mögötte lévő fénysugarakat. Érdesség (Roughness): 0.10 Vastagság (Thickness): 1.4 ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Textúrakép feltöltése Kép AIRanking.pro Kiválasztott fém: **24K Arany (Matt fémes)** ### C. Szálcsiszolt fémek Magas fémes tényezőjű (Metalness: 0.95), procedurális stúdiófényekkel megvilágított anyag. Nem lapos sárga vagy szürke műanyag, hanem dinamikus tükröződést mutató felület. Fém típus: Szálcsiszolási finomság: 0.25 ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Termékkép feltöltése Kép Átmenet: **0% (1. Kép — Építészet)** ### D. Folyékony képátmenet Két vizuális állapot közötti hullámzó, folyadékszerű áttűnés. A kezdő (0%) és záró (100%) pozíciókban a képek kristálytiszták és torzításmentesek. Pontos megnevezés: „Stilizált shaderes torzítás”. Nem komplex Navier-Stokes fizikai folyadékszimuláció. Átmenet vezérlése (0–100%): 0% ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ 1. Kép (Fő) Kép 🖼️ 🖼️ 2. Kép (Átmenet) Előtte kép Téma: **Kozmetikai selyem (Meleg barack / arany)** ### E. Selymes felületháló Procedurális hullámzással mozgatott 3D síkháló lágy fény-árnyék játékkal. Kiváló luxuskozmetikai vagy elvont digitális technológiai háttérelemként. Pontos megnevezés: „Procedurális hálódeformáció”, nem teljes szövetszimuláció. Színvilág: Hullámzási sebesség: 1.0× TÁRGYALÁSI DEMÓ Összehasonlítás: Sablon termékbadge vs. Élő 3D Márkaplakett AIRanking.pro ## Exkluzív anyagminőség & Fénytörés a weben A látogató ujja vagy kurzora alatt valódi fém- és üvegfelületek csillannak meg. A stúdiófények és tükröződések nem statikus grafikák, hanem valós időben reagálnak az interakcióra. Plakett anyaga valós időben: ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ 1. Termékkép Kép 🖼️ 🖼️ 2. Termékkép Előtte kép **AIRanking.pro** Hagyományos 2D lapos badge Merev síkbeli grafika. Nincs forgatás, nincs fizikai fénytörés vagy csillogás. 👆 Húzd az egeret vagy az ujjad a 3D plakett forgatásához ⚙️ **Hogyan működik? & Technikai adatok** 2. Szint · 2D Canvas & WebGL Grafikai motor **Three.js WebGL (MeshPhysicalMaterial + PBR Shaders) & natív CSS backdrop-filter** Eszköz DPR korlát **Math.min(DPR, 2)** Életciklus védelem **Rejtett lapon automatikusan leáll** Hozzáférhetőség **prefers-reduced-motion támogatott** Three.js fizikai alapú renderelés (PBR) fénytöréssel (IOR: 1.52), érdességgel és fémességgel. A renderhurok a requestAnimationFrame ciklushoz igazodik, és a böngészőlap elrejtésekor (visibilitychange) azonnal felfüggeszti a GPU számításokat. Becsült ráta: **--** FPS (Helyi mérés, eszközfüggő) ✦ Ügyfél-Márka Stúdió ## Személyre Szabás Tárgyaláshoz Márkapreset kiválasztása: Cégnév / Márkanév: Rövid ajánlat / Főcím: CTA Gomb felirat: Márkaszínek: Főszín (Elsődleges): Akcentszín (Másodlagos): Ügyfél Logó feltöltése (PNG, SVG, WebP · max 8 MB): 📁 Húzd ide a logófájlt, vagy **kattints a tallózáshoz** Transzparens PNG vagy tiszta SVG ajánlott Logó-kontraszt párna (fehér/sötét logókhoz): Termék- vagy Referenciakép (max 8 MB): 🖼️ Húzd ide a referenciaképet vagy termékfotót Használható a 01, 03, 04, 06, 07 és 11 modulokban Másodlagos / „Előtte” Képfeltöltés (pl. összehasonlításhoz · max 8 MB): 🖼️ Húzd ide az „Előtte” képet vagy másodlagos referenciát Használható a 03 és 04 modulokban az összehasonlító és folyékony átmenetekhez **Színek javaslata a feltöltött képből:** Kiolvastuk a domináns márkaszíneket a grafikából. **Megjegyzés ezen az eszközön** Alapértelmezésben a beállítások csak a jelenlegi böngészőlap bezárásáig élnek. 🔒 **100% Helyi adatvédelem:** A kiválasztott fájlok és márkanevek feldolgozása helyben, ebben a böngészőben történik; a bemutatóterem nem tölti fel őket szerverre és nem küldi analitikának. TÁRGYALÁSI KONCEPCIÓ ## Kiválasztott Elemek 0 db ☆ ### Még nincs kiválasztott dizájnelem Bármelyik modulban kattints a **„☆ Hozzáadás a koncepcióhoz”** gombra a kedvenc megoldások és beállított csúszkaértékek elmentéséhez! 🔒 Helyi exportálás: a fájlok nem mennek szerverre vagy CRM-be. ⛶ MOZIMÓD Élő Színpad