این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)

این پست با مسیر متخصص HTML مرتبط است. مشاهده مسیر (Roadmap)

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

گرادینت چیست؟

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 3000px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  direction:rtl;
}
</style>
</head>
<body>

<h1 style="text-align:center;">گرادینت به پس زمینه با HTML & CSS</h1>

<h2 style="position:fixed;">آکادمی تاتژن</h2>
<br><br>
<p>گرادینت linear سبز به آبی</p>


</body>
</html>

خروجی نیز به شکل زیر خواهد بود:

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

در کد های بالا از دستور linear-gradient در استایل ها استفاده کردیم. با کمک این دستور می توانیم گرادینت های خطی یا محوری را ایجاد کنیم. در کد بالا گرادینت از بالا به پایین بود، می توانیم در linear-gradient و در ویژگی اول جهت را مشخص کنیم. به طور مثال:

linear-gradient(to right, red , yellow);

کد بالا گرادینتی از چپ به راست را مشخص می کند که از رنگ قرمز آغاز می شود و به رنگ زرد می رسد. دقیقا مثل شکل زیر:

گرادینت دیگری تحت عنوان مدور یا شعاعی نیز وجود دارد که از مرکز شروع می شود و به حاشیه ها می رود. برای استفاده از این نوع گرادینت باید به شکل زیر عمل کنیم:

radial-gradient(red, yellow, green);

خروجی عبارت بالا باید به شکل زیر باشد:

همچنین شما می توانید از درصد نیز استفاده کنید. برای مثال کد زیر را ملاحظه بفرمایید:

background-image: linear-gradient(180deg, red, yellow);

در مثال بالا 180 جهت اجرا گرادینت است. توجه بفرمایید که مقدار بر حسب درجه باید وارد گردد.

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

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی