ran
فارسی

Glass

یک سطح شیشه سیال / مات. <r-glass> هرچه پشتش باشد را مات و شکسته نشان می‌دهد: backdrop-filter با blur و saturate برای حس مات، یک feDisplacementMap در SVG برای خم‌شدن سیال نور، به‌علاوه یک لبه و یک درخشش بازتابی تا چشم آن را شیشه بخواند. همه چیز با توکن اداره می‌شود؛ محتوا در اسلات پیش‌فرض می‌نشیند.

کجا به کار می‌آید: وقتی یک صفحه نیمه‌شفاف روی محتوای پررنگ و شلوغ می‌خواهید (یک کارت شاخص، یک نوار ابزار شناور، یک لایه روی ویدیو). اتریبیوت displace تعیین می‌کند چقدر سیال به نظر برسد (۰ یعنی یک شیشه مات صاف). هرجا backdrop-filter نباشد، همه جلوه‌ها به یک سطح نیمه‌شفاف ساده افت می‌کنند.

زمین بازی

شیشه را روی صحنه بکشید، هر اتریبیوت را تنظیم کنید و دقیقاً همان مارک‌آپ را کپی کنید. مقادیر پیش‌فرض همان ظاهر متریال مات iOS است.

پنل شیشه‌ای مات
بکشیدش · تنظیم‌ها را تغییر دهید
<r-glass blur="16" saturate="180" displace="8" radius="24">
  …
</r-glass>
<r-glass displace="8">
  <div class="panel">…</div>
</r-glass>

<r-glass> را روی محتوای رنگی یا شلوغ بگذارید؛ روی یک پس‌زمینه یکدست این جلوه دیده نمی‌شود.

تودرتویی

<r-glass> ترکیب‌پذیر است: یکی را داخل دیگری بگذارید تا متریال لایه‌لایه شود (مثلاً یک نوار ابزار شیشه‌ای روی یک پنل شیشه‌ای). هر لایه آنچه را پشت خودش است می‌شکند.

پنل بیرونی
نوار ابزار شیشه‌ای تودرتو
 
<r-glass radius="26">
  <div class="panel">
    پنل بیرونی
    <r-glass radius="16" displace="6">
      <div class="toolbar">نوار ابزار شیشه‌ای تودرتو</div>
    </r-glass>
  </div>
</r-glass>

مرجع API

ویژگی‌ها

ویژگی نوع پیش‌فرض توضیح
blur number 16 شعاع تاری پس‌زمینه، بر حسب پیکسل (میزان مات‌شدن).
saturate number 180 اشباع پس‌زمینه، به درصد: رنگ آنچه پشت شیشه است را بالا می‌کشد.
displace number 8 شدت شکست سیال (مقیاس جابه‌جایی SVG). 0 یعنی شیشه مات صاف؛ هرچه بیشتر، موج‌دارتر.
frequency number 0.005 فرکانس پایه آشفتگی: مقدارهای کوچک‌تر موج‌های بزرگ‌تر و نرم‌تر می‌دهند.
radius number 20 شعاع گوشه‌ها، بر حسب پیکسل.
tint string ملایم ته‌رنگ پرکننده شیشه: هر مقدار background در CSS.
sheen boolean false گذر بازتابی متحرک روی سطح.
interactive boolean false بالا آمدن با هاور و کوچک‌شدن با فشار، برای شیشه‌ای که کلیک می‌شود. میزبان را به دکمه‌ای قابل استفاده با صفحه‌کلید هم تبدیل می‌کند: role="button"، توقف Tab، و Enter/Space مثل کلیک.
rim boolean false لبه بازتابی و حاشیه رنگی اختیاری، برای نوری فیزیکی‌تر. اول WebGL (همیشه و همگام)، و اگر در دسترس باشد در پس‌زمینه به‌طور نامحسوس به WebGPU ارتقا می‌یابد. اگر هیچ‌کدام نبود، به گرادیان بازتابی CSS برمی‌گردد.

شکست نور displace

displace مقیاس feDisplacementMap در SVG را می‌راند: اینکه نور با چه شدتی هنگام عبور از سطح خم می‌شود. برای یک شیشه مات ساده آن را 0 بگذارید.

displace = 0
displace = 60
 
<r-glass displace="0">…مات صاف…</r-glass> <r-glass displace="60">…سیال…</r-glass>

درخشش و تعامل

sheen یک درخشش بازتابی متحرک اضافه می‌کند؛ interactive بالا آمدن با هاور و یک فشار فنری می‌افزاید (با توکن مشترک --ran-motion-ease-spring).

نشانگر را ببرید و فشار دهید
 
<r-glass sheen interactive displace="36">
  <div>نشانگر را ببرید و فشار دهید</div>
</r-glass>

Rim — لبه بازتابی روی GPU (اختیاری)

