بهترین سایت های ساخت افکت شیشه و Glass با CSS

طراحی قالب با html و css اولین قدم برای داشتن یک وب سایت است . همانطور که یک ساختمان به اسکلت و ستون‌بندی نیاز دارد یک وب سایت نیز برای متولد شدن به زبان نشانه گذاری اچ تی ام ال نیاز دارد .

پس از اینکه ساختمان اسکلت بندی شد برای اینکه بر روی زیباسازی نما و داخل ساختمان کار کنیم نیاز به ابزارهای خاص و مصالح مشخص داریم . در مورد طراحی وب سایت نیز به زبان css نیاز خواهیم داشت اما اینکه از این زبان به چه روشی استفاده کنیم اهمیت دارد .

به مثال ساختمان اگر بازگشت کنیم می‌توان گفت که مصالح خام همچون گچ رنگ و… در اختیار شما قرار دارند اما اینکه شما به کمک گچ چه ابزارهایی را در داخل واحدهای ساختمان اجرا کنید بستگی به خلاقیت شما دارد .

به همین ترتیب در زبان طراحی css نیز شما علاوه بر آشنایی به تمامی دستورات باید به نحوه استفاده آنها و مهم‌تر از همه ایجاد خلاقیت توسط آنها اشراف داشته باشید . شما می‌توانید با ترکیب دستورات مختلف با یکدیگر و یا به کار بردن یک دستور به شکلی خاص طراحی‌های متفاوتی را ایجاد کنید .

طراحی مدرن با CSS همه روزه در حال پیشرفت است !

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

پس شما نیز به عنوان یک طراح و css کار لازم است تا به اکثریت ترفندهای طراحی آشناییت داشته باشید اما اینکه همیشه خودتان به تنهایی این دستورات را خلق کنید نیز درست نیست چون زمان زیادی نیاز دارد و به همین دلیل شما می‌توانید از ابزارهایی استفاده کنید که روند این کارها را برای شما بسیار ساده‌تر نماید .

در این مقاله از سایت در رابطه با ایجاد افکت‌های شیشه‌ای یا همان گلس صحبت خواهیم کرد . اگر با دستورات css آشنایی داشته باشید احتمالاً می‌دانید که به کمک دستور blur می‌توان افکت بلور در بخش‌های مختلف سایت را داشت .

.filter {
  filter: blur(3.5px);
}

اما زمانی که به یک المان افکت بلور اعمال شود تمام محتویاتی که داخل آن بخش قرار دارد نیز بلور خواهد شد همانند متن آیکون و غیره اما در css می‌توان به کمک یک دستور دیگر خاصیت بلور را تنها به پس زمینه یک المان اعمال کرد برای اینکه یک پس زمینه گلس یا شیشه‌ای داشته باشیم لازم است تا ۲ کار اصلی را انجام دهیم .

اول اینکه خاصیت بلور پس زمینه را فعال کنیم و کار دوم اینکه باید رنگ پس زمینه را کمی شفاف‌تر کنیم تا بتوانیم پشت آن را ببینیم اما کار کردن با این دو فاکتور و تنظیم کردن درست اعداد و ارقام آنها در کنار یکدیگر زمان زیادی را از شما خواهد گرفت .

.bg-d {
	background-color: #12121250;
	backdrop-filter: 3px;
}

این دو دستور بالا ، ایجاد افکت گلس و شیشه را برای شما میسر خواهند کرد . اما بیایید کمی بهتر روی این افکت‌ها کار کنیم !

نکته اصلی استفاده از افکت Glass

در این مقاله چند سایت خوب و کاربردی را خدمتتان معرفی خواهیم کرد تا به سادگی و با چند کلیک بتوانید افکت شیشه‌ای و گلس مد نظر خودتان را ایجاد کنید البته در نظر داشته باشید که طراحی تمام بدنه وب سایت به کمک افکت‌های گلس معمولاً کار درستی نیست .

توجه داشته باشید که افکت‌های شیشه‌ای یا همان گلس در بخش‌های خاصی از سایت و عموماً قسمت‌هایی کوچک استفاده می‌شوند یکی از بخش‌هایی که می‌توان افکت گلس را داخل آن استفاده کرد فرم‌های ورود و ثبت نام در داخل سایت هستند .

یا در مثال دیگر می‌توان از این افکت‌ها در داخل هیروسکشن سایت استفاده کرد به همین دلیل سعی کنید تا در کنار یادگیری ساخت این افکت‌های شیشه‌ای ، محل درست استفاده از آنها را نیز یاد بگیرید . اکنون به سراغ معرفی سایت‌هایی خواهیم رفت که می‌توانید صرفاً با چند کلیک ساده افکت شیشه‌ای مد نظر خودتان را ایجاد و کد آن را در داخل پروژه استفاده کنید .

سایت css.glass

شاید این سایت اولین و در دسترس‌ترین سایت برای ایجاد افکت گلس باشد . آدرس این وب سایت css.glass است و کافیست روی اسم سایت در همینجا کلیک کنید تا وارد آن شوید . تصویر سایت در این تاریخ بصورت زیر است :

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

background: rgba(255, 255, 255, 0.21);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.7px);
-webkit-backdrop-filter: blur(3.7px);
border: 1px solid rgba(255, 255, 255, 0.3);

برای مثال کد بالا ، یک نمونه کد Glassmorphism از سایت css.glass است .

سایت thecoderaptors

در این سایت باید به مراجعه به این آدرس که صفحه مربوط به CSS GLASS در thecoderaptors است ، می‌توانید دقیقا همانند سایت بالا ، افکت Glassmorphism خود را ایجاد کنید .

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

سایت hype4.academy

در این وب سایت نیز با مراجعه به این آدرس ، می‌توانید وارد صفحه‌ای به شکل زیر شده و در همان لحظه افکت شیشه خود را ایجاد کنید :

تعدد وب سایت‌هایی که در زمینه کمک به ایجاد این نوع افکت‌ها برای طراحان وجود دارند کم نیست و اگر تا صبح نیز خدمت شما وب سایت‌های ساخت افکت گلس را معرفی کنیم ، اتمامی ندارد !

هدف از ارائه این مقاله صرفا این بود که اطلاع داشته باشید جهت ساخت مواردی از این دست ، نیازی نیست تا زمان زیادی از را خود و پروژه خود تلف کنید و حتما به دنبال این دست سایت‌ها باشید . امید است این محتوا و این وب سایت‌ها برای شما علاقمندان عزیز ، کاربردی باشند .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا