گرادیان شعاعی css. گرادیان های CSS3: دایره ای و بیضوی

شیب(از لات شیب ها- راه رفتن) - مشخصه ای است که جهت سریعترین افزایش مقدار معین را نشان می دهد که مقدار آن از یک نقطه در فضا به نقطه دیگر تغییر می کند. یک گرادیان یک انتقال صاف بین دو یا چند رنگ ایجاد می کند. اغلب استفاده می شود، بنابراین تسلط عالی بر این ابزار است پیش نیاز کار موثردر فتوشاپ
گرادیان را می توان مستقیماً روی محتوای لایه اعمال کرد یا می توانید از آن استفاده کنید لایه جدیدبا یک گرادیان پر کنید ( گرادیان روی لایه خودش خواهد بود و یک لایه ماسک دارید که می توانید از آن برای پوشاندن پیکسل های لایه استفاده کنید).
آیکون شیب (1 ) در همان گروه با ابزار پیدا خواهید کرد پر کردن(رنگ باکر)، کلید جی(یا تغییر مکان+ جیبرای جابجایی بین آنها).

نوع گرادیان با دکمه های نوار گزینه ها تنظیم می شود ( 2 )
گرادیان خطی(شیب خطی) - انتقال در یک خط مستقیم در امتداد یک جهت خاص انجام می شود.

گرادیان شعاعی(شعاع شیب) - تغییر رنگ به طور مساوی در تمام جهات از نقطه مرکزی.

گرادیان مخروطی(شیب زاویه) - انتقال رنگ در یک دایره در مرکز نقطه داده شدهدر جهت عقربه های ساعت

گرادیان دیدی(شیب بازتاب شده) - دو شیب خطی که از نقطه شروع در جهات مخالف منتشر می شوند.

شیب الماس(Diamond Gradient) - تشکیل خطوط به شکل لوزی.

در یک جعبه مستطیل شکل ( 3 ) می توانید گرادیان پیش فرض فعلی را ببینید. اگر روی فلش کنار آن کلیک کنید، پالت گرادیان باز می شود. با کلیک بر روی آن با دکمه ماوس می توانید گرادیان مورد نظر خود را انتخاب کنید.

با کلیک بر روی نمونه گرادیان پر کردن، پنجره ویرایش گرادیان باز می شود ( 3 ).
مجموعه‌های بخش (پیش‌تنظیمات) شامل گرادیان‌های آماده است.
نام(نام) - نام شیب. سفارشی(Custom) یک گرادیان با تنظیمات سفارشی است.
شیب(نوع گرادیان). دو گزینه وجود دارد: مداوم(جامد) و سر و صدا(سر و صدا)
صاف کردن(صافی) - نرمی انتقال رنگها در شیب.

اگر می خواهید یک گرادینت از قبل موجود را ویرایش کنید، روی تصویر کوچک آن کلیک کنید.
به نوار رنگ در مرکز پنجره توجه کنید - این نمونه ای از یک گرادیان قابل ویرایش با انتقال رنگ و شفافیت است. زیر نوار و بالای آن نشانگرها ( 4 ) (مربع هایی با مثلث های بالا یا پایین). کسانی که زیر نوار هستند مسئول انتقال رنگ هستند. اگر روی هر نشانگری کلیک کنید، مثلث بالای آن رنگی می شود، یعنی نشانگر فعال شده و آماده ویرایش است. چه کاری می توان کرد؟ می توانید آن را در هر جهتی در امتداد نوار رنگ حرکت دهید، می توانید رنگ آن را تغییر دهید. برای این کار روی کادر کلیک کنید رنگ(رنگ) ( 5 ) و در پنجره پالت رنگ(انتخاب کننده رنگ) سایه مورد نظر را انتخاب کنید ( 6 ).

اگر روی هر کدام کلیک کنید فضای خالیبین نشانگرها ظاهر می شود نشانگر جدید، که می توانید آن را نیز جابجا کرده و تنظیم کنید. می توانید نشانگر را با ماوس یا با تغییر حرکت دهید مقدار عددیدر زمینه موقعیت(محل). 0% لبه سمت چپ نوار رنگ، 100% سمت راست است.

لغزنده های شفافیت در بالای نوار رنگ قرار دارند، آنها شفافیت پر کردن گرادیان را محدود می کنند. آنها به همان روش رنگی ویرایش می شوند، اما به جای تنظیم رنگ، باید مقدار شفافیت (تصادف) را تنظیم کنید، محل نشانگرهای شفافیت را می توان در فیلد مشخص کرد. موقعیت(محل).

اگر به نشانگری شبیه به نشانگر موجود نیاز دارید، می‌توانید به سادگی آن را با کشیدن همزمان با فشار دادن کلید کپی کنید alt.

اگر نیاز به حذف یک محدود کننده رنگ غیر ضروری دارید، به سادگی آن را به خارج از نوار انتقال رنگ منتقل کنید یا یکی از دکمه ها را انتخاب کرده و فشار دهید. حذف(حذف): دکمه پایین- برای نشانگرهای رنگی، بالاترین - برای نشانگرهای شفافیت.

بیایید یک گرادیان جدید ایجاد کنیم. یک کادر محاوره ای باز کنید (با کلیک بر روی کادر 3 ). یک رنگ پر شده برای نشانگر رنگ سمت چپ انتخاب کنید، روی نشانگر سمت راست کلیک کنید ( 8 )، رنگ خود را برای آن در میدان تنظیم کنید نام(نام) ( 10 ) نام آن را وارد کرده و دکمه را فشار دهید جدید(جدید)( 11 )، گرادیان شما در کادر Presets ظاهر می شود، روی ok کلیک کنید.

ترجمه: اوکسانا گودکووا.

برای اینکه به دنبال تکه های اطلاعات در اینترنت نباشید، بهتر است همه چیز را در یک مکان جمع آوری کنید. امروز در مورد صحبت خواهیم کرد گرادیان های CSS3- یک ویژگی ضروری، اغلب استفاده می شود و، البته، مفید در توسعه و طرح. میل به ساختن یک مقاله دایره المعارفی وجود داشت، اما این که چگونه شد، قضاوت با شماست.

"Gradient - تایپ کنید گرافیک کامپیوتریکه در آن باید رنگ و شفافیت برخی از نقاط (کلیدی) را تنظیم کرد و رنگ و شفافیت نقاط باقیمانده را با توجه به معینی نسبت به آنها محاسبه کرد. الگوریتم های ریاضی. بنابراین، شما می توانید انتقال صاف از یک رنگ به رنگ دیگر با تنظیم مختصات و رنگ اولیه و نقاط پایانی" ویکیپدیا

به هر حال، برای کسانی که تازه شروع به یادگیری CSS کرده اند - یک مقاله فوق العاده از ناتالیا میتروفانوا - نحوه استفاده از CSS. به همه تازه واردها به شدت توصیه می شودآشنا کردن. در دسترس، قابل درک - به طور کلی، عالی
اما به موضوع مقاله برگردیم. دو نوع گرادیان در CSS3 وجود دارد - خطی و شعاعی. هر نوع را با جزئیات بیشتری در نظر بگیرید تا ویژگی های استفاده از آنها را درک کنید.

گرادیان خطی CSS3

گرادیان خطی، گرادیانی است که در آن یک رنگ به طور متناسب بین دو نقطه در یک خط مستقیم جابجا می شود. ساده ترین راه با یک مثال است:

Div (/*-prefix-linear-gradient(start-color, end-color);*/ background: -moz-linear-gradient(#FFF, #000)؛ پس زمینه: -ms-linear-gradient(#FFF, #000)؛ پس‌زمینه: -o-linear-gradient(#FFF, #000)؛ پس‌زمینه: -webkit-linear-gradient (#FFF، #000)؛

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

بیایید جلو برویم و بیشتر نگاه کنیم مثال پیچیده- جهت گرادیان را تغییر دهید. جهت در نحو نامیده می شود نقطهو به دو مقدار نیاز دارد - از کجا و کجا. در کل پنج مقدار وجود دارد: بالا, پایین, ترک کرد, درستو مرکزبر این اساس در نوشتن جهت باید از دو معنا استفاده کرد. اولی «از کجا» است، دومی «از کجا». اما کمی ظرافت وجود دارد - اگر فقط یک مکان مشخص شده باشد - مکان دوم به طور پیش فرض خواهد بود مرکز. این را در پروژه های خود در نظر بگیرید.

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

Div ( پس‌زمینه: خطی- گرادیان (بالا، #FFF، #000)؛ ) div ( پس‌زمینه: گرادیان خطی (بالا، #FFF، #000)؛ )

این ورودی ها در واقع مشابه مثال قبلی هستند، اما برای سادگی و کاهش اندازه، معمولاً جهت در این مورد به عنوان غیر ضروری حذف می شود.

به عنوان جایگزینی برای جهت، بلکه به عنوان یک افزودنی، می‌توانید از زاویه‌هایی در رکورد استفاده کنید که مقدار آن‌ها را می‌توان در چندین مقدار از جمله درجه، رادیان و سایر موارد هندسی تنظیم کرد. اما برای سادگی بهتر است از درجه استفاده کنید تا برای همه روشن شود. درجه بندی در جهت عقربه های ساعت است - 0 یا 360 بالا، 90 سمت راست، 180 پایین و 270 سمت چپ است. ضبط با علامت منفی قابل قبول است - در این مورد، فارغ التحصیلی در خلاف جهت عقربه های ساعت می رود.

برای درک این فرآیند چند مثال را در نظر بگیرید:

Ex1 ( پس‌زمینه: خطی- گرادیان (چپ، #FFF، #000)؛ ) ex2 (پس‌زمینه: گرادیان خطی (راست، #FFF، #000)؛ ) ex3 (پس‌زمینه: گرادیان خطی (225 درجه، #FFF، # 000)؛

گزینه اول از چپ به راست، دوم از راست به چپ، سوم 225 درجه است. درجه به شما این امکان را می دهد که گرادیان را با دقت بیشتری هدایت کنید، که با کلمات نمی توان به آن دست یافت.

بعد نکته جالبهنگام کار با گرادیان -

اضافه کردن رنگ توقف

تا اینجا ما فقط از شیب های ساده متشکل از دو رنگ استفاده کرده ایم. حالا بیایید یک مثال پیچیده تر بیاوریم - رنگ دیگری را به گرادیان اضافه کنید. کم و بیش مثل این:

Div (پس‌زمینه: خطی- گرادیان (چپ، #000، #FFF، #000)؛)

این مثال اضافه می کند رنگ سفیدبین دو سیاه نتیجه یک گرادیان است که از سیاه به سفید و بازگشت به حالت اولیه- به مشکی کارهای تصویری بیشترمن رنگ های توقف را در چندین مثال نشان خواهم داد:

Ex1 (پس‌زمینه: خطی- گرادیان (چپ،#000،#FFF،#000);) ex2 (پس‌زمینه: گرادیان خطی (سمت چپ،#000،#FFF 75%,#000);) ex3 (پس‌زمینه: خطی- گرادیان (پایین، #000، #FFF 20 پیکسل، #000؛) ex4 (پس‌زمینه: گرادیان خطی (45 درجه، #000، #FFF، #000، #FFF، #000)؛)

نتیجه در تصویر:

در مثال اول، دقیقاً همان چیزی که در بالا ذکر شد - سفید دقیقاً بین دو سیاهپوست است (لعنتی، چقدر از نظر سیاسی نادرست بود).

مثال دوم هم همینطور است، فقط نشان می دهد که رنگ توقف در کجا قرار خواهد گرفت. AT این مورد- 75 درصد از ابتدا. نحو ساده است - مثال نشان می دهد. بعد از مقدار رنگ، موقعیت را بر حسب درصد مشخص کنید. نیازی به کاما نیست.

مثال سوم نشان می دهد که مقدار موقعیت رنگ توقف را می توان نه تنها بر حسب درصد، بلکه در پیکسل ها نیز مشخص کرد (و همچنین در تمام واحدهای دیگری که CSS درک می کند، اما درصدها و پیکسل ها عمدتاً استفاده می شوند)

چهارم - پنج توقف رنگ، جهت تغییر کرد. همه چیز کاملا ساده است.

گرادیان شعاعی CSS3

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

E ( پس زمینه: گرادیان شعاعی (موقعیت یا زاویه، شکل یا اندازه، از توقف، رنگ توقف، به توقف)؛ )

نحو تقریباً یکسان است، با یک تفاوت - شکل و اندازه اضافه شده است. شکل دو نوع است - بیضی و دایره (بیضی و دایره، به ترتیب، مقدار پیش فرض: بیضی) مقدار اندازه می تواند یکی از شش مقدار را بگیرد. در مورد آنها در زیر.

ساده ترین نحو به این صورت است:

Div (پس‌زمینه: گرادیان شعاعی (#FFF،#000)؛)

گرادیان های شعاعی باید با پیشوند فروشنده مرورگر مشخص شوند:

Div ( پس‌زمینه: -moz-radial-gradient(#FFF, #000)؛ پس‌زمینه: -ms-radial-gradient(#FFF, #000); پس‌زمینه: -webkit-radial-gradient(#FFF, #000); )

نتیجه اجرای کد در تصویر آمده است:

بیایید به یک کد پیچیده تر نگاه کنیم:

Div ( پس‌زمینه: گرادیان شعاعی (شامل دایره، #FFF، #000)؛ )

لطفاً توجه داشته باشید که در مثال دو انتخابگر ذکر شده در بالا وجود دارد - شکل و اندازه (موقعیت). نامگذاری اندازه مقدار انتخابگر دشوار است، بلکه مکان آن است. اما در مستندات رسمی، این انتخابگر به عنوان تعیین شده است اندازه،بنابراین ما آن را اندازه می نامیم. دایره-فقط به این معنی است که گرادیان گرد خواهد بود، نه بیضوی. حاوی-یکی از کلمات کلیدی که انتخابگر اندازه می تواند آن را بپذیرد. من هر کدام را توضیح می دهم تا واضح تر شود:

• نزدیکترین سمت- سمت نزدیک گرادیان از مرکز به سمت نزدیکترین سمت عنصر گسترش می یابد (برای دایره، یا به هر دو طرف افقی و عمودی (برای بیضی).
• نزدیکترین گوشه- نزدیکترین گوشه اندازه گرادیان به گونه ای است که از مرکز تا نزدیکترین گوشه عنصر امتداد می یابد.
• دورترین سمت- دورترین طرف گرادیان از مرکز به سمت بیرونی ترین سمت عنصر گسترش می یابد (برای دایره، یا به هر دو سمت افقی و عمودی (برای بیضی).
• دورترین گوشه- دورترین گوشه اندازه گرادیان به گونه ای است که از مرکز تا دورترین گوشه عنصر امتداد می یابد.
• حاوی- به همین ترتیب نزدیکترین سمت.
• پوشش دادن- به همین ترتیب دورترین گوشه.

چند مثال برای توضیح:

Ex1 ( پس‌زمینه: شیب شعاعی (دایره دورترین سمت، #000، #FFF) گرادیان (بالا سمت راست، پوشش دایره، #FFF، #000)؛ ) ex4 (زمینه: گرادیان شعاعی (80٪ 50٪، نزدیکترین سمت دایره، #FFF، #000)؛ )

نتیجه اجرای هر کد:

مثال اول یک گرادیان دایره ای است که به سمت دور امتداد می یابد (با استفاده از دورترین سمت)

دوم - مرکز در سمت چپ است، شیب به سمت دور گسترش یافته است.

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

چهارم - مرکز در نقطه ای به عرض 50 درصد و ارتفاع 80 درصد و شیب گرد به نزدیکترین ضلع قرار دارد.

اضافه کردن رنگ توقف

مانند گرادیان های خطی، شیب های شعاعی نیز می توانند با چندین رنگ کار کنند. کاربرد آنها هیچ تفاوتی با موارد خطی ندارد، بنابراین من توضیح نمی دهم، فقط چند مثال می زنم:

Ex1 ( پس‌زمینه: گرادیان شعاعی (دایره دورترین ضلع،#000،#FFF،#000); ex3 ( پس‌زمینه: گرادیان شعاعی (چپ، دورترین سمت دایره،#FFF،#000 25%,#FFF 75%,#000); ,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000)؛ )

شما می توانید همه چیز را از روی کد ببینید، شما قبلاً طراحان گرادیان با تجربه هستید

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

برنج. 1. گرادیان شعاعی و خطی

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

مثال 1 گرادیان

نتیجه این مثالنشان داده شده در شکل 1. لطفاً توجه داشته باشید که این مثال در IE10 و Opera 12 به درستی کار می کند. نسخه های اولیهاین مرورگرها از گرادیان های شعاعی پشتیبانی نمی کنند و در Safari 5.1 که به پیشوند -webkit نیاز دارد، کار نمی کنند.

برنج. 2. گرادیان شعاعی

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

موقعیت یک نقطه به همان روشی که مقادیر ویژگی پس‌زمینه موقعیت با استفاده از کلمات کلیدی یا واحدهای موجود مانند پیکسل یا درصد نوشته می‌شود. ترکیبات ممکن در زیر ذکر شده است.

• در بالا سمت چپ = در سمت چپ بالا = در 0% 0% (در سمت چپ گوشه بالایی);
• در بالا = در مرکز بالا = در مرکز بالا = در 50% 0% (مرکز در بالا);
• در سمت راست بالا = در بالا سمت راست = در 100% 0% (گوشه سمت راست بالا).
• در سمت چپ = در مرکز چپ = در مرکز چپ = در 0% 50% (چپ و مرکز).
• در مرکز = در مرکز = در 50% 50% (مرکز) مقدار پیش فرض است.
• در سمت راست = در مرکز راست = در مرکز راست = در 100% 50% (راست و مرکز).
• در پایین سمت چپ = در پایین سمت چپ = در 0% 100% (گوشه سمت چپ پایین)؛
• در پایین = در مرکز پایین = در مرکز پایین = در 50% 100% (مرکز در پایین).
• در پایین سمت راست = در پایین سمت راست = در 100% 100% (در گوشه پایین سمت راست).

اگر موقعیت نقطه شروع را برای مثال 1 روی 40px 45px قرار دهیم و رنگ دوم را کمی تیره تر کنیم (#0076a5)، توپ کمی واقعی تر به دست می آید (شکل 3).

برنج. 3. نقطه شروع گرادیان را تغییر دهید

دو شکل گرادیان شعاعی وجود دارد - یک دایره (دایره) و یک بیضی (بیضی) که در ظاهر آنها متفاوت است. پیش فرض یک گرادیان بیضی است.

تفاوت بین گرادیان دایره ای و بیضی برای رنگ های #f9e497 و #ffb60f در شکل نشان داده شده است. 4.

برنج. 4. مدل های متفاوت، انواع مختلف، انواع متفاوت، مدل های مختلفشیب

برای عنصری که عرض آن برابر با ارتفاع است، مانند مثال بالن، تفاوت بین انواع گرادیان قابل توجه نخواهد بود.

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

مثال 2: گرادیان دایره ای

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

به نحو دقت کنید، اگر بخواهیم شکل گرادیان را با علامت نقطه شروع ترکیب کنیم، ابتدا کلمه کلیدی دایره می آید و سپس موقعیتی که با یک فاصله از هم جدا شده است. نتیجه این مثال در شکل نشان داده شده است. 5.

برنج. 5. گرادیان دایره ای

در کنار نوع گرادیان، می توانید اندازه آن را نیز تعیین کنید که بستگی به کلمات کلیدی استفاده شده دارد. اندازه با فاصله بعد از نوع گرادیان (دایره یا بیضی) نوشته می شود.

روی میز. 1 لیست شده مقادیر ممکناندازه با توضیحات و نتیجه برای سفید و سیاه. کد و نمای برای یک گرادیان دایره ای و بیضی داده شده است.

برگه 1. کلمات کلیدی برای تغییر اندازه گرادیان

معنی	کد	شرح	چشم انداز
	پس زمینه: گرادیان شعاعی (دایره نزدیکترین ضلع در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس زمینه: گرادیان شعاعی (بیضی نزدیکترین ضلع در 30 پیکسل 20 پیکسل، #fff، #000)؛	شکل گرادیان با نزدیک ترین سمت بلوک به آن مطابقت دارد.
	پس‌زمینه: گرادیان شعاعی (دایره نزدیک‌ترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس زمینه: گرادیان شعاعی (بیضی نزدیکترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛	شکل گرادیان بر اساس اطلاعات مربوط به فاصله تا نزدیکترین گوشه بلوک محاسبه می شود.
	پس زمینه: گرادیان شعاعی (دایره دورترین ضلع در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس زمینه: گرادیان شعاعی (بیضی دورترین ضلع در 30 پیکسل 20 پیکسل، #fff، #000)؛	گرادیان به سمت دور بلوک گسترش می یابد.
دورترین گوشه	پس زمینه: گرادیان شعاعی (دایره دورترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس زمینه: گرادیان شعاعی (بیضی دورترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛	شکل گرادیان بر اساس اطلاعات مربوط به فاصله تا گوشه دور بلوک محاسبه می شود.

برای نقطه شروع مرکزی، به نظر می رسد شیب ها مطابقت دارند. اما اگر نقطه شروع را در گوشه قرار دهید، شیب ها متفاوت خواهند بود. مثال 3 از مقداری استفاده می کند که نقطه شروع را بر حسب پیکسل مشخص می کند.

مثال 3 اندازه گرادیان

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. 6.

برنج. 6. استفاده از مقدار نزدیکترین گوشه

مانند یک گرادیان خطی، می‌توانید چندین رنگ را مشخص کنید، موقعیت آن‌ها را تنظیم کنید و بین رنگ‌ها جابه‌جایی واضح ایجاد کنید. برای این کار تعداد دلخواه رنگی که با کاما از هم جدا شده اند لیست می شود و بعد از مقدار رنگ، یک فاصله با موقعیت آن قرار می گیرد که می توان آن را به صورت پیکسل یا درصد مشخص کرد. مقادیر شدید 0٪ و 100٪ را می توان حذف کرد، آنها به طور خودکار فرض می شوند.

هنگامی که موقعیت یک رنگ با موقعیت رنگ دیگر مطابقت داشته باشد، تغییر تیز به دست می آید، همانطور که در مثال 4 نشان داده شده است. که خیلی زیبا به نظر نمی رسد

مثال 4. انتقال ناگهانی

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. 7.

برنج. 7. انتقال تیز بین رنگ های مختلف

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

برنج. 1. گرادیان شعاعی و خطی

یک گرادیان شعاعی با استفاده از ویژگی پس‌زمینه یا تصویر پس‌زمینه ایجاد می‌شود.

نحو

تصویر زمینه: گرادیان شعاعی([ دایره ||<радиус>][در<позиция>]؟ ، | [ بیضی || [<радиус> | <проценты>] (2)] [ در<позиция>]؟ ، | [ [ دایره | بیضی] ||<размер>][در<позиция>]؟ ، | در<позиция> , <цвет> [ , <цвет> ]*)

نشانه گذاری

	شرح	مثال
<тип>	نوع مقدار را مشخص می کند.	<размер>
A&&B	مقادیر باید به ترتیب مشخص شده خروجی شوند.	<размер> && <цвет>
A | ب	نشان می دهد که فقط یکی از مقادیر پیشنهادی (A یا B) باید انتخاب شود.	عادی | کلاه های کوچک
الف || ب	هر مقدار را می توان به تنهایی یا در ترکیب با دیگران به هر ترتیبی استفاده کرد.	عرض || شمردن
	مقادیر گروه ها	[ محصول || صلیب]
*	صفر یا چند بار تکرار کنید.	[,<время>]*
+	یک یا چند بار تکرار کنید.	<число>+
?	نوع، کلمه یا گروه مشخص شده اختیاری است.	درونی؟
(الف، ب)	حداقل A را تکرار کنید، اما نه بیشتر از B بار.	<радиус>{1,4}
#	یک یا چند بار با کاما از هم جدا شده اند.	<время>#

×

ارزش های

دایره گرادیان شعاعی دایره ای شکل. ellipse یک گرادیان بیضی ایجاد می کند. این فرم به صورت پیش فرض تنظیم شده است.<радиус>شعاع گرادیان در واحدهای قابل دسترسی CSS. یک مقدار نشان دهنده شعاع دایره، دو مقدار نشان دهنده شعاع بیضی در امتداد محور x و شعاع آن در امتداد محور y است. اگر شعاع به صراحت مشخص نشده باشد، گرادیان کل پس‌زمینه عنصر را پر می‌کند.<позиция>

نقطه شروعی را که گرادیان از آنجا می آید را تعیین می کند. موقعیت یک نقطه با استفاده از کلمات کلیدی یا واحدهای موجود مانند پیکسل یا درصد، به همان روشی که مقادیر ویژگی پس‌زمینه موقعیت نوشته می‌شود، نوشته می‌شود. ترکیبات ممکن در زیر ذکر شده است.

• بالا سمت چپ = بالا سمت چپ = 0% 0% (گوشه سمت چپ بالا)؛
• بالا = مرکز بالا = بالا وسط = 50% 0% (بالای وسط);
• سمت راست بالا = بالا سمت راست = 100% 0% (بالا سمت راست)؛
• چپ = مرکز چپ = مرکز چپ = 0% 50% (چپ و مرکز).
• مرکز = مرکز مرکز = 50% 50% (مرکز) پیش فرض است.
• راست = مرکز راست = مرکز راست = 100% 50% (راست و مرکز).
• پایین سمت چپ = پایین سمت چپ = 0% 100% (گوشه پایین سمت چپ)؛
• پایین = مرکز پایین = مرکز پایین = 50% 100% (مرکز در پایین).
• پایین سمت راست = پایین سمت راست = 100% 100% (در گوشه پایین سمت راست).

<цвет>نشان دهنده یک مقدار رنگ (نگاه کنید به رنگ) و سپس یک موقعیت رنگ اختیاری نسبت به محور گرادیان است که به صورت درصدی از 0٪ تا 100٪ یا هر واحد دیگر CSS مناسب تعیین شده است.<размер>اندازه گرادیان را تنظیم می کند. روی میز. 1 مقادیر اندازه ممکن را با توضیحات و نتیجه برای سفید و سیاه فهرست می کند. کد و نمای برای یک گرادیان دایره ای و بیضی داده شده است. برگه 1. کلمات کلیدی برای تغییر اندازه گرادیان

معنی	کد	شرح	چشم انداز
نزدیکترین سمت	پس زمینه: گرادیان شعاعی (دایره نزدیکترین ضلع در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس‌زمینه: گرادیان شعاعی (نزدیک‌ترین سمت در 30 پیکسل 20 پیکسل، #fff، #000)؛	شیب منطبق با نزدیکترین طرف بلوک به آن (برای یک دایره) یا همزمان با نزدیکترین ضلع افقی و عمودی (برای یک بیضی) است.
	پس‌زمینه: گرادیان شعاعی (دایره نزدیک‌ترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس‌زمینه: گرادیان شعاعی (نزدیک‌ترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛	شکل گرادیان بر اساس اطلاعات مربوط به فاصله تا نزدیکترین گوشه بلوک محاسبه می شود.
	پس زمینه: گرادیان شعاعی (دایره دورترین ضلع در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس‌زمینه: گرادیان شعاعی (دورترین سمت در 30 پیکسل 20 پیکسل، #fff، #000)؛	در عمل شبیه به نزدیکترین سمت است، اما گرادیان به سمت دور بلوک گسترش می یابد.
دورترین گوشه	پس زمینه: گرادیان شعاعی (دایره دورترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛ پس‌زمینه: گرادیان شعاعی (دورترین گوشه در 30 پیکسل 20 پیکسل، #fff، #000)؛	شکل گرادیان بر اساس اطلاعات مربوط به فاصله تا گوشه دور بلوک محاسبه می شود.

مثال

نتیجه این مثال در زیر نشان داده شده است.

توجه داشته باشید

Chrome قبل از نسخه 26، Safari قبل از نسخه 6.1، و Android قبل از نسخه 4.4 از -webkit-radial-gradient() پشتیبانی می کنند.

Opera قبل از نسخه 12.10 از -o-radial-gradient() پشتیبانی می کند.

فایرفاکس تا نسخه 16 از -moz-radial-gradient() پشتیبانی می کند.

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

مشخصات

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

• توصیه (توصیه) - مشخصات توسط W3C تایید شده و به عنوان یک استاندارد توصیه می شود.
• توصیه نامزد ( توصیه احتمالی ) - گروه مسئول استاندارد از رسیدن به اهداف خود راضی است اما برای اجرای استاندارد نیاز به حمایت جامعه توسعه است.
• پیشنهاد پیشنهادی ( توصیه پیشنهادی) - در این مرحله سند برای تایید نهایی به هیئت مشورتی W3C ارائه می شود.
• پیش نویس کاری - پیش نویس بالغ تر پس از بحث و اصلاحات برای بررسی جامعه.
• پیش نویس سردبیر ( پیش نویس سرمقاله) یک نسخه پیش نویس استاندارد پس از اعمال تغییرات توسط ویراستاران پروژه است.
• پیش نویس ( پیش نویس مشخصات) اولین نسخه پیش نویس استاندارد است.

×

مرورگرها

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

• - ویژگی به طور کامل توسط مرورگر با تمام مقادیر معتبر پشتیبانی می شود.
• - ویژگی توسط مرورگر درک نمی شود و نادیده گرفته می شود.
• - ممکن است در حین کار ظاهر شود خطاهای مختلف، یا دارایی فقط تا حدی پشتیبانی می شود، به عنوان مثال، نه همه مقادیر مجازمعتبر هستند یا این ویژگی برای همه عناصری که در مشخصات مشخص شده اند اعمال نمی شود.

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

×

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

تابع ()radial-gradient آرگومان های جدا شده با کاما زیر را می گیرد:

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

ساده ترین گرادیان شعاعی فقط به دو آرگومان نیاز دارد که رنگ شروع و پایان را مشخص می کند:

Div ( پس‌زمینه-تصویر: گرادیان شعاعی (فیروزه‌ای، نیلی)؛ عرض: 400 پیکسل؛ ارتفاع: 100 پیکسل؛ ) امتحان کنید »

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

Div (عرض: 400 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 10 پیکسل؛ ) #یک (تصویر پس‌زمینه: گرادیان شعاعی (فیروزه‌ای، زرد، نیلی، سفید)؛ ) #دو (تصویر پس‌زمینه: گرادیان شعاعی (فیروزه‌ای، زرد) 10٪، نیلی 30٪، سفید 50٪؛ ) امتحان کنید »

شکل یک گرادیان شعاعی را می توان با استفاده از کلیدواژه های دایره (دایره) و بیضی (بیضی) تعریف کرد و یکی از آنها را به عنوان اولین آرگومان مشخص کرد:

Div (عرض: 400 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 10 پیکسل؛ ) #یک (تصویر پس‌زمینه: گرادیان شعاعی (بیضی، فیروزه‌ای، نیلی)؛ ) #دو (تصویر پس‌زمینه: گرادیان شعاعی (دایره، فیروزه‌ای، نیلی) )؛ ) تلاش كردن "

به طور پیش فرض، مرورگر نقطه مرکزی گرادیان شعاعی را در مرکز عنصر قرار می دهد. مرکز شیب را می توان با قرار داد کلمه کلیدیدر و به دنبال آن کلمات کلیدی (بالا، چپ، راست، پایین، مرکز) یا مقادیر در واحدهای مشخص شده CSS:

معنی	شرح
بالا سمت چپ مرکز چپ پایین سمت چپ بالا سمت راست مرکز راست پایین سمت راست بالای مرکز مرکز مرکز پایین مرکز	اگر فقط یک کلمه کلیدی را مشخص کنید، کلید دوم "مرکز" خواهد بود.
x%y%	مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی است. گوشه سمت چپ بالا موقعیت 0% 0% است. گوشه پایین سمت راست موقعیت 100% 100% است. اگر فقط یک مقدار را مشخص کنید، مقدار دیگر 50٪ خواهد بود.
x-pos y-pos	مقدار اول موقعیت افقی است، دومین مقدار موقعیت عمودی است. گوشه سمت چپ بالا موقعیت 0 0 است. واحدها می توانند پیکسل (0px 0px) یا هر چیز دیگری باشند. واحد CSSاندازه گیری ها اگر فقط یک مقدار را مشخص کنید، مقدار دیگر 50٪ خواهد بود. می توانید % و واحدها را ترکیب کنید.

موقعیت گرادیان قبل از مقادیر hue مشخص می شود، اما بعد از کلمه کلیدی گرادیان شکل (در صورت وجود):

Div (عرض: 400 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 10 پیکسل؛ ) #یک (تصویر پس‌زمینه: گرادیان شعاعی (در سمت راست، فیروزه‌ای، نیلی)؛ ) #دو (تصویر پس‌زمینه: گرادیان شعاعی (دایره در 300 پیکسل 50 پیکسل ، فیروزه ای، نیلی، زرد)؛ ) #three (تصویر پس زمینه: گرادیان شعاعی (دایره در بالا سمت چپ، فیروزه ای، نیلی، زرد)؛ ) امتحان کنید »

اندازه گرادیان (شکل نهایی گرادیان چقدر باید بزرگ باشد) را می توان با استفاده از یکی از چهار عبارت کلیدی یا با تعیین شعاع با استفاده از واحدهای CSS مشخص کرد (درصدها را نمی توان برای تعریف شعاع استفاده کرد).

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

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

Div ( عرض: 400 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 10 پیکسل؛ ) #یک (تصویر پس‌زمینه: گرادیان شعاعی (دایره نزدیک‌ترین گوشه در 100 پیکسل، فیروزه‌ای 50 درصد، نیلی)؛ ) #دو (تصویر پس‌زمینه: شعاعی- گرادیان (دایره نزدیک‌ترین ضلع، فیروزه‌ای، قرمز، نیلی); ) #three (تصویر پس‌زمینه: گرادیان شعاعی (100 پیکسل دایره در 200 پیکسل، فیروزه‌ای 50 درصد، نیلی)؛ ) #چهار (تصویر پس‌زمینه: گرادیان شعاعی( 170px 50px بیضی در 175px، فیروزه ای، #90EE90، rgba(172,160,160,0))؛ )