میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

linear-gradient در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش linear-gradient در CSS با من همراه باشید.

<gradient> یک نوع تصویر می باشد که از دو یا چند رنگ که به آرامی در هم محو می شوند تشکیل می شود. به عنوان مثال از آن برای سایه روشن کردن دکمه ها و یا عناصر دیگر استفاده می شود.

در CSS گرادینت ها رنگ نیستند به همین دلیل نمی توان از آنها برای مقدار دهی به ویژگی هایی مثل color استفاده کرد. گردانیت ها نوعی تصویر هستند که می توانند مقداری برای ویژگی هایی مثل background-image و یا ویژگی هایی که تصویر را به عنوان مقدار می پذیرند باشند.

گرادینت ها مثل بقیه انواع تصاویر اندازه ذاتی ندارند بلکه بصورت پیش فرض اندازه عنصری که بر روی آن اعمال می شوند را می گیرند. اما می توان با استفاده از ویژگی background-size برای آنها اندازه تعریف کرد.


از تابع ()linear-gradient برای ساخت گرادینت (<gradient>) از نوع خطی استفاده می شود به این معنا که دو و یا چند رنگ به صورت خطی در یک راستای موافق در هم محو می شوند.

تصویر زیر یک گردانیت خطی که تشکیل شده از رنگ زرد و بنفش است را نشان می دهد:

 

linear-gradient در CSS
linear-gradient در CSS

تعریف گرادینت خطی

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

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

 

تعیین جهت گرادینت

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

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

حتی می توانید دو جهت را با هم ترکیب کنید و جهت های فرعی را بوجود بیاورید: مثلا to bottom left.

با توجه به گزینه های بالا گرادینت های زیر معتبر می باشند:

 

linear-gradient(90deg, green, yellow)
linear-gradient(-222deg, red, yellow)
linear-gradient(to top, yellow, blue)
linear-gradient(to left, green, yellow) 
linear-gradient(to bottom, yellow, black)
linear-gradient(to right bottom, green, yellow)

 

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

linear gradient direction 1

 

 

تعیین و چیدمان رنگ ها

یک گرادینت می تواند از هر تعداد رنگی که شما بخواهید تشکیل شود. کافی است رنگ ها را با استفاده از ویرگول از هم جدا کرده و در کنار جهت تعیین شده به عنوان پارامترهای تابع ()linear-gradient قرار دهید.

یک گرادینت خطی خیلی ساده می تواند از دو رنگ تشکیل شود:

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

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

yellow purple1

 

می توانید جهت این گرادینت را به راحتی تغییر دهید اما چون ما می خواهیم تمرکز بحث بر روی تعیین رنگ ها باشد با همین جهت به مثال ها ادامه می دهیم.

حال فرض کنید می خواهید گرادینتی با تعداد سه رنگ یا چهار و یا بیشتر داشته باشید, داریم:

 

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

 

 

yellow green purple

در مثال بالا سه رنگ در راستای خط گرادینت توزیع شده اند, طوری که نقطه شروع یا ۰%, رنگ زرد خالص و نقطه ۵۰%, رنگ ۰۰۹۹۶۶# خالص و نقطه پایان یا ۱۰۰%, بنفش خالص می باشد. نقاط میانی بین ۰ تا ۵۰ درصد رنگ هایی هستند که در دایره رنگی, بین این دو رنگ قرار دارند. و به همین شکل از ۵۰ تا ۱۰۰ درصد رنگ های میانی بین ۰۰۹۹۶۶# و بنفش به وجود می آیند.

به همین شکل اگر چهار رنگ تعیین کنید نقطه ۰ درصد, رنگ خالص اول و ۳۳ درصد, رنگ خالص دوم و ۶۶ درصد رنگ خالص سوم و ۱۰۰ درصد رنگ خالص چهارم خواهند بود.

به جای اینکه توزیع رنگ ها را به عهده مرورگر بگذارید می توانید مکان نقطه ای که در آن رنگ بصورت خالص است را خودتان تعیین کنید. فرض کنید می خواهیم در مثال اول که شامل سه رنگ بود نقطه رنگ سبز خالص به جای ۵۰ درصد, نقطه ۲۰ درصد باشد, داریم:

linear-gradient(to right, yellow, #009966 20%, purple);
 
yellow green 20 purple

 

همانطور که مشاهده می کنید فاصله بین رنگ سبز خالص و زرد خالص کاهش پیدا کرد چرا که مکان رنگ سبز, در نقطه ۲۰ درصد تعیین شده است.

در گرادینت ها به مجموع رنگ و مکانی که برای آن تعیین می شود color-stop می گویند. و همانطور که در مثال های اول مشاهده کردید تعیین مکان اختیاری است. همچنین color-stop جایی است که در آن نقطه, رنگ بصورت کامل و خالص است و هنوز شروع به محو شدن نکرده است.

حال اگر بخواهیم بر روی خط گرادینت بیشتر از یک نقطه به عنوان سبز خالص داشته باشیم چه؟ مثلا فرض کنید می خواهیم که رنگ سبز از نقطه ۲۰ درصد شروع شده و به جای محو شدن به سمت رنگ بنفش, همان رنگ سبز خالص تا نقطه ۸۰ درصد باقی بماند و در نقطه ۸۰ درصد شروع به محو شدن به رنگ بنفش کند. برای این کار کافی است برای رنگ سبز دو color-stop پشت سر هم تعیین کنیم:

linear-gradient(to right, yellow, #009966 20%, #009966 80%, purple);

 

 

yellow green 20 green 80 purple

 

حال اگر بخواهیم یک گرادینت خطی با لبه های رنگی تیز شبیه به شکل زیر داشته باشیم چه؟

linear-gradient در CSS
linear-gradient در CSS

مقادیر زیر را با دقت مشاهده کنید:

linear-gradient(to right, yellow, yellow 20%, #009966 20%, #009966 80%, purple 80%, purple);

اتفاقی که افتاد از این قرار بود که ما شش color-stop برای رنگ ها انتخاب کردیم یعنی دو color-stop برای هر رنگ که یک نقطه شروع و یک نقطه پایان بودند. به عنوان مثال رنگ زرد نقطه شروع ۰ درصد و نقطه پایان ۲۰ درصد را دارد. حال دقیقا در مکانی که نقطه زرد می خواهد به رنگ بعدی محو شود همان مکان را نقطه شروع رنگ بعدی تعیین می کنیم (یعنی همان ۲۰ درصد که البته می تواند ۲۱ درصد هم باشد), با این عمل می توانیم لبه های تیز را به وجود بیاوریم. همین اتفاق نیز برای دو رنگ دوم یعنی سبز و بنفش نیز می افتد.

برای ساخت چنین افکت هایی که رنگ ها بصورت مساوی توزیع می شوند اگر تعداد رنگ ها زیاد شد, برای پی بردن به فاصله بین color-stopها از هم, کافی است ۱۰۰ را بر تعداد رنگ ها تقسیم کنید. به عنوان نمونه در مثال زیر تعداد رنگ ها هفت رنگ است پس با تقسیم عدد ۱۰۰ به هفت به عدد تقریبی ۱۴٫۳ میرسیم و داریم:

linear-gradient(to right, red, red 14.3%, orange 14.3%, orange 28.6%, yellow 28.6%, yellow 42.9%, green 42.9%, green 57.2%, blue 57.2%, blue 71.5%, indigo 71.5%, indigo 85.8%, violet 85.8%, violet);

 

linear-gradient در CSS
linear-gradient در CSS

 

چند نکته

می توانید به جای درصد از دیگر واحدهای طول مثل px و em برای تعیین مکان یک رنگ استفاده کنید. همینطور می توانید از متدهای دیگر تعیین رنگ مثل ()rgb(), hsl و غیره استفاده کنید. حتی می توانید از مقادیر transparent نیز بهره برده و افکت های جالبی بسازید.

اگر رنگ اول و آخر را بدون عددی برای تعیین مکان آنها رها کنیم به این معنی است که آنها به ترتیب ۰ و ۱۰۰ درصد می باشند پس:

linear-gradient(red, white 20%, blue);

برابر است با:

linear-gradient(red 0%, white 20%, blue 100%);

با استفاده از گرادینت خطی و ویژگی های background-size و background-repeat می توانید طرح های جالبی بسازید. کافی است اندازه پس زمینه را تعیین کنید و اجازه دهید تا پس زمینه تکرار شود:

background-image: linear-gradient(to right, white 50%, black 50%);
background-size: 50px 100%;
background-repeat: repeat;

امیدواریم آموزش linear-gradient در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
csslinear-gradient در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