35 مثال شیک پس زمینه CSS

رنگ های ثابت سال گذشته همینطور است. گرادیان ها وارد شده اند! اما چگونه آنها را در CSS ایجاد می کنید؟

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

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

گرادیان های پس زمینه با استفاده از CSS

یک گرادیان CSS یک انتقال صاف را با استفاده از دو یا چند رنگ مشخص نشان می دهد. گرادیان های CSS کنترل و عملکرد بهتری را با استفاده از یک فایل تصویر واقعی از یک گرادینت که می توانید با استفاده از ابزارهایی مانند Adobe Illustrator ایجاد کنید، فراهم می کند. از ویژگی پس زمینه تصویر CSS برای اعلام گرادیان ها به عنوان پس زمینه استفاده کنید.

سه نوع گرادیان وجود دارد: خطی (ایجاد شده با تابع ()linear-gradient)، شعاعی (ایجاد شده با تابع radial-gradient()) و مخروطی (ایجاد شده با تابع conic-gradient()). همچنین می توانید با توابع () repeating-linear-gradient، repeating-radial-gradient() و repeating-conic-gradient شیب های تکرار شونده ایجاد کنید.

MDN Docs این توابع را به صورت زیر تعریف می کند:

linear-gradient(): تابع linear-gradient() CSS تصویری متشکل از یک انتقال تدریجی بین دو یا چند رنگ در امتداد یک خط مستقیم ایجاد می کند. نتیجه آن یک شی از نوع داده است که نوع خاصی از است.

radial-gradient(): تابع CSS radial-gradient() تصویری متشکل از یک انتقال پیشرونده بین دو یا چند رنگ که از یک مبدا ساطع می‌شوند، ایجاد می‌کند. شکل آن ممکن است دایره یا بیضی باشد. نتیجه تابع یک شی از نوع داده است که نوع خاصی از است.

conic-gradient(): تابع CSS conic-gradient() تصویری متشکل از یک گرادیان با انتقال رنگ که حول نقطه مرکزی می چرخد ​​(به جای تابش از مرکز) ایجاد می کند. نمونه هایی از گرادیان های مخروطی شامل نمودارهای دایره ای و چرخ های رنگی است. نتیجه تابع conic-gradient() یک شی از نوع داده است که نوع خاصی از است.

repeating-linear-gradient(): تابع CSS repeating-linear-gradient() تصویری متشکل از تکرار گرادیان های خطی ایجاد می کند. شبیه gradient/linear-gradient() است و همان آرگومان ها را می گیرد، اما توقف های رنگ را بی نهایت در همه جهات تکرار می کند تا کل ظرف خود را بپوشاند. نتیجه تابع یک شی از نوع داده است که نوع خاصی از است.

() repeating-radial-gradient: تابع CSS repeating-radial-gradient() تصویری متشکل از گرادیان های تکراری ایجاد می کند که از یک مبدا تابش می کنند. شبیه gradient/radial-gradient() است و همان آرگومان ها را می گیرد، اما توقف های رنگ را بی نهایت در همه جهات تکرار می کند تا کل ظرف خود را بپوشاند، مشابه gradient/repeating-linear-gradient(). نتیجه تابع یک شی از نوع داده است که نوع خاصی از است.

repeating-conic-gradient(): تابع CSS repeating-conic-gradient() تصویری متشکل از یک گرادیان تکراری (به جای یک گرادیان واحد) با انتقال رنگ که حول یک نقطه مرکزی می چرخد ​​(به جای تابش از مرکز) ایجاد می کند.

کد استفاده شده در این مقاله می باشد
دارای مجوز MIT
.

در اینجا نحو رسمی هر نوع گرادینت آمده است.

نحو گرادیان های خطی

linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]

نحو گرادیان های شعاعی

radial-gradient(
 [ <ending-shape> || <size> ]? [ at <position> ]? ,
 <color-stop-list>
);

