نحوه پیاده سازی Glassmorphism از طریق HTML و CSS

Zoltán Szőgyényi Hacker ظهر عکس پروفایل

@zoltanszogyenyiZoltán Szőgyényi

بنیانگذار مشترک در تمسبرگ. توسعه دهنده وب و سرمایه گذار

ممکن است فکر کنید – روند طراحی دیگری؟ مگر ما هر سال یا این موارد را نداریم؟

سال گذشته ما با Neumorphism آشنا شدیم ، که هنوز هم روند کاملاً بحث برانگیزی است که هرگز به طور گسترده پذیرفته نشد. واکنش ها متفاوت بود ، بعضی از مردم واقعاً آن را دوست داشتند و برخی دیگر آن را کاملا رد کردند.

اما بیایید کمی بیشتر در مورد شکل گیری شیشه صحبت کنیم.

شکل گیری شیشه چیست؟

Glassmorphism یک روند جدید طراحی است که برای ایجاد جلوه ای شیشه ای از یک پس زمینه شفاف و یک اثر تاری در بالای زمینه استفاده می کند.

مثالی در اینجا آورده شده است:

این یک نمونه از کتابخانه CSS UI آینده است که مبتنی بر شکل گیری شیشه است و ui.glass نام دارد.

همانطور که مشاهده می کنید ، در مقابل کارت دیگری که در پس زمینه وجود دارد ، از جلوه ای برای کارت استفاده می شود که حاوی مثال کد است.

مثال دیگر ، طراحی مجدد برنامه پیام رسان فیس بوک با استفاده از شیشه گویی برای MacOS است:

طراحی مجدد توسط Mikołaj Gałęziowski در Dribbble انجام شد.

Glassmorphism توسط اپل و مایکروسافت نیز استفاده می شود

این دلیل دیگری است که باعث می شود این روند فقط عبور نکند ، بلکه برای ماندگاری اینجاست. با انتشار به روزرسانی Big Sur برای macOS ، این اولین تصویب گسترده ای از این روند طراحی جدید توسط یک شرکت بزرگ بود.

سئو PBN | خبر های جدید سئو و هک و سرور