جلسه ۴۶ – radial gradient در CSS

منظور از گردینت شعاعی چیست؟ منظور از گردینت دایره ای چیست؟ منظور از Radial gradient چیست؟ چگونه می‌توانیم از گردینت های دایره ای در تصاویر استفاده کنیم؟

تو مقاله قبل، مقدار ()linear-gradient رو با هم یاد گرفتیم و دیدیم که توسط این مقدار، می‌تونیم به صورت خطی، از یه رنگ به رنگ دیگه منتقل بشیم. اگر هنوز با این مقدار یا ویژگی آشنا نشدید، مقاله آشنایی با linear Gradient را بخوانید.

تو این مقاله، باهم مقدار ()radial-gradient رو یاد می‌گیریم. اما فرق این مقدار با مقدار ()linear-gradient در چیه؟

توسط مقدار ()linear-graident، رنگ رو از یه مرکز شروع می‌کنیم و به اطراف اون مرکز رشد می‌دیم.

مقدار ()radial-gradient

این مقدار هم، دقیقا مثل ()linear-gradient، تو وهله اول فقط دو رنگ رو قبول می‌کنه. به مثال زیر دقت کنین:

<div id="parent">

</div>

#parent{
   background-image: radial-gradient(blue,green);
   height:800px;
   width:800px;
}

نتیجه کد به صورت زیر مشاهده می‌شه:

همونطور که میبینیم، گرادینت موردنظر، از رنگ آبی شروع کرد، به صورت شعاعی حرکت کرد و کارش رو تو رنگ سبز تموم کرد.

نکته ای که باید بهش توجه کنیم، اینه که آیا همیشه، گرادینت مورد نظر ما، به صورت دایره ای ظاهر می‌شه؟

پاسخ منفیه.

گرادینت، خودش رو متناسب با عنصر پدری که داخلش قرار داره تغییر می‌ده. فرض کنیم که عنصر پدر، یه عنصر مستطیلی باشه:

#parent{
   background-image: radial-gradient(blue,green);
   height:400px;
   width:800px;
}

نتیجه به صورت بیضی درخواهد اومد:

جهت دهی در تابع ()radial-gradient

برخلاف جهت دهی تو ()linear-gradient، تو اینجا با عباراتی مثل top، bottom و left کاری نداریم.

برای جهت دهی تو تابع radial-gradient، با چهار مفهوم زیر سر و کار داریم.

• closest-side
• farthest-side
• closest-corner
• farthest-corner

حالا این مفاهیم چه معنی‌ای دارن؟

حالت closest-side

در این حالت، گرادینت ما در نزدیک ترین ضلع نزدیک به مرکز گرادینت به اتمام می‌رسه.

به کد زیر توجه کنین:

#parent{
   background-image:radial-gradient(closest-side at 90%, blue,green);
   height:400px;
   width:800px;
}

تو این کد، ما داریم می‌گیم: مرکز گرادینت رو در ۹۰درصد عرض عنصر پدر قرار بده، از آبی شروع کن و با سبز تموم کن. و همچنین! گرادینت رو در نزدیک ترین ضلع به مرکز به اتمام برسون!

چیزی که تو نتیجه میبینیم، به شکل زیره:

حالت farthest-side

این حالت، برعکس حالت closest-side عمل می‌کنه. به این معنا که گرادینت رو در دور ترین ضلع از مرکز گرادینت پایان می‌ده.

#parent{
   background-image:radial-gradient(closest-side at 90%, blue,green);
   height:400px;
   width:800px;
}

کد فوق، نتیجه زیر رو به ما می‌ده:

حالت closest-corner

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

به مثال زیر توجه کنین:

#parent{
   background-image:radial-gradient(closest-corner at 60% 60%, blue,green);
   height:400px;
   width:800px;
}

نتیجه کد به صورت زیره:

حالت farthest-corner

دقیقا بر خلاف حالت closest-corner، گرادینت در دورترین گوشه عنصر پدر نسبت به مرکزش به اتمام می‌رسه.

#parent{
   background-image:radial-gradient(farthest-corner at 60% 60%, blue,green);
   height:400px;
   width:800px;
}

نتیجه کد:

درصد رنگ ها در ()radial-gradient

دقیقا مثل ()linear-gradient، اینجا هم از درصد رنگ ها بهره می‌بریم!

یاد گرفتیم که هر رنگ می‌تونه از درصد خاصی شروع شه و تو درصد دیگه‌ای تموم شه.

به کد زیر شامل درصد رنگ ها و radial-gradient توجه کنین:

#parent{
   background-image:radial-gradient(blue 10%,green 50%);
   height:400px;
   width:800px;
}

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

همونطور که میبینیم، رنگ آبی از ۰٪ تا ۱۰٪ ادامه داره.

رنگ سبز از ۵۰٪ شروع شده و تا ۱۰۰٪ ادامه پیدا کرده، بنابراین بین ۱۰٪ و ۵۰٪ شاهد اختلاط رنگ ها هستیم.

اگه سوال یا ابهامی براتون پیش اومد، حتما تو قسمت نظرات بپرسین تا کمکتون کنیم.

استفاده از چندین رنگ در ()radia-gradient

همانند ()linear-gradient، اینجا هم می‌تونیم از چندین رنگ متفاوت استفاده کنیم. به کد آموزشcss زیر توجه کنین:

#parent{
   background-image: radial-gradient(blue 20%,green 50%, yellow 90%);
   height:400px;
   width:800px;
}

نتیجه رو به فرم زیر مشاهده می‌کنیم:

پایان ترم

سوال:

یکی از بهترین کاربرد های گرادینت ها، ساخت تصاویر پس زمینه سادست، بدون اینکه بخوایم برای ساده ترین کار ها، دست به دامن فتوشاپ بشیم.

با چه کد CSSای می‌تونیم تصویر پس زمینه زیر رو برای وب سایتمون بسازیم؟

نکته: رنگ هارو خودتون پیدا کنین!

راهنمایی: از developer tool مرورگرتون استفاده کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله، نحوه استفاده از گرادینت شعاعی یا radial-gradient رو یاد گرفتیم.

متوجه شدیم که برای گسترش رنگ در راستای شعاعی، نیاز به استفاده از خاصیت background-image یا background و مقدار ()radial-gradient داریم.

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

بدین ترتیب فصل گرادینت ها به پایان می‌رسه. امیدوارم که بهره کافی رو برده باشید 🙂

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

مدیر محتوا: علی اسمعیلی‌