نحو گرادیان های مخروطی

conic-gradient(
 [ from <angle> ]? [ at <position> ]?,
 <angular-color-stop-list>
)

در اینجا چند نمونه گرادیان پس‌زمینه بسیار جذاب ایجاد شده با استفاده از ویژگی پس‌زمینه-image CSS است که می‌تواند رابط کاربری وب‌سایت شما را به سطح بعدی ارتقا دهد.

1. چمن گرد و غبار

برای ایجاد گرادینت بالا از CSS زیر استفاده کنید:

background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

2. ماسه تا آبی

برای ایجاد گرادینت نشان داده شده در بالا، از کد CSS زیر استفاده کنید:

background-image: linear-gradient(toright, #DECBA4, #3E5151);

3. کیه مه

از کد CSS زیر برای ایجاد پس‌زمینه گرادیان خطی بالا استفاده کنید:

background-image: linear-gradient(toright, #8360c3, #2ebf91);

4. امین

برای ایجاد گرادینت بالا از CSS زیر استفاده کنید:

background-image: linear-gradient(toright, #8e2de2, #4a00e0);

5. قرمز آرامش بخش

تنها با یک خط کد CSS، می توانید یک گرادیان پس زمینه زیبا و چشم نواز به وب سایت خود اضافه کنید:

background-image: linear-gradient(toright, #fffbd5, #b20a2c);

6. نور متعالی

سعی کنید از این CSS برای ایجاد یک پس زمینه گرادیان استفاده کنید. استفاده از آن آسان است و سبکی را به سایت شما اضافه می کند:

background-image: linear-gradient(toright, #fc5c7d, #6a82fb);

7. مگاترون

از CSS زیر برای ایجاد یک گرادینت 3 رنگ استفاده کنید:

background-image: linear-gradient(toright, #c6ffdd, #fbd786, #f7797d);

8. تمشک آبی

از CSS زیر برای ایجاد یک پس‌زمینه گرادیان خطی آبی ساده استفاده کنید:

background-image: linear-gradient(toright, #00b4db, #0083b0);

9. پریمیوم دارک

با این کد CSS گرادیان خطی، ظاهر گرادیان نشان داده شده در بالا را دریافت کنید:

background-image: linear-gradient(toright, #434343 0%, black 100%);

10. کریستالی

برای ایجاد گرادینت بالا از CSS زیر استفاده کنید:

background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

11. لارنسیم

برای ایجاد گرادینت بالا از CSS زیر استفاده کنید. همچنین می توانید از این کد برای ایجاد گرادینت های دیگر با رنگ های مختلف استفاده کنید.

background-image: linear-gradient(toright, #0f0c29, #302b63, #24243e);

12. اوه خوشبختی

با استفاده از این پس‌زمینه گرادیان CSS، سبکی به سایت خود اضافه کنید:

background-image: linear-gradient(toright, #00b09b, #96c93d);

13. سویه

به دنبال اضافه کردن مقداری پیتزا به وب سایت خود هستید؟ سعی کنید از این CSS برای ایجاد یک پس زمینه گرادیان استفاده کنید:

background-image: linear-gradient(toright, #870000, #190a05);

14. انبه زرد

از CSS زیر برای ایجاد پس‌زمینه گرادیان شعاعی بالا استفاده کنید:

background-image: radial-gradient(circlefarthest-side, #fceabb, #f8b500);

15. چمن آبدار

با این کد CSS عناصر HTML خود را در یک لحظه تغییر دهید:

background-image: radial-gradient( circle 759pxat-6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

16. ماهی صورتی

از CSS زیر برای ایجاد پس‌زمینه گرادیان خطی بالا استفاده کنید:

background-image: linear-gradient(toright, rgb(242, 112, 156), rgb(255, 148, 114));

17. ارباب دریا

برای ایجاد گرادینت بالا از CSS زیر استفاده کنید:

background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );

18. شکوفه گیلاس

این کد CSS یک گرادیان گیلاسی رنگ ایجاد می کند. همچنین می توانید از آن برای ایجاد شیب های دیگر با رنگ های مختلف استفاده کنید:

background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);

19. هوای تازه

برای ایجاد گرادینت نشان داده شده در بالا، از کد CSS زیر استفاده کنید:

background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );

20. ستاره ای

از CSS زیر برای ایجاد یک گرادیان آبی استفاده کنید که مطمئنا توجه را به خود جلب می کند:

background-image: radial-gradient( circlefarthest-cornerat 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );

21. ظهر تا غروب

عناصر HTML خود را با یک خط کد CSS تغییر دهید و یک گرادیان پس زمینه زیبا به راحتی اضافه کنید:

background-image: linear-gradient(toright, #ff6e7f, #bfe9ff);

22. طلوع خورشید

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

background-image: linear-gradient(toright, #ff512f, #f09819);

23. جنگل

برای ایجاد گرادینت بالا از CSS زیر استفاده کنید. شما همچنین می توانید از آن برای ایجاد شیب های دیگر با رنگ های مختلف استفاده کنید و امکانات بی پایانی را برای سفارشی سازی سایت خود به شما می دهد.

background-image: linear-gradient(toright, #5a3f37, #2c7744);

24. سوپرمن

با این کد CSS گرادیان خطی، ظاهر گرادیان نشان داده شده در بالا را دریافت کنید:

background-image: linear-gradient(toright, #0099f7, #f11712);

25. فضای اعماق دریا

از CSS زیر برای حرفه ای و صیقلی کردن پس زمینه استفاده کنید:

background-image: linear-gradient(toright, #2c3e50, #4ca1af);

26. سلطنتی

از CSS زیر برای ایجاد پس‌زمینه گرادیان خطی بالا استفاده کنید:

background-image: linear-gradient(toright, #141e30, #243b55);

27. مرجان نارنجی

برای ایجاد گرادینت بالا از CSS زیر استفاده کنید:

background-image: linear-gradient(toright, #ff9966, #ff5e62);

28. شراب کهنه

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

background-image: linear-gradient(toright, #33001b, #ff0084); 

29. آسمان صبح

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

background-image: linear-gradient(toright, #b6fbff, #83a4d4);

30. کارامل

پس زمینه خود را با این پس زمینه گرادیان خطی CSS متمایز کنید:

background-image: linear-gradient(toright, #FFD194, #D1913C);

31. غروب

به دنبال جذب مخاطب خود هستید؟ این قطعه کد CSS را برای ایجاد یک پس‌زمینه گرادیان با مضمون غروب که جذابیت وب‌سایت شما را افزایش می‌دهد، ترکیب کنید.

background-image: linear-gradient(toright, #9796f0, #fbc7d4);

32. مارگو وایت

با پیاده سازی این کد CSS یک پس زمینه گرادیان چشم نواز و ساده ایجاد کنید:

background-image: linear-gradient(toright, #ffefba, #ffffff);

33. عصر تا شب

با استفاده از این کد CSS گرادیان خطی، به همان اثر گرادیان جذابی که در بالا نشان داده شده است، برسید:

background-image: linear-gradient(toright, #005aa7, #fffde4);

34. نمای اقیانوس

زیبایی شناسی وب سایت خود را با این کد CSS ساده برای ایجاد یک پس زمینه گرادیان خطی جذاب افزایش دهید:

background-image: linear-gradient(toright, #a8c0ff, #3f2b96);

35. پر

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

background-image: linear-gradient(toright, #d3cce3, #e9e4f0); 

صفحه وب خود را با گرادیان ها زیبا کنید

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

اگر می خواهید به برخی از عناصر ساده صفحه وب خود زندگی بیافزایید، می توانید ویژگی box-shadow CSS را امتحان کنید. این به عناصر ظاهری مدرن می بخشد.

منبع مقاله