طراحی سربرگ با پس زمینه محو (Blur) با استفاده از المنتور

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
سربرگ محو با المنتور

حتما همه شما با سایت Apple آشنایی دارید. اگر به قسمت سربرگ این سایت توجه کنید، در هنگام اسکرول، محتوای زیر سربرگ را به صورت محو (Blur) نشان می دهد.

سربرگ blur در المنتور

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

حالا در این آموزش نحوه طراحی سربرگ با حالت محو شدگی توسط المنتور را یاد می گیریم.

طراحی سربرگ با پس زمینه Blur با استفاده از المنتور

طراحی سربرگ با المنتور

ابتدا یک سربرگ توسط آموزش طراحی سربرگ با استفاده از المنتور طراحی کنید.

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

در اینجا کد رنگی استفاده شده به صورت زیر می باشد:

rgba(0, 0, 0, 0.8)

سربرگ blur در المنتور

اضافه کردن حالت محو شدگی

حالا به تب پیشرفته سربرگ رفته و کد CSS زیر را قرار دهید:

با تغییر مقدار blur(20px); می توانید، شدت محو شدگی را کم یا زیاد کنید.

selector { 
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}

سربرگ blur در المنتور

تا اینجای کار سربرگ به صورت محو شدگی در آماده است. حالا باید حالت چسبنده را فعال کنیم تا در هنگام اسکرول، سربرگ حرکت کنید.

حالت شناور

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

سربرگ blur در المنتور

حالا سربرگ را ذخیره کرده و به صفحه اصلی سایت بروید.

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

امیدواریم که از این آموزش هم به خوبی استفاده کرده باشید. نظرات خودتان را در مورد طراحی سربرگ محو در بخش نظرات در میان بگذارید.

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات دیجیتال

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=50324

فهرست مطالب

Avatar
محمد حسین رمضانی در 08:25

عالی بود!

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید