بازی با رنگ

دسته بندی :دسته‌بندی نشده 1 دسامبر 2022 علیرضا بابامرادی 298

به طور پیش‌فرض، مرورگرها تمام متن‌ها را به رنگ سیاه در پس‌زمینه سفید نمایش می‌دهند. چه چیزی خسته کننده تر از این !!!

یکی از اولین قدم ها برای زنده کردن وب سایت شما این است برای تغییر طرح رنگ متن دو ویژگی CSS3 وجود دارد که برای انجام آن نیاز دارید:

»»color: رنگی را که مرورگر برای فونت متن استفاده می کند انتخاب می کند

»»background-color: رنگی را که مرورگر برای پس زمینه استفاده می کند انتخاب می کند

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

گاهی اوقات، ممکن است به محتوایی نیاز داشته باشید که در بین بازدیدکنندگان ظاهر شود، بنابراین لازم است برخی از این طرح را منحرف کنید.

استاندارد اصلی CSS سه راه برای تعریف رنگ های مورد استفاده در سبک ها ارائه می دهد:

»» با نام رنگ: می توانید یک مقدار متن را از یک لیست استاندارد رنگ انتخاب کنید.

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

p {color: red; background-color: white;}

»» با مقادیر هگزادسیمال RGB: اگر می خواهید رنگ های وب خود را به خوبی تنظیم کنید با استفاده از عناصر صفحه، می توانید شدت رنگ های قرمز، سبز و آبی را انتخاب کنید بر اساس مقادیر هگزادسیمال از 00 تا FF. اگر به اعداد هگزادسیمال علاقه دارید،

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

p {color: #ffa500;}

مقدار ffa500 رنگ قرمز را با شدت کامل تنظیم می کند، رنگ سبز را کمی تنظیم می کند. پایین آمده و رنگ آبی را خاموش می کند و رنگ نارنجی ایجاد می کند.

»» با تابع rgb(): می توانید رنگ را با استفاده از مقادیر اعشاری از آن انتخاب کنید.

0 تا 255 برای شدت قرمز، سبز و آبی. برای مشخص کردن همان رنگ می باشد.

با استفاده از متد rgb() از موارد زیر استفاده می کنید:

p {color: rgb(255, 165, 0);}

اگر در مورد رنگ قرمزی که می خواهید حساس نیستید، روش اول کارساز خواهد بود خوبه.

اما شانس این است که شما می خواهید در انتخاب رنگ خود دقیق تر باشید (برای به عنوان مثال، تطبیق سایه قرمز با قرمز در لوگوی شرکت شما)، بنابراین شما می خواهید از یکی از دو روش دیگر استفاده کنید.

کدام یک از دو روش دیگر شما استفاده یک موضوع ترجیح شخصی است.

استاندارد به روز شده CSS3 چهار روش جدید برای کار با رنگ ها در صفحات وب شما ارائه می دهد:

»»RGBA: مقدار opacity را به تنظیمات استاندارد RGB اضافه می کند

»»HSL: رنگ را به عنوان رنگ، اشباع و درصد روشنایی تعریف می کند

»»HSLA: رنگ را به عنوان یک مقدار HSL تعریف می کند، به علاوه یک مقدار opacity اضافه می کند

»» Opacity: مقدار شفافیت را برای مات کردن عنصر تعریف می کند

ویژگی اصلی اضافه شده به طرح رنگ CSS3، ویژگی Opacity است. ویژگی کدورت این قابلیت را فراهم می کند تا عناصر شفاف یا محو شوند.

از 0.0 (کاملا شفاف) تا 1.0 (بدون شفافیت، که مات نیز نامیده می شود) متغیر است.

در اینجا یک مثال برای نشان دادن نحوه عملکرد تغییر رنگ در عناصر آورده شده است:

1. ویرایشگر متن، ویرایشگر برنامه یا توسعه یکپارچه مورد علاقه خود را باز کنید بسته محیطی (IDE)

2. کد زیر را در پنجره ویرایشگر وارد کنید:

<!DOCTYPE html>

<html>

<head>

<title>Testing colors in CSS3</title>

<style>

p {

font-family: Arial, Helvetica, sans-serif;

color: #ff0000;

background-color: cyan;

}

h1 {

color: rgb(255, 165, 0);

background-color: green;

}

</style>

</head>

<body>

<h1>Testing the color scheme</h1>

<p>

The quick brown fox jumps over the lazy dog.

</p>

<h1>This is the end of the color test</h1>

</body>

</html>

ادامه در مقاله بعدی با عنوان بازی با رنگ2

علیرضا بابامرادی

تاریخ عضویت:19 سپتامبر 2022

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

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

لینک کوتاه:

بازی با رنگ

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

مزایای عضویت در سیگما:

نوشته‌های تازه

آخرین دیدگاه‌ها

دسته بندی مطالب

لینک های کمکی

خدمات اداری

خدمات تیم نهال آی تی

خدمات تیم نهال آی تی

نماد اعتماد الکترونیکی