این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با رنگ ها در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با رنگ ها در CSS با من همراه باشید.
Free-Learn
کار با رنگ ها در CSS
بطور کلی ما چندین روش داریم که میتونیم از رنگ ها در طراحی وب استفاده نماییم ، که همه ی این روش هارو بنده بصورت جداگانه و بطور کامل آموزش دادم که در صورت تمایل میتوانید بخش آموزش رنگ ها رو مشاهده نمایید :
- استفاده از نام رنگ
- استفاده از کدهگزادسیمال
- استفاده از کد RGB
- استفاده از کد RGBA
- استفاده از کد HSL
- استفاده از کد HSLA
- استفاده از رنگ ترکیبی Gradient
حال در CSS ما ۲ ویژگی مهم در حوزه استفاده از رنگ ها داریم که این ۲ ویژگی به شرح زیر می باشند :
- Background-color : برای تنظیم رنگ زمینه
- Color : برای تنظیم رنگ متن
Free-Learn
ویژگی Background-Color و Color در CSS
مثال شماره ۱ : تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از کد هگزادسیمال )
|
1 2 3 4 5 6 7 8 |
<style> body{ background-color:#5db616; color:#fff; } </style> |
مثال شماره ۲ : تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از کد RGB )
|
1 2 3 4 5 6 7 8 |
<style> body{ background-color:rgb(147,16,14); color:rgb(255,255,255); } </style> |
مثال شماره ۳ : تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از کد HSL )
|
1 2 3 4 5 6 7 8 |
<style> body{ background-color:hsl(62,23%,45%); color:hsl(0,0%,100%); } </style> |
مثال شماره ۴ : تنظیم رنگ زمینه و رنگ متن برای کل صفحه ( استفاده از Gradient )
|
1 2 3 4 5 6 7 |
<style> body{ background-image: linear-gradient(to right, #ff007b, #ed2024 ); } </style> |
Free-Learn
مجموعه ای از نام رنگ ها را از اینجا مشاهده نمایید.
مجموعه ای از کدرنگ هگزادسیمال را از اینجا مشاهده نمایید.
مجموعه ای از کدرنگ RGB را از اینجا مشاهده نمایید.
ابزار آنلاین تولید رنگ hex , rgb , hsl را از اینجا مشاهده نمایید.
ابزار آنلاین تولید رنگ گرادینت یا Gradient را از اینجا مشاهده نمایید.
