آموزش CSS – گرادینت در CSS3

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با خاصیت Background در CSS3 آشنا شدید. در این بخش قصد داریم به گرادینت در CSS3 یپردازیم.

ویژگی gradient در CSS3 به شما امکان ساخت یک گرادیان از یک رنگ به رنگ دیگر بدون استفاده از تصویر را می دهد. (gradient : شیب)

استفاده از گرادینت در CSS3

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

با استفاده از گرادینت در CSS3 می توانید زمان بارگذاری صفحه وب را کاهش بدید و همچنین در استفاده از پهنای باند صرفه جویی کنید.

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

گرادینت در CSS3 در دو استایل linear (خطی) و radial (شعاعی) در دسترس است.

ساخت Linear Gradient در CSS3

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

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

سینتکس ساده ساخت گرادینت خطی بصورت زیر است

Linear Gradient – بالا به پایین

Linear Gradient – چپ به راست

Linear Gradient – مورب

ست کردن مسیر Linear Gradient با زاویه

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

زاویه ۰deg از پایین به بالا یک گرادیان را می سازد و در جهت مثبت عقربه های ساعت حرکت می کند.

مثلا زاویه ۹۰deg یک گرادیان از چپ به راست را ایجاد می کند.

ساخت Linear Gradient با چندین رنگ

تعیین محل توقف رنگ

این مقدار بصورت درصدی یا یک مقدار مطلق تعیین می شود.

تکرار Linear Gradient

شما می توانید برای تکرار یک گرادیان خطی از تابع repeating-linear-gradient() بهره ببرید.

ساخت Radial Gradient در CSS3

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

آرگومان های تابع radial-gradient() بصورت زیر است:

  • position – نقطه شروع گرادیان را مشخص می کند که می تواند با واحد ها (px, em یا درصد) یا کلمه کلیدی (left, bottom و غیره) تعیین شود.
  • Shape – مشخص کننده شکل پایانی گرادیان است که می تواند مقادیر circle یا ellipse باشد.
  • Size – مشخص کننده اندازه شکل پایانی گرادینت است. مقدار پیش فرض farthest-side است.

ست کردن shape گرادینت شعاعی

اگر این آرگومان بدون مقدار باشد, مقدار پیش فرض circle خواهد بود.

ست کردن size گرادینت شعاعی

این آرگومان می توانید مقادیر  واحدی یا کلمه کلیدی closest-side, farthest-side, closest-corner, farthest-corner دریافت کند.

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

شما می توانید گرادینت شعاعی را با تابع repeating-radial-gradient() تکرار کنید.

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

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

 

امیدوارم در این بخش آموزش CSS, از گرادینت در CSS3 نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link