طراحی سایت شیشه ای (Glassmorphism)، یک گرایش طراحی است که در اواخر سال 2020 محبوبیت زیادی پیدا کرد. در این روش یک پس زمینه تار روی یک عنصر اعمال می شود و به آن حس شفافیت و حالت شیشه ای می دهد. این ترند طراحی تقریباً جدید بوده و اخیراً مورد توجه زیادی قرار گرفته است. من کاملاً مشتاق امتحان چیز های جدید هستم و یکی از کار هایی به تازگی انجام دادم، دادن حالت شیشه ای مات به نوار ناوبری وب سایت با استفاده از کلاس های کاربردی پس زمینه در فریم ورک Tailwind CSS بود. این کار خیلی خوب بود، پس فکر کردم به شما هم نشان دهم چگونه این را خودتان طراحی کنید.
Tailwind CSS و کلاس های جدید پس زمینه
همه فیلتر های زبان CSS در گذشته توسط Tailwind پشتیبانی نمی شدند، اما با انتشار نسخه 2.1 آن و مجموعه ای از کلاس های کاربردی مفید، از جمله کلاس های فیلتر پس زمینه جدید هم اکنون برای استفاده در دسترس ما است. دستیابی به افکت شیشه ای روی نوار ناوبری خیلی ساده است، فقط باید از کلاس های کاربردی، فیلتر پس زمینه و پس زمینه تار در Tailwind CSS استفاده کنیم و کمی شفافیت را تنظیم کنیم.
نکته: قبل از حرکت ب سمت ادامه مطلب، مطمئن شوید که نسخه Tailwind v2.1 را نصب کرده اید!
ساختار اصلی نوار ناوبری شیشه ای قبل از اعمال Tailwind
بیایید با استفاده از عنصر معنایی «nav» و پر کردن آن با چند آیتم شروع کنیم.
<nav>
<div>
<div>
<span>My Logo</span>
<div>
<a href="#"> Dashboard </a>
<a href="#"> About </a>
<a href="#"> Projects </a>
<a href="#"> Contact </a>
</div>
</div>
</div>
</nav>قبل از اعمال افکت شیشه ای با Tailwind، بیایید نوار ناوبری را به طوری سبکی تنظیم کنیم تا در واقع شبیه یک نوار ناوبری مرتب باشد.
<nav className="sticky top-0 z-10 bg-white">
<div className="max-w-5xl mx-auto px-4">
<div className="flex items-center justify-between h-16">
<span className="text-2xl text-gray-900 font-semibold">Logo</span>
<div className="flex space-x-4 text-gray-900">
<a href="#"> Dashboard </a>
<a href="#"> About </a>
<a href="#"> Projects </a>
<a href="#"> Contact </a>
</div>
</div>
</div>
</nav>بسیاری از این سبک ها خود توضیحی هستند، اما اجازه دهید به چند نکته اشاره کنم:
- روی عنصر nav یک رنگ پس زمینه اعمال شده است. اگر رنگ پس زمینه وجود نداشته باشد، کلاس های فیلتر چیزی برای محو کردن نخواهند داشت.
- عنصر nav چسبنده است، اگر وقتی صفحه را به پایین اسکرول می کنیم نوار را نبینیم، هیچ فایده ای ندارد که بخواهیم به نوار ناوبری حالتی شیشه ای بدهیم.
- یک z-index برای ناوبری اعمال می شود، فقط برای اینکه سایر عناصر را از بین نبرند.
در این مرحله، نوار ناوبری باید چیزی شبیه به تصویر بالا باشد. اگر صفحه را به پایین اسکرول کنید، باید نوار به بالای صفحه بچسبد.
استفاده از کلاس های فیلتر و تاری پس زمینه در Tailwind
اکنون که ساختار اصلی ناوبری وجود دارد، بیایید به آن یک حالت جادویی اضافه کنیم، برای این کار باید کلاس های ابزار فیلتر پس زمینه و پس زمینه تار را به عنصر nav اضافه کنید.
<nav className="... backdrop-filter backdrop-blur-lg">.....</nav>اگر در این مرحله صفحه را به پایین اسکرول کنید، به نظر می رسد چیزی تغییر نکرده است. اگرچه کلاس های کاربردی Tailwind در حال کار هستند، ما باید کدورت پس زمینه نوار ناوبری را تنظیم کنیم تا حالت شیشه ای آن آشکار شوند.
هرچه کدورت پس زمینه کمتر باشد، محتوای بیشتری از طریق عنصر نشان داده می شود. با خیال راحت کمی با مقدار آن بازی کنید، تا مقدار دلخواهتان را پیدا کنید. مثلاً من کلاس bg-opacity-30 را به نوار ناوبری خود اضافه کرده ام.
<nav className="...bg-opacity-30">.....</nav>نوار ناوبری اکنون حالتی شیشه ای دارد و جلوه جالبی را بدون از بین بردن تجربه کاربر در وب سایت به آن اضافه می کند. ما می توانیم همین جا توقف کنیم، اما یک کار دیگر هم وجود دارد که می توانیم انجام دهیم.
تا اکنون ما موفق به شیشه ای کردن نوار ناوبری به کمک Tailwind شدیم، اما همانطور که در تصویر پایین می بینید تشخیص نوار ناوبری شیشه ای مات از پس زمینه وب سایت دشوار است.
افزودن یک حاشیه پایین تیره رنگ اجازه می دهد تا پس زمینه با نوار ناوبری تار تضاد ایجاد کند و به صورت بصری انتهای عنصر را مشخص کند. این حاشیه بسیار ظریف است، اما یک لایه کاملاً جدید به طراحی کلی ما اضافه می کند. این کار را با اضافه کردن قسمت پایین انجام می دهیم.
<nav className="...border-b border-gray-200">.....</nav>عالی شد، ما اکنون تمام سبک های مورد نیاز برای دستیابی به جلوه شیشه ای در نوار ناوبری را اضافه کرده ایم. اما، اگر در حال آزمایش تغییرات خود در چندین مرورگر مدرن هستید، ممکن است متوجه یک اشکال شده باشید.
مشکلات نوار ناوبری شیشه ای در فایرفاکس
درست است. اگر تغییرات خود را در فایرفاکس پیش نمایش کنید، خواهید دید که تاری اصلاً نشان داده نمی شود. به نظر می رسد، فایر فاکس از CSS پس زمینه تاری پشتیبانی نمی کند. پس راه حل چیست؟
خوشبختانه، سام سلیکوف در مورد این موضوع یک توییت سفارشی را در توییتر نوشته و پست کرده است. این توییت کاربرانی را هدف قرار می دهد که از فایرفاکس استفاده می کنند. برای اینکه بتوانید شفافیت نوار ناوبری را در این مرورگر افزایش دهید، فایل tailwind.config.js را باز کنید و کد زیر را در قسمت plugins اضافه کنید. (برای ایجاد تغییرات در tailwind.config.js می توانید به مقاله مربوط به فریم ورک Tailwind که در ابتدای مقاله به آن پیوند داده بودیم مراجعه کنید.)
const plugin = require('tailwindcss/plugin');
module.exports {
...
plugins: [
...
plugin(function ({ addVariant, e, postcss }) {
addVariant('firefox', ({ container, separator }) => {
const isFirefoxRule = postcss.atRule({
name: '-moz-document',
params: 'url-prefix ()',
});
isFirefoxRule.append(container.nodes);
container.append(isFirefoxRule);
isFirefoxRule.walkRules((rule) => {
rule.selector = `.${e(
`firefox${separator}${rule.selector.slice(1)}`
)}`;
});
});
}),
],
}حالا به قسمت مربوط به نوار ناوبر برگردید و کلاس زیر را وارد کنید:
<nav className="...firefox:bg-opacity-90">.....</nav>اگر چه نوار ناوبری اکنون هم کاملاً تار نیست، اما کدورت کمی افزایش می یابد اما همچنان جلوه شفاف خود را حفظ می کند.
نتیجه:
Tailwind CSS به بهبود خود ادامه می دهد و با انتشار نسخه 2.1، بسیاری از فیلتر های CSS اکنون با کلاس های کاربردی مرتبط پشتیبانی می شوند و شما به راحتی می توانید از آن برای طراحی های شیشه ای استفاده کنید درست مانند همین نوار ناوبری شیشه ای که ما طراحی کردیم.
شاید بپرسید چه زمانی می توان از glassmorphism استفاده کرد؟ در حالی که ساخت کل رابط های کاربری با استفاده از این مد طراحی می تواند وسوسه انگیز باشد، اما لطفاً توجه داشته باشید که به دلیل ماهیت نیمه شفاف آن نگرانی هایی در مورد دسترسی دارد، پس اگر از طراحی شیشه ای استفاده می کنید، از آن کم استفاده کنید.
منبع:
braydoncoyer.dev
