معرفی سایت cssgradient

دسته : برنامه نویسی

نویسنده : علی منصورآبادی

تاریخ : 1401/2/17

پست های مرتبط

https://teamaa.ir/Assets/Images/Blog/TEAMAA-(T8wNLGaz)_HTML Semantic Poster.jpg

1401/9/23

عناصر معنایی یا Semantic در...

https://teamaa.ir/Assets/Images/Blog/TEAMAA-(TShrRRRH)_HTML Structure Poster.jpg

1401/9/15

معرفی سایت cssgradient

سلام، وقتتون بخیر. علی هستم برنامه نویس تیما. امروز می خواهیم با هم سایت cssgradient.io رو بررسی کنیم. بعد از ساختن Gradient مورد نظرتون، این سایت کد CSS اون Gradient رو بهتون می دهد تا به راحتی در سایت و کد خودتون از اون استفاده کنید.

با اولین چیزی که بعد از باز کردن سایت رو به رو میشید، یک نوار هست که دو نقطه روی اون مشخص شده که در اصل دو رنگ شروع و پایان Gradient هستند. با کلیک بر روی هر رنگ به راحتی می تونید اون رو تغییر بدهید تا به Gradient دلخواه برسید. برای عوض کردن رنگ هم چندین راه وجود داره، بعد از کلیک بر روی اون رنگ می تونید از طریق Color Picker، یا وارد کردن عدد Hex یا RGBA به صورت دستی و یا از طریق نوار های پایینی اقدام کنید.

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

علاوه بر این موارد، در سایت cssgradient.io می تونید از Gradient های آماده هم استفاده کنید و یا یک عکس آپلود کنید و خود سایت بر اساس رنگ های اون عکس، یک Gradient براتون بسازه. مورد بعدی زاویه و یا درجه Gradient هست که به سادگی می شه اون رو عوض کرد. در آخر هم Mode و یا نوع Gradient هست که می تونه به صورت خطی (Linear) و یا به صورت دایره ای (Radial) باشه.

بعد از اعمال تمامی این موارد و رسیدن به Gradient مورد نظرتون، کد CSS اون رو به راحتی می تونید از سایت دریافت کنید. اگر روی دکمه Max Compatibility هم کلیک کنید، کد CSS کامل تری را سایت بهتون می دهد که روی ورژن های بیشتری از مرورگر ها جواب می دهد. با کلیک بر روی Copy To Clipboard هم کد رو کپی کنید تا در سایت خودتون به راحتی بتونید از Gradient که ساختید، استفاده کنید.

امیدوارم که از این آموزش لذت برده باشید و براتون مفید واقع شده باشه. با ما همراه باشید تا با هم یک درصد بیشتر بدونیم.

پست های مرتبط