linear-gradient

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

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

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

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

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

 

See the Pen Explaining gradient angles by Ana Tudor (@thebabydino) on CodePen.

 

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

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

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

• 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 قرار دهید.

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

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

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

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

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

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

در مثال بالا سه رنگ در راستای خط گرادینت توزیع شده اند, طوری که نقطه شروع یا 0%, رنگ زرد خالص و نقطه 50%, رنگ 009966# خالص و نقطه پایان یا 100%, بنفش خالص می باشد. نقاط میانی بین 0 تا 50 درصد رنگ هایی هستند که در دایره رنگی, بین این دو رنگ قرار دارند. و به همین شکل از 50 تا 100 درصد رنگ های میانی بین 009966# و بنفش به وجود می آیند.

به همین شکل اگر چهار رنگ تعیین کنید نقطه 0 درصد, رنگ خالص اول و 33 درصد, رنگ خالص دوم و 66 درصد رنگ خالص سوم و 100 درصد رنگ خالص چهارم خواهند بود.

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

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

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

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

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

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

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

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

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

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

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

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

چند نکته

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

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

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;

در اینجا با معرفی یک منبع شما را با ساخت چنین طرح هایی آشنا می کنیم. این منبع برای شما امکان نمایش کد را نیز فراهم کرده است.

و همچنین دموی زیر یک نمونه ساده از انجام این کار را نشان می دهد:

 

See the Pen striped background image by Mojtaba Seyedi (@seyedi) on CodePen.

 

در نهایت دموی زیر یک گرادینت ساده را نمایش می دهد که محیط خوبی است برای شما تا با تغییر مقادیر به درک بهتری از گرادینت خطی برسید:

 

See the Pen linear-gradient by Mojtaba Seyedi (@seyedi) on CodePen.

 

پشتیبانی مرورگر ها