radial-gradient

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

در این نوع گرادینت برخلاف <linear-gradient> که رنگ ها از یک سمت عنصر به سمت دیگر آن در کنار هم قرار می گیرند, رنگ ها از یک نقطه بوجود می آیند و بصورت دایره یا بیضی شکل به سمت بیرون در هم محو می شوند.

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

تعریف گرادینت شعاعی

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

رنگ ها روی یک شعاع فرضی حرکت می کنند. که نقطه شروع این شعاع فرضی در مرکز گرادینت قرار می گیرد. وقتی مکان یک رنگ 0% تعیین می شود یعنی اول شعاع فرضی قرار می گیرد و زمانی که 100% تعریف می شود یعنی انتهای آن, جایی که شعاع فرضی, شکل مربوط به گرادینت را قطع می کند.

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

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

radial-gradient(yellow, #009966, purple);

شکل زیر رفتار پیش فرض گرادینت شعاعی را نشان می دهد.

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

radial-gradient(circle, yellow, #009966, purple);

کلمات کلیدی برای تعیین شکل به دایره circle و برای بیضی ellipse می باشند.

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

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

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

radial-gradient(yellow, #009966 20%, purple);

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

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

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

radial-gradient(yellow, #009966 20%, #009966 50%, purple);

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

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

radial-gradient(yellow, yellow 20%, #009966 20%, #009966 50%, purple 50%, purple);

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

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

radial-gradient(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 درصد می باشند پس:

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

برابر است با:

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

 

تعیین مکان و اندازه گرادینت

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

radial-gradient(at 0% 0%, yellow, #009966, purple);

همیشه برای تعیین مکان گرادینت باید از کلمه کلیدی at استفاده شود و بعد از آن مختصات افقی و سپس عمودی را تعیین می کنیم. همینطور امکان استفاده از کلمات کلیدی left و right و غیره نیز هست. اگر مختصات برای هر یک از محور ها تعیین نشود مقدار پیشفرض یعنی center بعنوان مقدار آن محور در نظر گرفته می شود.

خطوط زیر مثال هایی از تعیین مکان به صورت صحیح هستند:

radial-gradient(circle at 0% 0%, yellow, #009966, purple);
radial-gradient(at 25%, yellow, #009966, purple); /* Y = center */
radial-gradient(ellipse at left bottom, yellow, #009966, purple);
radial-gradient(at center top, yellow, #009966, purple);

 

برای تعیین اندازه گرادینت نیز می توان قبل از کلمه نوشته شده برای تعیین شکل مقدار اندازه را مشخص کرد:

radial-gradient(100px circle at 0% 50%, yellow, #009966, purple);

همانطور که مشاهده می کنید رنگ آخر سراسر عنصر را می پوشاند. اگر بخواهید گرادینت در یک نقطه متوقف شود و سپس تکرار شود می توانید از repeating-radial-gradient استفاده کنید.

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

radial-gradient(200px 100px ellipse at 25% 50%, yellow, #009966, purple);

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

به عنوان مثال:

radial-gradient(50px circle at left , yellow, #009966, purple);

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

• closest-side: اندازه گرادینت طوری تنظیم می شود تا محیط گرادینت به نزدیک ترین دیواره عنصر به مرکز گرادینت, برسد. وقتی شکل بیضی باشد حتما شکل از دو طرف باید به دیواره عنصر برسد. اما در مورد دایره فقط کافی است که یک طرف دایره دیواره عنصر را ملاقات کند.

شکل زیر را مشاهده کنید:



شکل سمت چپ اندازه ثابت 50 پیکسل گرفته است:

radial-gradient(50px circle at 75px 75px, yellow, #009966, purple);

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

radial-gradient(closest-side circle at 75px 75px, yellow, #009966, purple);

 

حال مثالی بیضی شکل:



شکل سمت چپ اندازه ثابت دارد:

radial-gradient(25px 50px ellipse at 100px 100px, yellow, #009966, purple);

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

radial-gradient(closest-side ellipse at 100px 100px, yellow, #009966, purple);

 

• farthest-side: مثل closest-side عمل می کند تنها محیط شکل گرادینت باید به دورترین دیواره عنصر نسبت به مرکز گرادینت برسد.
• closest-corner: مثل closest-side می باشد فقط به جای دیواره، محیط شکل باید به نزدیکترین گوشه عنصر برسد.



شکل سمت چپ:

radial-gradient(closest-corner circle at 100px 100px, yellow, #009966, purple);

شکل سمت راست:

radial-gradient(closest-corner ellipse at 100px 100px, yellow, #009966, purple);

توجه داشته باشید که این مقدار برای شکل بیضی با مقدار closest-side دارای یک نتیجه یکسان از نظر نسبت ابعادی است.

 

• farthest-corner: شبیه به closest-corner با این تفاوت که باید محیط شکل به دورترین گوشه عنصر برسد.

در دموی زیر دو گرادینت شعاعی رسم شده است, لطفا با تغییر مقادیر سعی کنید تا چگونگی کار با گرادینت شعاعی را به بهترین نحو درک کنید:

 

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

 

ساخت طرح های خاص با گرادینت

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

 

See the Pen radial gradient pattern by Mojtaba Seyedi (@seyedi) on CodePen.

 

در این آدرس زیر طرح های بیشتری همراه با کدهای آنها فراهم شده است:

• lea.verou.me/css3patterns

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