ترجمه توسط دتام
کد رنگ در Css
کد رنگ در Css,کدهای رنگ در Css,کد رنگ Css,کد رنگ متن در Css,کد رنگ فونت در Css,کد تغییر رنگ نوشته در Css,رنگ گرادیانت در Css,رنگ شیشه ای در Css
آرشیو آموزش برنامه نویسی آرشیو آموزش css مشاهده تمام دروس css
درود به دتامی های عزیز
css
توی این فصل از آموزش css میخواییم درباره رنگ ها در css صحبت کنیم
شما رو با رنگ ها در css آشنا میکنیم و همچنین تغییر دادن رنگ بک گراند و متن رو بهتون آموزش میدیم
با دتام همراه باشید.
کد رنگ در Css
رنگ ها با استفاده از نام رنگ های از پیش تعریف شده یا RGB، HEX، HSL، RGBA، HSLA مشخص می شوند.
نام رنگ در css ( کد رنگ در Css )
در HTML یک رنگ را می توان با استفاده از یک نام رنگ مشخص کرد:
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:Tomato;”>Tomato</h1>
<h1 style=”background-color:Orange;”>Orange</h1>
<h1 style=”background-color:DodgerBlue;”>DodgerBlue</h1>
<h1 style=”background-color:MediumSeaGreen;”>MediumSeaGreen</h1>
<h1 style=”background-color:Gray;”>Gray</h1>
<h1 style=”background-color:SlateBlue;”>SlateBlue</h1>
<h1 style=”background-color:Violet;”>Violet</h1>
<h1 style=”background-color:LightGray;”>LightGray</h1></body>
</html>
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
بیشتر بخوانید : کد رنگ ها در HTML
رنگ پس زمینه در CSS ( کد رنگ در Css )
شما می توانید رنگ پس زمینه برای عناصر HTML را تنظیم کنید:
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:DodgerBlue;”>Hello World</h1>
<p style=”background-color:Tomato;”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p></body>
</html>
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
بیشتر بخوانید : عناصر در HTML
رنگ متن در CSS ( کد رنگ در Css )
شما می توانید رنگ متن را تنظیم کنید:
<!DOCTYPE html>
<html>
<body><h3 style=”color:Tomato;”>Hello World</h3>
<p style=”color:DodgerBlue;”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
بیشتر بخوانید : آموزش فتوشاپ
رنگ دور متن ( کادر یا قاب نوشته ) ( کد رنگ در Css )
شما می توانید رنگ مرزها را تنظیم کنید:
<!DOCTYPE html>
<html>
<body><h1 style=”border: 2px solid Tomato;”>Hello World</h1>
<h1 style=”border: 2px solid DodgerBlue;”>Hello World</h1>
<h1 style=”border: 2px solid Violet;”>Hello World</h1>
</body>
</html>
Hello World
Hello World
Hello World
بیشتر بخوانید : آموزش لینوکس
ارزش رنگ ها در CSS ( کد رنگ در Css )
در HTML رنگها نیز می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوند.
همانند نام رنگ “گوجه فرنگی”:
<!DOCTYPE html>
<html>
<body><p>Same as color name “Tomato”:</p>
<h1 style=”background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1>
<h1 style=”background-color:#ff6347;”>#ff6347</h1>
<h1 style=”background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1></body>
</html>
Same as color name “Tomato”:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
همانند نام رنگ “گوجه فرنگی”، اما 50٪ شفاف:
<!DOCTYPE html>
<html>
<body><p>Same as color name “Tomato”:</p>
<p>Same as color name “Tomato”, but 50% transparent:</p>
<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1></body>
</html>
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
بیشتر بخوانید : آموزش ورد
ارزش RGB
rgb (قرمز، سبز، آبی)
هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین 0 و 255 تعریف می کند.
برای مثال rgb (255، 0، 0) به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار آن (255) و دیگران به 0.
برای نشان دادن رنگ سیاه، تمام پارامترهای رنگ باید به 0 تنظیم شوند، مانند این: rgb (0، 0، 0).
برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به 255 تنظیم شود، مثل این : rgb (255، 255، 255).
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:rgb(255, 0, 0);”>rgb(255, 0, 0)</h1>
<h1 style=”background-color:rgb(0, 0, 255);”>rgb(0, 0, 255)</h1>
<h1 style=”background-color:rgb(60, 179, 113);”>rgb(60, 179, 113)</h1>
<h1 style=”background-color:rgb(238, 130, 238);”>rgb(238, 130, 238)</h1>
<h1 style=”background-color:rgb(255, 165, 0);”>rgb(255, 165, 0)</h1>
<h1 style=”background-color:rgb(106, 90, 205);”>rgb(106, 90, 205)</h1><p>In HTML, you can specify colors using RGB values.</p>
</body>
</html>
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام 3 منبع نور تعریف می شود:
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:rgb(0, 0, 0);”>rgb(0, 0, 0)</h1>
<h1 style=”background-color:rgb(60, 60, 60);”>rgb(60, 60, 60)</h1>
<h1 style=”background-color:rgb(120, 120, 120);”>rgb(120, 120, 120)</h1>
<h1 style=”background-color:rgb(180, 180, 180);”>rgb(180, 180, 180)</h1>
<h1 style=”background-color:rgb(240, 240, 240);”>rgb(240, 240, 240)</h1>
<h1 style=”background-color:rgb(255, 255, 255);”>rgb(255, 255, 255)</h1><p>By using equal values for red, green, and blue, you will get different shades of gray.</p>
</body>
</html>
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
بیشتر بخوانید : آموزش شبکه ( CCNA )
ارزش HSL
در HTML، رنگ را می توان با استفاده از رنگ، اشباع و سبک (HSL) در فرم مشخص کرد:
hsl (گرمای رنگ، اشباع، نور) درجه رنگ در چرخ رنگ از 0 تا 360 است.
0 قرمز است
120 سبز است
240 آبی استاشباع یک،درصد است، 0٪ به معنی یک سایه خاکستری است، و 100٪ رنگ کامل است.
نور نیز یک،درصد است، 0٪ سیاه است، 50٪ نور یا تاریک نیست، 100٪ سفید است.
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:hsl(0, 100%, 50%);”>hsl(0, 100%, 50%)</h1>
<h1 style=”background-color:hsl(240, 100%, 50%);”>hsl(240, 100%, 50%)</h1>
<h1 style=”background-color:hsl(147, 50%, 47%);”>hsl(147, 50%, 47%)</h1>
<h1 style=”background-color:hsl(300, 76%, 72%);”>hsl(300, 76%, 72%)</h1>
<h1 style=”background-color:hsl(39, 100%, 50%);”>hsl(39, 100%, 50%)</h1>
<h1 style=”background-color:hsl(248, 53%, 58%);”>hsl(248, 53%, 58%)</h1><p>In HTML, you can specify colors using HSL values.</p>
</body>
</html>
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
بیشتر بخوانید : آموزش وردپرس
اشباع
اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.
100٪ رنگ خالص است، بدون سایه خاکستری
50٪ خاکستری 50٪ است، اما شما هنوز هم می توانید رنگ را ببینید.
0٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.<!DOCTYPE html>
<html>
<body><h1 style=”background-color:hsl(0, 100%, 50%);”>hsl(0, 100%, 50%)</h1>
<h1 style=”background-color:hsl(0, 80%, 50%);”>hsl(0, 80%, 50%)</h1>
<h1 style=”background-color:hsl(0, 60%, 50%);”>hsl(0, 60%, 50%)</h1>
<h1 style=”background-color:hsl(0, 40%, 50%);”>hsl(0, 40%, 50%)</h1>
<h1 style=”background-color:hsl(0, 20%, 50%);”>hsl(0, 20%, 50%)</h1>
<h1 style=”background-color:hsl(0, 0%, 50%);”>hsl(0, 0%, 50%)</h1></body>
</html>
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
بیشتر بخوانید : آموزش وردپرس
نور یا روشنایی رنگ در css
نور در css به شکل زیر میباشد :
0٪ به معنای هیچ نور (سیاه و سفید)
50٪ به معنای 50٪ نور (نه تاریک و نه نور)
100٪ به معنی نور کامل (سفید)<!DOCTYPE html>
<html>
<body><h1 style=”background-color:hsl(0, 100%, 0%);”>hsl(0, 100%, 0%)</h1>
<h1 style=”background-color:hsl(0, 100%, 25%);”>hsl(0, 100%, 25%)</h1>
<h1 style=”background-color:hsl(0, 100%, 50%);”>hsl(0, 100%, 50%)</h1>
<h1 style=”background-color:hsl(0, 100%, 75%);”>hsl(0, 100%, 75%)</h1>
<h1 style=”background-color:hsl(0, 100%, 90%);”>hsl(0, 100%, 90%)</h1>
<h1 style=”background-color:hsl(0, 100%, 100%);”>hsl(0, 100%, 100%)</h1>
</body>
</html>
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
سایه خاکستری اغلب با تنظیم رنگ و اشباع به 0 و تنظیم نور از 0٪ به 100٪ برای گرفتن سایه های تیره تر / روشن تر تعریف می شود:
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:hsl(0, 0%, 0%);”>hsl(0, 0%, 0%)</h1>
<h1 style=”background-color:hsl(0, 0%, 24%);”>hsl(0, 0%, 24%)</h1>
<h1 style=”background-color:hsl(0, 0%, 47%);”>hsl(0, 0%, 47%)</h1>
<h1 style=”background-color:hsl(0, 0%, 71%);”>hsl(0, 0%, 71%)</h1>
<h1 style=”background-color:hsl(0, 0%, 94%);”>hsl(0, 0%, 94%)</h1>
<h1 style=”background-color:hsl(0, 0%, 100%);”>hsl(0, 0%, 100%)</h1></body>
</html>
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
بیشتر بخوانید : آموزش برنامه نویسی جاوا
ارزش RGBA
مقادیر رنگ RGBA یک فرمت ارزش رنگی RGB با یک کانال آلفا است که کدورت را برای یک رنگ مشخص می کند.
مقدار رنگ RGBA با:
rgba (قرمز، سبز، آبی، آلفا)
پارامتر alpha یک عدد بین 0.0 (کاملا شفاف) و 1.0 است (کاملا شفاف نیست):
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:rgba(255, 99, 71, 0);”>rgba(255, 99, 71, 0)</h1>
<h1 style=”background-color:rgba(255, 99, 71, 0.2);”>rgba(255, 99, 71, 0.2)</h1>
<h1 style=”background-color:rgba(255, 99, 71, 0.4);”>rgba(255, 99, 71, 0.4)</h1>
<h1 style=”background-color:rgba(255, 99, 71, 0.6);”>rgba(255, 99, 71, 0.6)</h1>
<h1 style=”background-color:rgba(255, 99, 71, 0.8);”>rgba(255, 99, 71, 0.8)</h1>
<h1 style=”background-color:rgba(255, 99, 71, 1);”>rgba(255, 99, 71, 1)</h1><p>You can make transparent colors by using the RGBA color value.</p>
</body>
</html>
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
بیشتر بخوانید : آموزش برنامه نویسی ++C
ارزش HSLA
مقادیر رنگ HSLA یک فرمت از مقادیر رنگ HSL با یک کانال آلفا است که کدورت را برای یک رنگ مشخص می کند.
مقدار رنگ HSLA با hsla مشخص می شود (رنگ، اشباع، نور، آلفا)
پارامتر alpha یک عدد بین 0.0 است (کاملا شفاف) و 1.0 (کاملا شفاف نیست):
<!DOCTYPE html>
<html>
<body><h1 style=”background-color:hsla(9, 100%, 64%, 0);”>hsla(9, 100%, 64%, 0)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.2);”>hsla(9, 100%, 64%, 0.4)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.4);”>hsla(9, 100%, 64%, 0.4)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.6);”>hsla(9, 100%, 64%, 0.6)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.8);”>hsla(9, 100%, 64%, 0.8)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 1);”>hsla(9, 100%, 64%, 1)</h1><p>You can make transparent colors by using the HSLA color value.</p>
</body>
</html>
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
You can make transparent colors by using the HSLA color value.
منبع : www.w3schools.com
درباره نویسنده
نوشته های مشابه
دیدگاههای کاربران
محصولات بر اساس
مطالب بر اساس
-
تغییر اطلاعات پروفایل در اینستاگرام (آی دی،عکس و …)33289 بازدید
-
آموزش ورد (1) – ” شروع به کار word “17254 بازدید
-
آموزش اینستاگرام ” تنظیمات اینستاگرام “34693 بازدید
-
ساخت اسلایدر زیبا در وردپرس با افزونه Nivo Slider6506 بازدید
-
آموزش نتورک پلاس (+Network) جلسه اول6723 بازدید
-
آموزش پیشرفته وردپرس با زبان مادری – مقدمه16865 بازدید