گرادینت چیست؟ آموزش گرادینت در سی اس اس

? تعریفی از گرادینت :

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

? گرادینت خطی :

یک گرادینت خطی با استفاده از یک محور فرضی به نام خط گرادینت (gradient line) تعریف می شود که رنگ ها در امتداد آن قرار می گیرند. این خط می تواند افقی, عمودی, و یا مورب با یک زاویه دلخواه باشد.

? مثالی میزنیم :

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

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

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

پارامتر اول ۴ خصوصیت زیر را می‌پذیرد :

• خصوصیت to right : تعیین می‌کند خط به صورت افقی باشد و جهت ساخت گرادینت از چپ به سمت راست باشد.

• خصوصیت to left : تعیین می‌کند خط به صورت افقی باشد و جهت ساخت گرادینت از راست به سمت چپ باشد.

• خصوصیت to top : تعیین می‌کند خط به صورت عمودی باشد و جهت ساخت گرادینت از پایین به سمت بالا باشد.

• خصوصیت to bottom : تعیین می‌کند خط به صورت عمودی باشد و جهت ساخت گرادینت از بالا به سمت پایین باشد.

? در ادامه از هر کدام مثالی زده می‌شود.

گرادینت چیست؟ آموزش گرادینت در سی اس اس

‌ ‌‌‌? گرادینت خطی :

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

? مثالی میزنیم :

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

linear-gradient(to right, red, blue);
height:70px;

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

? نکته : لازم به ذکر است چون در این مثال ارتفاع تعریف شده، گرادینت در ارتفاع 70 پیکسل و عرض 100px نمایش داده می‌شود. (پیش فرض یا حالت default، عرض کل صفحه را پوشش دهد است)

‌‌‌? گرادینت عمودی :
همانطور که در پست‌های قبل گفته شد، در گرادینت عمودی می‌توان از ۲ حالت از بالا به پایین و از پایین به بالا استفاده کرد.

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

? مثالی میزنیم :

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

background-image:linear-gradient(to top,red,blue);
height:70px;

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

شما میتوانیم آموزش کامل گرادینت در css را اط آموزش زیر فرا بگیرید: