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

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

در قسمت های گذشته درباره رنگ دهی و انواع روش هایی که می توانید به عناصر مختلف در صفحه وب رنگ دهید صحبت کرده ایم. این رنگ دهی ها به شیوه یکنواخت می باشند و از زیبایی چندانی برخوردار نخواهند بود. پس تا انتها همراه آموزش گرادینت به پس زمینه با HTML & CSS باشید و از آن استفاده کنید.

گرادینت :

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

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

گرادینت به پس زمینه با HTML & CSS :

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

<!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);

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

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

دوستان به انتهای آموزش “گرادینت به پس زمینه با HTML & CSS” رسیدیم. چنانچه ابهامی داشتید، با ما در بخش کامنت ها در میان بگزارید.

خدانگهدار.

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

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