cssطراحی سایت

جلسه ۵۴: چگونه گرادیان های خطی واقعاً کار می کنند در CSS

در دروس قبلی ، شما احساس می کنید که چگونه گرادیان های خطی کار می کنند. در این درس ، ما حتی عمیق تر خواهیم شد موارد زیر را بیان خواهیم کرد
  • جهت پیش فرض چیست؟
  • دستورالعمل های گرادیان
  • خطوط گرادیان دار زاویه دار
  • تعیین خط Gradient
  • ۱٫ استفاده از دستورالعمل ها
  • افزودن توقف های رنگی Gradient
در آغاز این بخش ، ما یک گرادیان خطی را به عنوان یک گرادیان تعریف می کنیم که از یک رنگ به رنگ دیگر روی یک خط محو می شود.

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

جهت پیش فرض چیست؟

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

در حالی که بالا به پایین پیش فرض است ، داشتن یک خط گرادیان زاویه دار نیز امکان پذیر است. منظور من از آن خط گرادیان است که به صورت عمودی متمایل نیست اما در یک زاویه کج می شود. لطفا به نمودار بالا مراجعه کنید ، جایی که من یک خط گرادیان با زاویه اندازه گیری شده از جهت عقربه های ساعت رسم کرده ام. بیایید یک مثال ببینیم. یک div را با یک گرادیان خطی مانند آن در نظر بگیرید: background-image: linear-gradient (قرمز ، سیاه) همانطور که انتظار دارید ، نتیجه این یک گرادیان است که از بالا به پایین مخلوط می شود (رفتار پیش فرض) نتیجه را در زیر بررسی کنید:
.grad {
    background-image: linear-gradient(red, black);
  width: 100vw;
  height: 100vh;
}

<html>

 <head>

   <title>Linear Gradient</title>

   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>

 </head>

 <body>

   <div class=”grad”>

   </div>

 </body>

</html>

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

جهت یک خط گرادیان در سنگ تنظیم نشده است و ممکن است تغییر کند. در ادامه این درس نگاهی خواهیم داشت به چگونگی عملکرد این پدیده. در حال حاضر ، نحوه تعیین جهت شیب به این صورت است:
    #element {
        background-image: linear-gradient(angle/direction, yellow, red)
    }
نگذارید بیت زاویه / جهت شما را گیج کند. این آسان تر از آن است که شما فکر می کنید و من وقت می گذارم تا در زیر برایتان توضیح دهم.

خطوط گرادیان زاویه دار

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

تعیین خط گرادیان

خط گرادیان را می توان به ۲ روش مشخص کرد. از هر راهی که انتخاب کردید ، نحو عمومی به این شکل است:
#element {
    background-image: linear-gradient(angle/direction, yellow, red)
}
بیایید در مورد این دو روش بحث کنیم.

۱٫ استفاده از جهت ها

می توانید یک خط گرادیان را با استفاده از کلمات کلیدی مشخص کنید. مانند:
    #element {
        background-image: linear-gradient(to top, yellow, red)
    }
کلمات کلیدی موجود عبارتند از:to top ، to bottom ،to right و to left. یک چیز دیگر… چند کلمه کلیدی دیگر وجود دارد. می دانم که باید زودتر این حرف را می زدم 🙁 to top, to bottom, to right and to left specify directions to a certain side of the element. To specify corners to top left, to top right, to bottom right, and to bottom left نیز مقادیر ممکن هستند.

افزودن ایستاده های رنگی Gradient

یک گرادیان با دو رنگ ، شروع و پایان. آیا این تنها کاری است که می توانیم با CSS انجام دهیم؟ قطعا نه. با توقف های رنگی ، می توانیم تعداد نامحدودی رنگ را در گرادیان اضافه کنیم. نحو عمومی چیزی شبیه به این است: در نحو بالا ، رنگ به هر مقدار رنگی اشاره دارد و stop به موقعیت رنگ یعنی محل شروع رنگ ، از ابتدای گرادیان اندازه گیری می شود. موقعیت توقف رنگ را می توان در مقادیر درصد یا مقادیر طول ثابت مانند px یا em و غیره تنظیم کرد. مثلا: این یک گرادیان از سه رنگ ایجاد می کند ، با رنگ آبی “خالص” دقیقاً ۳۰٪ در گرادیان قرار دارد. مقدار توقف اختیاری است. در صورت عدم وجود ، موقعیت به طور خودکار به گونه ای تنظیم می شود که رنگ به طور مساوی بین توقف رنگ قبلی و بعدی با موقعیت ها فاصله داشته باشد. مثلا:   این یک گرادیان از سه رنگ ایجاد می کند ، با رنگ آبی “خالص” دقیقاً ۵۰٪ درون گرادیان قرار دارد. به طور پیش فرض ، رنگ شروع از ۰٪ و رنگ پایان با ۱۰۰٪ تمام می شود. در درس بعدی ، شما با چالش های تدریجی مشغول خواهید شد!

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا