آموزش CSSآموزش طراحی سایت

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

آشنایی با گردینت دایره ای یا گردینت شعاعی

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

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

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

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

مقدار ()radial-gradient

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

استفاده از radial-gradient در CSS

<div id="parent">

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

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

background-image: radial-gradient(blue,green)همونطور که میبینیم، گرادینت موردنظر، از رنگ آبی شروع کرد، به صورت شعاعی حرکت کرد و کارش رو تو رنگ سبز تموم کرد.

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

پاسخ منفیه.

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

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

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

background-image: radial-gradient(blue,green)

جهت دهی در تابع ()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;
}

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

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

استفاده از حالت closest-side

حالت farthest-side

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

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

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

استفاده از حالت حالت farthest-side

حالت closest-corner

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

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

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

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

استفاده از حالت closest-corner

حالت farthest-corner

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

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

نتیجه کد:

استفاده از حالت farthest-corner

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

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

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

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

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

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

مفهوم درصد ها در radial-gradient

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

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

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

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

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

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

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

background-image: radial-gradient(blue 20%,green 50%, yellow 90%)

پایان ترم

سوال:

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

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

کوییز مقاله ۴۶

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

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

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

نتیجه گیری

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

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

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

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

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

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

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

دیدگاهتان را بنویسید

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر