ran
فارسی
در این صفحه

Glass

<r-glass>APIتوکن‌های سبکزمین بازیکد منبع

یک سطح شیشه سیال. یک material انتخاب کنید و شیشه آماده است: هرچه پشتش باشد را مات می‌کند، آن را در لبه‌ای خمیده مثل یک عدسی خم می‌کند، رنگ‌ها را در لبه کمی از هم جدا می‌کند و لبه را روشن می‌کند. هر مقدار را می‌توان جداگانه با اتریبیوتی هم‌نام بازنویسی کرد. محتوا در اسلات پیش‌فرض می‌نشیند و رنگی می‌گیرد که روی شیشه خوانا باشد.

کجا به کار می‌آید: وقتی یک پنل روی محتوای پررنگ و غنی قرار می‌گیرد: یک کارت شاخص، یک نوار ابزار شناور، یک لایه روی رسانه. روی پس‌زمینه یکدست چیزی برای خم‌کردن نیست و جلوه از بین می‌رود.

زمین بازی

شیشه را بکشید، ماده و پس‌زمینه را عوض کنید و نشانه‌گذاری را کپی کنید. قطعه کد فقط چیزهایی را دارد که با ماده فرق می‌کنند.

پنل شیشه‌ای مات
بکشید یا با کلیدهای جهت حرکت دهید · تنظیم‌ها را تغییر دهید
جنس
اپتیک
شکل و نور
پس‌زمینه
<r-glass style="width:340px">
  …
</r-glass>
<r-glass material="clear" backdrop>
  <div class="panel">…</div>
</r-glass>

مواد

چهار ماده بیشتر کاربردها را پوشش می‌دهند. regular پیش‌فرض است.

thin
regular
thick
clear
 
<r-glass material="thin">…</r-glass>
<r-glass>…regular…</r-glass>
<r-glass material="thick">…</r-glass>
<r-glass material="clear">…</r-glass>
ماده blur saturate displace bevel dispersion specular
thin 8 160 12 20 20 80
regular 16 180 18 28 25 100
thick 28 200 22 32 25 100
clear 2 130 28 40 40 120

روی یک تصویر

وقتی شیشه روی یک <img> یا <video> قرار دارد، backdrop را اضافه کنید. بدون مقدار، اولین تصویر یا ویدیوی والدِ شیشه را برمی‌دارد؛ یک سلکتور مورد دیگری را مشخص می‌کند. سپس شیشه پیکسل‌های آن عنصر را با WebGL2 می‌خواند و هر طول موج را به اندازه خودش می‌شکند، در هر موتوری که WebGL2 دارد؛ در حالی که مسیر CSS فقط در Chromium نور را خم می‌کند. تصویر در صفحه باقی می‌ماند، پس متن alt آن و محتوای اطرافش تغییری نمی‌کنند.

Refracted with WebGL2
 
<div class="hero">
  <img src="hero.jpg" alt="…" />
  <r-glass material="clear" backdrop rim>…</r-glass>
</div>

تصویری از مبدأ دیگر برای خوانده‌شدن به crossorigin و یک پاسخ CORS نیاز دارد؛ در غیر این صورت شیشه همان مات CSS خود را نگه می‌دارد.

ته‌رنگ و رنگ متن

tone می‌گوید پشت شیشه چه چیزی است. روی پس‌زمینه تیره یا رنگی، لبه روشن می‌شود و محتوا سفید است؛ روی پس‌زمینه روشن، لبه سفید دیده نمی‌شود، پس لبه سایه می‌خورد و محتوا تیره می‌شود. روی تصویر backdrop، ته‌رنگ از روشنایی ناحیه پوشیده‌شده پیروی می‌کند، مگر اینکه خودتان آن را تنظیم کنید. ته‌رنگ فعلی به صورت :state(light) و :state(dark) در دسترس است و --ran-glass-ink رنگ محتوا را بازنویسی می‌کند.

The tone follows the image
 
r-glass:state(light) .badge {
  border-color: rgb(0 0 0 / 0.2);
}

تودرتویی

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

Outer panel
Nested glass toolbar
 
<r-glass radius="28">
  <div class="panel">
    Outer panel
    <r-glass material="thin" radius="16">
      <div class="toolbar">Nested glass toolbar</div>
    </r-glass>
  </div>
</r-glass>

مرجع API

ویژگی‌ها

ویژگی نوع پیش‌فرض توضیح
material string regular thin، regular، thick یا clear: همه مقادیر نوری زیر را یک‌جا تنظیم می‌کند.
blur number از ماده شعاع مات‌شدن، بر حسب px.
saturate number از ماده اشباع رنگِ آنچه پشت شیشه است، به درصد.
displace number از ماده اینکه لبه پس‌زمینه را چقدر به داخل می‌کشد، بر حسب px. 0 یعنی یک شیشه صاف.
bevel number از ماده پهنای نوار خمیده لبه که نور را خم می‌کند، بر حسب px.
dispersion number از ماده اینکه رنگ‌ها در لبه چقدر از هم جدا می‌شوند، به درصدی از displace.
specular number از ماده شدت هایلایت‌ها، به درصد.
radius number 20 شعاع گوشه‌ها، بر حسب px.
tint string از ماده پرکننده روی لایه مات: هر مقدار background در CSS.
tone string dark dark یا light: پشت شیشه چه چیزی است. اگر روی backdrop تنظیم نشود، از تصویر پیروی می‌کند.
backdrop string — یک <img> یا <video> را با WebGL2 می‌شکند. خالی، اولین مورد در والد را برمی‌دارد؛ یک سلکتور مورد دیگری را مشخص می‌کند.
rim boolean false لبه‌ای که با GPU نورپردازی می‌شود: دیواره بیرونی و درونی، نور اصلی و نور پرکننده، درخشش‌ها. فقط به شکل پنل بستگی دارد.
sheen boolean false هایلایتی که روی سطح جارو می‌کشد.
interactive boolean false بالا آمدن هنگام hover و بازخورد فشردن، برای شیشه قابل کلیک. میزبان را هم به دکمه‌ای قابل استفاده با صفحه‌کلید تبدیل می‌کند: role="button"، یک توقف tab، و Enter و Space مثل کلیک عمل می‌کنند.

