آموزش گرادینت ها در css

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

آموزش گرادینت در css

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

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

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

شما می تونید با استفاده از فیلم زیر اقدام به یادگیری مبحث گرادینت ها در css کنید همچنین می تونید در ادامه مقاله با ما همراه باشید تا اقدام به یادگیری گرادینت ها در css کنید.

انواع گرادینت ها در CSS

به طور کلی زبان CSS دارای چهار حالت و تابع برای ساخت گرادینت ها رو داره که اسامی اون به صورت زیر هست و در باره هریک توضیحاتی ارائه می شه

linear gradient در css

تابع linear-gradient در css معمولا پر استفاده ترین تابع برای ساخت گرادینت هست که به صورت زیر استفاده می شه:

/*  linear-gradient(dir: degree & sens , color1 , color 2 , color 3 , ...)  */
.selector{    background: linear-gradient(to left ,blue ,red);
}
/* خروجی کد بالا مساوی است با خروجی کد زیر  */
.selector{
background: linear-gradient(-90deg , blue ,red);
}

همچنین باید بدانید که ما می توانم مقدار پخش شدگی رنگ ها را نیز مشخص کنیم مانند مثال زیر

.selector{
background: linear-gradient(-90deg , blue 59% ,red 70%);
}

علاوه بر اون همچنین می تونیم نقطه شروع و نقطه پایان یک رنگ رو هم مشخص کنیم به مثال زیر دقت کنید

.selector{
background: linear-gradient(-90deg , blue 20%, blue 25%,red 25% , red 80%, green 80%, green 100%);
 }

خب این از شیوه استفاده از اولین نوع گرادینت در css

radial gradient در css

تابع radial-gradient در css هم تقریبا مشابه linear gradient هست با این تفاوت که از مرکز پخش شدگی شروع می شده و ما به جای این که درجه اش رو تنظیم کنیم باید متخصات چپ و راست بهش بدیم. به مثال زیر که از این تابع استفاده می کنیم دقت کنید.

/* radial-gradient(type  Coordinates: percent & sens, color1 , color2 , color3 , ...)  */

.selector{
 background: radial-gradient(circle at 50% 10% , blue , red);
}

/* همچنین می توانیم به صورت زیر نیز مختصات دهی کنیم که از کدام نقطه گرادینت شروع شود */   

.selector{ 
background: radial-gradient(circle at top , blue , red);
}

البته باید بدانید که ما می توانیم مانند تابع قبلی مقدار پخش شدگی رنگ و همچنین نقطه شروع و پایان را برای این تابع و دیگر توابع گرادینت در css در نظر بگیریم شما می توانید با کمی تمرین به این موضوع کاملا مسلط شوید.

repeating linear gradient در css

تابع repeating-linear-gradient در css اقدام به تکرار رنگ های انتخاب شده در تمامی سطح شی مورد نظر می کند البته به شرط آن که فضای چنین چیزی را در اختار داشته باشد. این تابع از لحاض ساختار و محتوای داخلش هیچگونه تفاوتی با تابع linear gradint در css ندارد اما زمانی که به صورت مثال زیر اجرا شود خروجی زیر را دارد.

.selector{
background: repeating-linear-gradient(45deg, blue 100px, red 149px);
}

همانطور که مشاهده می کنید ما اقدام به ساخت گرادینت به صورت linear کردیم و برای رنگ های blue و red پخش شدگی هایی را تایین کردیم اما از تابع repeating-linear-gradient برای این کار استفاده نمودیم که نتیجه زیر را دارد.

repeating radial gradient در css

تابع repeating-radial-gradient نیز دقیقا مشابه تابع radial gradient با همان ساختار است ما با این تفاوت که با وارد کردم محدوده تکرار ما می توانید اقدام به تکرار رنگ های انتخاب شده از مرکز به سمت بیرون کنیم مانند مثال زیر:

.selector{
repeating-radial-gradient(circle at 30% 33% , blue 100px, red 149px);
}

خروجی کد بالا به شکل زیر است

آموزش انداخت گرادینت روی متن در css

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

<p class="text">hello this is just simple text for test to insert gradient in a text</p>
<style>
.text{
font-size: 50px;
color: transparent;
background: linear-gradient(-90deg , blue, red);
background-clip: textl;
-webkit-background-clip: text;
}
</style>

لیست سایت های انتخاب گرادینت

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

سایت cssgradient.io/swatches/

سایت uigradients.com

سایت مورد علاقه خودم webgradients.com

سخن پایانی

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

مقالات مرتبط