rim یک لایه درخشش دوم اضافه می‌کند: یک لبه بازتابی که از یک جهت نور ثابت در بالا-چپ روشن می‌شود، به‌علاوه یک حاشیه رنگی (RGB) بسیار ملایم روی مرز گردشده پنل. برخلاف شکست displace، این لایه هرگز از پس‌زمینه نمونه‌برداری نمی‌کند: شیدر تنها عرض، ارتفاع و شعاع گوشه خود پنل را می‌داند، پس هیچ‌یک از هزینه‌های تعامل و دسترس‌پذیری را که یک رویکرد GPUی تمام‌پس‌زمینه تحمیل می‌کند نمی‌پردازد (به یادداشت‌ها نگاه کنید). این فقط یک لایه تزئینی روی همان مات backdrop-filter است؛ روشن یا خاموش کردنش هرگز آنچه پشت شیشه است یا شیوه نمونه‌برداری از آن را تغییر نمی‌دهد.

نخست با WebGL رسم می‌شود (همگام، و عملاً در هر مرورگری کار می‌کند، پس این لبه هیچ‌وقت اولین رسم خودش را عقب نمی‌اندازد) و اگر مرورگر WebGPU داشته باشد، در پس‌زمینه به‌طور نامحسوس به آن ارتقا می‌یابد (همان جلوه، با خروجی پیکسل‌به‌پیکسل یکسان). وقتی هیچ‌کدام از این دو API در دسترس نباشد (مرورگرهای خیلی قدیمی، غیرفعال‌بودن، SSR) به گرادیان بازتابی CSS برمی‌گردد؛ هیچ حالت خراب یا خالی‌ای نیست که لازم باشد در طراحی پیش‌بینی شود.

بدون rim
rim
 
<r-glass>…فقط بازتاب CSS…</r-glass> <r-glass rim>…لبه GPU + حاشیه رنگی (WebGL، با ارتقا به WebGPU)…</r-glass>

Partها و توکن‌های CSS

درون عنصر را با ::part(glass)، ::part(specular) و (وقتی rim تنظیم شده) ::part(rim) استایل بدهید، یا ویژگی‌های سفارشی --ran-glass-* را بازنویسی کنید:

توکن کارکرد
--ran-glass-blur شعاع تاری پس‌زمینه.
--ran-glass-saturate اشباع پس‌زمینه.
--ran-glass-radius شعاع گوشه‌ها.
--ran-glass-tint پس‌زمینه پرکننده.
--ran-glass-border خط لبه.
--ran-glass-shadow مجموعه سایه‌ها (درخشش + عمق).
--ran-glass-specular-background پس‌زمینه درخشش بازتابی.
--ran-glass-specular-opacity شدت بازتاب.
--ran-glass-reduced-transparency-background سطح جایگزین وقتی تنظیم «کاهش شفافیت» سیستم روشن است.
--ran-glass-reduced-transparency-shadow سایه جایگزین در همان حالت. 
r-glass::part(glass) {
  --ran-glass-tint: linear-gradient(135deg, rgba(0, 0, 0, 0.2), transparent);
}

یادداشت‌ها

  • نمونه‌برداری از پس‌زمینه. <r-glass> با backdrop-filter دامِ پشت خود را می‌شکند، پس متنِ قابل انتخاب، ویدیوی در حال پخش و عناصر تعاملیِ پشت شیشه همچنان کار می‌کنند. rim (بالا) یک لایه GPUی صرفاً تزئینی است که از روی شکل خود پنل حساب می‌شود و هرگز از پس‌زمینه نمونه نمی‌گیرد.
  • خوانایی. متن اصلی را روی یک سطح داخلی مات نگه دارید؛ کنتراست را تنها به شیشه نسپارید.
  • کاهش شفافیت. <r-glass> به تنظیم سطح‌سیستمی «کاهش شفافیت / افزایش کنتراست» (prefers-reduced-transparency: reduce) پاسخ می‌دهد: به‌جای مات‌کردن و شکستن نور، به یک سطح توپر و هماهنگ با پوسته (به‌طور پیش‌فرض --ran-color-bg-elevated) سوئیچ می‌کند. کنترل‌های بومی این کار را خودشان می‌کنند؛ این معادلِ همان رفتار برای یک عنصر سفارشی است.
  • تفاوت شکست نور میان مرورگرها. جلوه سیال feDisplacementMap فعلاً فقط در Chromium رسم می‌شود: سافاری و فایرفاکس آن بخش از مقدار backdrop-filter را کنار می‌گذارند و مات حاصل از blur / saturate / brightness را نگه می‌دارند، که یک جایگزین درست (هرچند تخت‌تر) است، نه یک حالت خراب.
  • حرکت. این سطح فقط transform را ترنزیشن می‌دهد و هرگز رنگ را، پس جابه‌جایی میان پوسته روشن و تیره در یک فریم تمام می‌شود. درخشش و فشار از prefers-reduced-motion پیروی می‌کنند.