قرار است در این مطلب شما، نحوه پیاده سازی سایت شیشه ای (glassmorphism) و این ترند طراحی سایت جدید را فقط با استفاده از HTML و CSS بیاموزید. اگر به طور مرتب وب سایت های مرتبط با طراحی سایت، مانند Dribbble را دنبال می کنید، قطعاً می دانید این ترند جدید در حال ظهور است. این مدل طراحی با آن که جدید است، اما توسط برند های معتبری مانند اپل و مایکروسافت استفاده می شود. خب طراحی سایت شیشه ای یا “گلس مورفیسم” دقیقا چیست؟
از نظر فنی، گلس مورفیسم شامل طراحی یک کادر شفاف با کمی تاری، سایه و رنگ حاشیه روشن است که برای برخی از عناصر کارت مانند، در پس زمینه های رنگارنگ یا تک رنگ استفاده می شود. این امر بر اساس پس زمینه مورد استفاده، ظاهر شخصی تری برای رابط کاربری ایجاد می کند.
به این طراحی ها، گلس مورفیسم یا طراحی شیشه ای می گوییم. ما در این مقاله نمی خواهیم از نظر طراحی گرافیکی به جزئیات این طراحی بپردازم، ما می خواهیم به شما نشان دهیم که چگونه می توانید تنها با استفاده از کد های HTML و CSS به این مدل طراحی برسید.
فهرست مطالب این مقاله
برای انجام طراحی به سبک شیشه ای با ما همراه شوید.
انتخاب پس زمینه
اولین چیزی که باید در مورد glassmorphism درک کرد این است که هیچ نوع عکس پس زمینه یا منظره ای با آن هم خوانی ندارد. در طراحی آن استفاده از رنگ های زنده ترجیح داده می شود و استفاده از اشکال و زمینه های ساده تر، به جای تصاویر بسیار ظریف، کلید اصلی در آن است.
در همین مورد، ما قصد داریم پس زمینه ای با جلوه های گرادیان را اعمال کنیم تا زمان بارگذاری آن با یک تصویر واقعی افزایش نیابد.
برای طراحی این قسمت باید به تگ <body> در فایل HTML ویژگی های زیر را اضافه کنیم:
body {
background: #edc0bf;
background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
padding: 4.5rem;
margin: 0;
}
البته در صورتی که ویژگی های گرادیان توسط مرورگر خاصی پشتیبانی نشود، از اولین ویژگی پس زمینه به عنوان جایگزین استفاده می شود، اگرچه اکثر مرورگر های مدرن از آن پشتیبانی می کنند.
بیایید از استایل فونت بهتری مانند Inter که از فونت های Google نیز هست استفاده کنیم. با افزودن کد زیر در تگ <head>، می توانید فونت را تعریف کنید:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">سپس با اعمال font family بر روی تگ body در فایل CSS تان روند طراحی را ادامه دهید:
body {
/* other styles */
font-family: 'Inter', sans-serif;
}
ایجاد المان کارت مانند
بیایید با تنظیم نشانه گذار HTML یک کارت ایجاد کنیم که در واقع حالت شیشه ای دارد. می توانیم با افزودن عنوان، توضیحات و لینک ها این کار را به سادگی انجام دهیم:
<div class="card">
<h3 class="card-title">Glassmorphism is awesome</h3>
<p> A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
<a href="https://ui.glass">Read more</a>
</div>بیایید یک ظاهر اولیه به طراحی کارت و عناصر اضافه کنیم:
.card {
width: 400px;
height: auto;
padding: 2rem;
border-radius: 1rem;
}
.card-title {
margin-top: 0;
margin-bottom: .5rem;
font-size: 1.2rem;
}
p, a {
font-size: 1rem;
}
a {
color: #4d4ae8;
text-decoration: none;
}
در حال حاضر کمی بهتر به نظر می رسد، اما همانطور که می بینید هنوز هیچ پیش زمینه ای وجود ندارد. دلیل آن این است که در قسمت بعدی می خواهیم نحوه اضافه کردن جلوه ها را به شما نشان دهیم.
افزودن افکت ها به Glassmorphism
افزودن افکت و تنظیم یک پس زمینه نیمه شفاف و استفاده از ویژگی های فیلتر زمینه برای افزودن جلوه ای تار به پس زمینه، بسیار ساده است. فقط کافی است ویژگی های زیر را به عنصر card در فایل CSS خود اضافه کنید:
.card {
background: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}عالی شد! اکنون خواهید دید که پس زمینه سفید و نیمه شفاف است، البته ممکن است بپرسید که حالت شیشه ای این طراحی کجاست؟
خب، هنوز نمی توانید آن را ببینید، زیرا هیچ چیزی در پشت عناصر به اندازه کافی متمایز نیست که بتواند حس شیشه ای را القا کند. بنابراین ما قصد داریم با استفاده از یک تصویر SVG یک شکل به آن اضافه کنیم.
برای این کار به تگ HTML کد زیر را اضافه کنید:
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">سپس استایل های زیر را به CSS اضافه کنید:
.shape {
position: absolute;
width: 150px;
top: .5rem;
left: .5rem;
}
اکنون می توانید جلوه های کامل طراحی شیشه ای را با شکلی متمایز تر در پس زمینه و تار شدن کارت شفاف خود مشاهده کنید. این عالی به نظر می رسد!
همانطور که می بینید، برای قرار دادن صحیح عناصر کنار هم و طراحی یک جلوه شیشه ای خوب، کار شما مقدار بیشتری طول می کشد، اما پس از انجام آن کار شما واقعاً منحصر به فرد به نظر می رسد. شکل پشت عناصر کارتی شکل حداقل از لحاظ نظری می تواند هر چیزی باشد. اما ترجیح داده می شود که آن ها اشکال یا تصاویر ساده باشند، یا بیشتر تصاویری باشند که جزئیات کمتری دارند.
در اینجا یک مثال کوچک از طراحی سایت به صورت شیشه ای وجود دارد که می توانید کد کامل آن را ببینید:
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism effect by ui.glass</title>
<style>
body {
padding: 4.5rem;
margin: 0;
background: #edc0bf;
background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
font-family: 'Inter', sans-serif;
}
.shape {
position: absolute;
width: 150px;
top: .5rem;
left: .5rem;
}
.card {
width: 400px;
height: auto;
padding: 2rem;
background: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 1rem;
}
.card-title {
margin-top: 0;
margin-bottom: .5rem;
font-size: 1.2rem;
}
p, a {
font-size: 1rem;
}
a {
color: #4d4ae8;
text-decoration: none;
}
</style>
</head>
<body>
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
<div class="card">
<h3 class="card-title">Glassmorphism is awesome</h3>
<p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
</div>
</body>
</html>در انتها نیز کد بالا تصویر پایین را برای ما طراحی می کند:
پشتیبانی از طراحی شیشه ای در مرورگر
ما به عنوان یک تیم طراحی وب موفق وظیفه داریم مطمئن شویم که کدی که می نویسیم برای اکثر مرورگر های موجود در بازار قابل پشتیبانی است. اکثر ویژگی های CSS که ما در این آموزش استفاده کرده ایم توسط همه مرورگر ها پشتیبانی می شود، به جز یکی: که آن هم ویژگی backdrop-filter است.
البته حالت گلس مورفیسم به هیچ وجه توسط IE 11 پشتیبانی نمی شود، البته اگر بخواهیم صادقانه بگوی، در سال های آینده اهمیت چندانی نیز نخواهد داشت. با ورود Bootstrap 5، آن ها دیگر پشتیبانی جدیدی از IE 11 را اضافه نکردند، علاوه بر این، مایکروسافت اعلام کرد که پشتیبانی از IE 11 را در آگوست امسال متوقف می کند. بنابراین نباید خیلی هم نگران آن باشیم.
با این حال، یک مشکل دیگر نیز در این جا وجود دارد، فایرفاکس بنا به دلایلی، ویژگی backdrop-filter را به طور پیش فرض فعال نمی کند، حتی اگر مرورگر از این نوع استایل پشتیبانی کند. البته ما امیدواریم در آینده نزدیک این ویژگی به طور پیش فرض فعال شود.
بنابراین، آیا می توان از طراحی شیشه ای یا گلس مورفیسم (glassmorphism) در تولید و طراحی سایت استفاده کرد؟ در حقیقت جواب ما مثبت است. این واقعیت که glassmorphism در چند مرورگر کار نمی کند (3.76 برای Firefox دقیق تر)، بدان معنا نیست که این رابط کاربری برای همه مرورگر ها به اندازه کافی خوب نیست.
ما معمولاً از این نوع طراحی برای سایت های سطح سازمانی که دسترسی به آن ها برای عموم مهم و ضروری است استفاده نمی کنیم، اما شاید بهتر باشد از آن برای وب سایت های شخصی یا تجاری، حتی برای برخی از رابط های برنامه ای استفاده کنیم.
نتیجه
ما معتقدیم که طراحی شیشه ای یک ترند طراحی سایت بسیار جالب است و می توان از آن در برنامه های کاربردی واقعی نیز استفاده کرد. البته که هنگام پیاده سازی آن اشکالاتی نیز وجود خواهد داشت، زیرا شما نیاز به تجربه طراحی دارید. همچنین برای پشتیبانی پیش فرض آن در Firefox یک اشکال وجود دارد، که ممکن است در آینده تغییر کند.
امیدواریم این آموزش به شما در درک بیشتر این ترند طراحی جدید و نحوه پیاده سازی آن در رابط های وب کمک کند.
منبع:
themesberg.com
