آموزش ایجاد گرادینت – جلسه دوم

سلام خدمت شما

در ادامه مباحث ایجاد گرادینت در خدمت شما هستیم .

کار با گرادینت ها در مقایسه با سایر خصوصیت ها در CSS مقداری پیچیده میباشد . چون تقریبا برای هر مرورگر باید کدنویسی خاصی را انجام داد .

ابندا از مرورگر Chrome شروع میکنیم :

در نظر داشته باشید که خصوصیت گرادینت یکی از خصوصیت های background است . ( جایگزین خصوصیت background-image)

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

Startfrom : جهت شروع گرادینت را مشخص میکند که یکی از چهار مقدار top , left , bottom , right را میپذیرد که مقدار پیشفرض top میباشد .

color : رنگ های گرادینت که میتواند بی نهایت باشد و باید هر رنگ را با , جدا کنید .

See the Pen Gradient by nonebakola (@non_e_bakola) on CodePen.0

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

رنگ ها را میتوانید بی نهایت قرار دهید و میتوانید نام رنگ ها را براساس هگز و نام اصلی و یا rgb , rgba قرار دهید .

گرادینت مورب

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

startfrom1 : نقطه شروع اول را تعیین میکند که یکی از مقادیر top , bottom میباشد .

startfrom2 : نقطه شروع دوم را تعیین میکند که یکی از مقادیر left , right میباشد .

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

See the Pen Gradient-2 by nonebakola (@non_e_bakola) on CodePen.0

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

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

startfrom per deg : نقطه شروع گرادینت برحسب درجه میباشد که بین ۰ تا ۳۶۰ میباشد .

See the Pen Gradient deg by nonebakola (@non_e_bakola) on CodePen.0

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

موفق باشید .

 

آموزش ایجاد گرادینت – جلسه دوم
امتیاز شما :

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.