شعاع CSS را با ساختمان الگوهای پس زمینه بیاموزید

temani afif

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

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

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

الگوی شعاعی شماره 1

بیایید با ابتدایی ترین الگوی شروع کنیم.

الگوی ساخته شده با شعاع شعاعی

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

برای ساده کردن آن ، می توانیم بیضی را به عنوان شکل اصلی در نظر بگیریم زیرا یک دایره مورد خاصی از بیضی است. سپس با مخفی کردن برخی از قسمت ها ، نیمی از یک دایره ، یک چهارم دایره و غیره را بدست می آوریم.

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

تصویر از مقادیر مختلف الگوی

ما در منطقه ای قرار می گیریم که دارای ابعاد 100px*100px است که اندازه پس زمینه ما است. ما یک شعاع افقی برابر با 50 ٪ و یک عمودی برابر با 50 ٪ و مرکز شکل ما مرکز منطقه خواهد بود.

بیضی با دو شعاع به نام "شعاع افقی" و "شعاع عمودی" تعریف شده است. اگر هر دو برابر باشند (مانند مورد ما) ما یک دایره می گیریم.

این کد زیر را به ما می دهد:

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

در اصل ، ما ابتدا مرکز و اندازه بیضی خود را تعریف می کنیم (50 ٪ 50 ٪ در مرکز) و سپس آن را با رنگ گرادیان پر می کنیم (C39F76 0 80 ٪ ،#0000 81 ٪ 100 ٪). ما در این حالت یک دایره کامل دریافت می کنیم زیرا هر دو شعاع برابر هستند (50 ٪ از 100px) و به دلیل اینکه هیچ انتقال بین رنگ ها نداریم.

ما رنگ اصلی از 0 ٪ تا 80 ٪ و شفاف از 81 ٪ تا 100 ٪ داریم.(ما باید به جای 81 ٪ از 80 ٪ استفاده می کردیم اما یک انتقال کوچک را برای جلوگیری از لبه های پیچیده نگه می داریم.)

ما می توانیم با حذف مقادیر پیش فرض برای به دست آوردن این کد ، کد فوق را بهینه کنیم:

موقعیت به طور پیش فرض مرکز است و می توانیم 0 ٪ و 100 ٪ از پیکربندی رنگ را حذف کنیم.

موارد فوق تنها نحوی برای دستیابی به آن الگوی نیست. ما همچنین می توانیم استفاده کنیم:

ما شعاع دایره خود را کاهش می دهیم و درصد رنگ اصلی را افزایش می دهیم. توجه داشته باشید که من هیچ درصد را با رنگ شفاف تعریف نکردم زیرا باید 100 ٪ (مقدار پیش فرض) باشد که می توانیم از آن حذف کنیم.

ما همچنین می توانیم استفاده کنیم:

ما شعاع را حذف می کنیم و مرورگر از یک تنظیم پیش فرض استفاده می کند که به پیکربندی رنگ دیگری نیاز دارد.

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

الگوی شعاعی شماره 2

الگوی ساخته شده با شعاع شعاعی

برای این یکی ، از 2 شعاع شعاعی () استفاده می کنم. فراموش نکنیم که ما می توانیم به همان اندازه که می خواهیم لایه های پس زمینه داشته باشیم. این یک ویژگی عالی است که به ما امکان می دهد با ترکیب شیب های مختلف با تنظیمات مختلف ، الگوهای پیچیده ای بسازیم.

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

برای پیکربندی شعاع ، اگر برخی از ریاضیات را انجام دهیم ، می توانیم پیدا کنیم که برای لمس لبه ها به هر دو حلقه نیاز به 25 ٪ داریم. بنابراین می توانیم از این کد استفاده کنیم:

ما همچنین می توانیم به جای 25 ٪ 25 ٪ از نزدیکترین سمت استفاده کنیم. می دانم ، این یک مقدار عجیب است ، اما به معنای "استفاده از یک شعاع از شعاع است که به دایره اجازه می دهد تا نزدیکترین طرف را به مرکز خود لمس کند". این مقدار مفید است و می تواند ما را از برخورد با برخی از محاسبات پیچیده نجات دهد.

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

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

الگوی شعاعی شماره 3

من با این مشکل مشکل را افزایش می دهم. پس از الگوهای 1 و 2 ، اکنون می توانیم الگوی پیچیده تری را امتحان کنیم. این یکی نیز با استفاده از دو شیب ساخته شده است که در آن محافل کامل نخواهیم داشت بلکه ترکیبی از دو دایره نیمی است.

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

مرکز شیب اول در 50 ٪ 100 ٪ قرار می گیرد در حالی که مورد دوم در 50 ٪ 0 ٪ قرار می گیرد اما می توانیم از بالا و پایین به عنوان مقادیر معادل آنها استفاده کنیم.

برای شعاع ، ما می توانیم از 50 ٪ 50 ٪ مانند گذشته استفاده کنیم ، اما این بار چیز دیگری را امتحان می کنم و 50px را در نظر می گیرم که نیمی از اندازه پس زمینه است.

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

دایره ما لبه را لمس می کند تا کد باشد:

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

ما می توانیم با استفاده از نسخه Shorthand ، کد را کمی بهینه کنیم:

و از آنجا که ما با مقادیر پیکسل سر و کار داریم ، می توانیم متغیر CSS را اضافه کنیم تا کد تنظیم آن آسان شود.

به جای به روزرسانی مقادیر مختلف ، ما فقط یک را تغییر می دهیم!

الگوی شعاعی شماره 4

پس زمینه الگوی ساخته شده با شعاع شعاعی

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

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

به طور شهودی ، ممکن است فکر کنید که این الگوی این یکی است و برای یافتن شیب تلاش خواهید کرد

اما اینطور نیستالگوی واقعی این یکی است

ما 4 دایره در گوشه و کنار با سرریز کوچک قرار داده ایم. کد خواهد بود:

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

ما همچنین می توانیم از نزدیک مانند زیر استفاده کنیم:

تنها نکته جدید در کد فوق پیکربندی رنگ است که من از مقادیری بزرگتر از 100 ٪ استفاده می کنم. از آنجا که من از نزدیکترین طرف برای تعریف شعاع استفاده می کنم ، برای ایجاد سرریز باید از 100 ٪ بزرگتر شوم.

چنین ترفندی را فراموش نکنید ، می تواند مفید باشد. مقادیر رنگ محدود به دامنه [0 ٪ 100 ٪] نیست - آنها می توانند بزرگتر شوند.

در چنین شرایطی ، ما همچنین می توانیم به یک متغیر CSS اعتماد کنیم تا از تکرار پیکربندی رنگ جلوگیری کنیم:

الگوی شعاعی شماره 5

الگوی ساخته شده با شعاع شعاعی

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

و این کد آنها است:

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

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

الگوی شعاعی شماره 6

این الگوی دیگری است که در آن شناسایی لایه های مختلف آسان نیست - اما اگر از نزدیک نگاه کنیم می توانیم دو دایره را ببینیم

دایره بزرگ اولین لایه ماست

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

همانطور که مشاهده می کنید ، من به جای 50 ٪ از 54 ٪ برای ایجاد سرریز استفاده می کنم.

لایه دوم یک دایره کوچکتر با رنگ سفید به عنوان رنگ اصلی است. کل کد خواهد بود:

به استفاده از 50px 50px توجه داشته باشید. مانند الگوی 3 ، برای به دست آوردن نتیجه صحیح باید یکی از لایه ها را به نصف اندازه تغییر دهیم - در غیر این صورت هر دو دایره دارای یک مرکز یکسان خواهند بود که نتیجه مورد نظر نیست.

الگوی شعاعی شعاعی شماره 7

در اینجا آخرین الگوی قبل از پایان ما آمده است:

با این مثال آخر ، من می خواهم به صورت تکرار شعاعی برای نوشتن شعاع شعاعی () ، شعاعی را تکرار کنم.

الگوی ما به شرح زیر است:

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

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

فوق به این معنی است که ما 12 ٪ از رنگ شفاف و سپس 13 ٪ از رنگ اصلی (26 - 13 = 13) داریم و سپس همین کار را تکرار می کنیم تا اینکه تمام منطقه را بپوشانیم.

پیچیدن

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

مقاله در اینجا به پایان می رسد، اما این تازه شروع است. radial-gradient() پیچیده‌تر از نمونه‌های ساده‌ای است که اخیراً دیدیم - اما اکنون ابزارهای لازم برای تمرین و عادت کردن به آن را دارید.

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

در اینجا چند مرجع برای دریافت جزئیات بیشتر آورده شده است:

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

MDN

با تشکر از شما برای خواندن!

برای نکات CSS بیشتر، من را در توییتر دنبال کنید. می خواهید از من حمایت کنید؟می توانید برای من قهوه بخرید یا حامی شوید.