۱۰ قطعه کد برای ساختن پس زمینه های منحصر به فرد با CSS

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

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

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

۱. CSS Blend Mode Color Change

موردی که باعث می شود این پس زمینه بسیار خوب به نظر برسد المنت های ثابتی است که با پایین آمدن اسکرول رنگ هر کدام از آن ها تغییر می کند. خصوصیت mix-blend-mode استفاده شده در سی اس اس اجازه می دهد تا کاربران بتوانند با اسکرول رنگ مایه المنت را تغییر دهند. 

۲. Scrolling Animation

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

۳. Skewed

پس زمینه های Skewed یکی از جالب‌ترین تکنیک ها در طراحی وب به حساب می آید. این یک جلوه است که به سادگی قابلیت پیاده سازی دارد و در دنیای چاپ شدنی ها نیز استفاده می شود. این طرح کاملا با HTML و CSS نوشته شده است.

۴. Moving Pictures

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

۵. Animated Gradient

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

۶. Blur on Scroll

استفاده از این تکنیک برای زمانی که واقعا می خواهید کاربر روی پس زمینه تمرکز کند مفید و کاراست –مثلا برای عنون یک مقاله یا مواردی از این دست-. همچنین خواندن متن از روی این پس زمینه ها ساده است. با کمی تغییر در جی‌کوئری و خصوصیت background-size می توانید افکت زیبایی را نیز ایجاد کنید.

۷. Fade-in Hero Image with Overlay

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

۸. Background Zoom and Pan

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

۹. Reveal on Hover

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

۱۰. Color Change on Scroll

بعضی از اوقات ما واقعا فراموش می‌کنیم که استفاده از رنگ های تکی چه مقدار می تواند قدرتمند و جذاب باشد. در این طرح ما می توانیم تغییرات رنگی را براساس موقعیت اسکرول مشاهده کنیم. این راه حل ساده و سبک می تواند تاثیر بسیار زیاد و مثبتی روی رابط کاربری داشته باشد.

پس‌زمینه ها جلو‌دار هستند

پس زمینه ها تنها به عنوان قاب بندی محتوا استفاده نمی شوند – حال آن ها خود بخشی از محتوا به حساب می آیند. با راه های بسیار زیاد و جذابی که حال برای پیاده سازی آن ها وجود دارد ارزشش را دارد که چند مورد از آن ها را امتحان کنید و تکنیک های پیاده سازی آن ها را مشاهده نمایید. حال به آن فکر کنید که هر کدام از این موارد چگونه می توانند در طراحی وبسایت‌ بعدی‌تان به شما کمک کنند؟

منبع