آموزش تابع radial-gradient در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع radial-gradient در CSS با من همراه باشید.

آموزش تابع radial-gradient در CSS

Free-Learn

تابع radial-gradient در CSS

با استفاده از تابع radial-gradient ( در لغت به معنی شیب شعاعی ) ( و خودمونی میگیم گریدینت ) در CSS میتوان یک شیب شعاعی با استفاده از یک یا چندین رنگ ایجاد و یا تعریف نمود.

این تابع رنگ را بصورت شعاعی ( بصورت دایره ای – از مرکز ) ایجاد میکند، ولی تابع linear-gradient میتواند رنگ را بصورت صاف ( خطی – از راست و چپ ) ایجاد نماید.

با استفاده از جهت های بالا – راست – پایین و چپ و یا با استفاده از واحدهای اندازه گیری ( همچون PX یا % ) میتوان محل / موقعیت پاشیده شدن رنگ را مشخص و یا تعریف نمود.

با استفاده از یک مقدار درصدی ( از ۰% تا ۱۰۰% ) نیز میتوان مشخص کرد که یک رنگ تا چه اندازه از کل رنگ زمینه را تشکیل بدهد. ( مثال شماره ۴ )

نسخه CSS3

Free-Learn

مثال از تابع radial-gradient در CSS

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

مثال شماره ۱ : استفاده از جهت ( از سمت راست به » چپ )

امتحان کنید

مثال شماره ۲ : استفاده از جهت ( از پایین سمت چپ به » بالا سمت راست )

امتحان کنید

مثال شماره ۳ : استفاده از واحد اندازه گیری درصد ( % ) ( مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی را مشخص میکند )

امتحان کنید

مثال شماره ۴ : تنظیم میزان پخش شدن رنگ ها ( یک مقدار از ۰% تا ۱۰۰% )

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع radial-gradient در CSS پشتیبانی میکنند یا خیر.

» عددی که در کنار -webkit- و -moz- و -o- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام تابع Chrome Firefox Opera Safari IE
()radial-gradient ۲۶٫۰
۱۰٫۰ -webkit-
۱۶٫۰
۳٫۶ -moz-
۱۲٫۱
۱۱٫۱ -o-
۶٫۱
۵٫۱ -webkit-
۱۰٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر تابع radial-gradient در CSS

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

مقدار توضیح
shape شکل شیب شعاعی را مشخص میکند – مشاهده مثال
ellipse ( بیضی – شکل پیش فرض )
circle ( دایره ای )
size سایز / اندازه نمایشی شکل شیب شعاعی را مشخص میکند – مشاهده مثال
farthest-corner ( پیش فرض – دور از گوشه ها )
closest-side ( نزدیک اطراف )
closest-corner ( نزدیک گوشه ها )
farthest-side ( دور از اطراف )
position موقعیت یا محل قرار گیری را مشخص میکند
( پیش فرض center یا ۵۰% ۵۰% )
استفاده از کلمات کلیدی مجاز زیر :
at top
at bottom
at left
at right
at top right
at top left
at bottom right
at bottom left
یا استفاده از واحدهای اندازه گیری همچون پیکسل یا درصد : مثال
( مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی را مشخص میکند )

start_color , … , end_color رنگ شماره ۱ , رنگ شماره ۲ و…

Free-Learn

نکات و توضیحات

در یک آموزش جداگانه ( بصورت کامل ) در مورد رنگ گریدینت ( Gradient ) صحبت کردم که پیشنهاد میکنم این آموزش را حتما مشاهده نمایید. ( آموزش رنگ گریدینت یا Gradient در CSS )

برای تولید انواع رنگ های گریدینت میتوانید از ابزار آنلاین فری لرن استفاده نمایید. [ مشاهده ابزار ]

برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.

  • -webkit- برای مرورگر کروم و سافاری
  • -moz- برای مرورگر موزیلا فایرفاکس
  • -o- برای مرورگر اُپرا

Free-Learn

دریافت PDF یا پرینت این مطلب