سلام به همه

امروز تو این مطلب یه کد css خیلی باحال براتون قرار دادیم که تاثیر زیادی تو طراحی هاتون میتونه داشته باشه.

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

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

کد css شیشه ای کردن

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

background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

یه نکته درمورد کد بالا بهتون بگم ، اگه میخواید میزان شفافیتش رو کم یا زیاد کنید باید مقدار .7 که تو خط اول هست رو  کم یا زیاد کنید تا مقدار شفافیت تغییر کنه!

برای استفاده کافیه از بخشی که میخوای اینسپکت بگیرید و کد رو بهش اضافه کنید

نحوه آموزشش هم برای کسایی که با css آشنایی ندارن به زودی تو آکادمی ژاکد منتشر میشه و میتونن به صورت رایگان یاد بگیرن