شکست نور displace

displace تعیین می‌کند لبه چقدر آنچه پشت شیشه است را به سمت مرکز بکشد، به طوری که پس‌زمینه درست داخل لبه روی آن کشیده شود، همان‌طور که یک لبه محدب ضخیم بزرگنمایی می‌کند. bevel پهنای آن نوار خمیده را تعیین می‌کند. بیش از نصف bevel، لبه تصویر را روی خودش برمی‌گرداند، همان کاری که لبه یک شیشه ضخیم واقعی می‌کند.

displace = 0
displace = 40
 
<r-glass material="clear" displace="0">…flat…</r-glass> <r-glass material="clear" displace="40">…lensed edge…</r-glass>

درخشش و تعامل

sheen یک هایلایت متحرک اضافه می‌کند؛ interactive بالا آمدن هنگام hover و فشردنی که بدون جهش به جای خود برمی‌گردد را اضافه می‌کند.

Hover & press me
 
<r-glass sheen interactive>
  <div>Hover &amp; press me</div>
</r-glass>

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

rim لبه را روی GPU می‌کشد: یک دیواره بیرونی روشن و یک دیواره درونی کم‌رنگ‌تر جایی که bevel به سطح صاف می‌رسد، روشن‌شده با یک نور اصلی از بالا چپ و یک نور پرکننده کم‌سو از پایین راست، با ضخامتی که در طول لبه تغییر می‌کند و درخشش‌های گاه‌به‌گاه. با ته‌رنگ light، دیواره‌ها به جای روشن شدن سایه می‌خورند. هرگز از پس‌زمینه نمونه نمی‌گیرد: شیدر فقط اندازه، شعاع و bevel پنل را می‌داند. ابتدا با WebGL رندر می‌شود، اگر مرورگر WebGPU داشته باشد در پس‌زمینه به آن منتقل می‌شود، و اگر هیچ‌کدام نباشد هایلایت CSS را دست‌نخورده می‌گذارد.

no rim
rim
 
<r-glass>…CSS highlight…</r-glass> <r-glass rim>…GPU-lit edge…</r-glass>

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

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

توکن کارکرد
--ran-glass-ink رنگ محتوا. پیش‌فرض سفید، یا روی ته‌رنگ روشن نزدیک به سیاه.
--ran-glass-tint پرکننده روی لایه مات.
--ran-glass-border حاشیه لبه.
--ran-glass-shadow پشته سایه‌ها (بازتاب و عمق).
--ran-glass-brightness روشنایی آنچه پشت شیشه است.
--ran-glass-specular-background پس‌زمینه هایلایت CSS.
--ran-glass-specular-opacity شدت هایلایت CSS؛ برای آن لایه جای specular را می‌گیرد.
--ran-glass-reduced-transparency-background سطح جایگزین وقتی تنظیم سیستمی «کاهش شفافیت» روشن است.
--ran-glass-reduced-transparency-shadow سایه جایگزین در همان حالت. 
r-glass {
  --ran-glass-tint: linear-gradient(135deg, rgb(0 0 0 / 0.2), transparent);
}

یادداشت‌ها

  • دو مسیر. بدون backdrop، backdrop-filter صفحه زنده پشت شیشه را مات می‌کند، پس متن، ویدیو و کنترل‌های پشت آن همچنان کار می‌کنند؛ لبه عدسی‌مانند با رنگ‌های جداشده یک فیلتر SVG است که در Chromium رندر می‌شود، و سافاری و فایرفاکس فقط مات را نگه می‌دارند. با backdrop، WebGL2 همان یک تصویر یا ویدیو را در هر موتوری که WebGL2 دارد می‌شکند.
  • خوانایی. محتوا رنگ --ran-glass-ink را می‌گیرد. متن طولانی را به جای سپردن کنتراست به شیشه، روی یک سطح داخلی مات نگه دارید.
  • کاهش شفافیت. با تنظیم سیستمی «کاهش شفافیت» یا «افزایش کنتراست» (prefers-reduced-transparency: reduce)، شیشه به یک سطح توپر و هماهنگ با پوسته (--ran-color-bg-elevated) تبدیل می‌شود، بدون مات‌شدن، شکست نور یا هایلایت.
  • حرکت. این سطح فقط transform را ترنزیشن می‌دهد، پس تغییر پوسته در یک فریم تمام می‌شود. درخشش و فشردن از prefers-reduced-motion پیروی می‌کنند.
  • هزینه. نقشه عدسی SVG وقتی اندازه، شعاع یا bevel پنل تغییر کند دوباره ساخته می‌شود. شکست نور WebGL تا وقتی شیشه دیده می‌شود، در هر فریم یک بار پنل و تصویر را بررسی می‌کند و فقط وقتی یکی از آن‌ها جابه‌جا شده باشد رسم می‌کند.

زمین بازی

thin
regular
thick
clear
<r-glass>
interactiverim
نشانه‌گذاری