صفحه اصلی / ▼آموزشLearning / –3 آموزش سی اس اس Learning CSS3 / آشنایی با دو عنصر rgb و rgba در CSS
آشنایی با دو عنصر rgb و rgba در CSS

آشنایی با دو عنصر rgb و rgba در CSS

rgb و rgba در اصل یکی هستند . و rgba نسخه جدیدتری نسبت به rgb هست که در بین کد های CSS3 عرضه گشته در زیر این مطلب یک تصویر میبینید که دارای دو قسمت هست که قسمت اول با rgb ایجاد گردیده و فسمت دوم تصویر با rgba ایجاد گردیده است. برای اطلاعات بیشتر به ادامه مطلب مراجعه کنید …

rgb و rgba در اصل یکی هستند . و rgba نسخه جدیدتری نسبت به rgb هست که در بین کد های CSS3 عرضه گشته در زیر این مطلب یک تصویر میبینید که دارای دو قسمت هست که قسمت اول با rgb ایجاد گردیده و فسمت دوم تصویر با rgba ایجاد گردیده است. برای اطلاعات بیشتر به ادامه مطلب مراجعه کنید …

آشنایی با دو عنصر rgb و rgba در CSS
در تصویر بالا شما هیچ تفاوتی را مشاهده نمی کنید اما در ادامه تفاوت این دو کد را خواهید فهمید .

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

در روش اول استفاده از نام رنگ :

#example1 {background: black;}

در روش دوم استفاده از کد رنگ :

#example2 {background: #000000;}

و در روش سوم استفاده از rgb رنگ :

#example3 {background: rgb(0, 0, 0);}

خوب اصلا rgb چی هست؟

در پاسخ این پرسش باید گفت که همون طور که در مثال بالا می بینید rgb از سه قسمت تشکیل شده است . این سه قسمت مربوط به رنگ های مادر و اصلی یعنی رنگ های “قرمز , سبز و آبی” است. شما میتوانید در هر قسمت یک عدد بین ۰ تا ۲۵۵ قرار بدید . با قرار دادن عدد در هر سه رنگ یک رنگ جدید به وجود خواهد آمد. فکر کنم دیگه متوجه شدید این rgb یا همون red green blue چی هستش. شما در تصویری که در بالای مطلب گذاشته شده قسمتی که مربوط به rgb هست را اگر مشاهده کنید یک پالت رنگ ۵ فیلدی که از رنگ قرمز کم رنگ به سمت قرمز پر رنگ کشیده میشه میبینید ولی در کنارش پالت رنگ rgba رو میبینید که دقیقا به همون شکل هست.

خوب بریم سراغ rgba :

» همون طور که در اول مطلب گفته شد rgb و rgba تفاوت چندانی با هم ندارند و تنها تفاوت این دو قسمت “Alpha channel” در rgba هست . در ابتدا برای اینکه فراموش مان نشود روش نوشتن rgba را بگوییم . rgba به شکل زیر نوشته میشه و با نگاه ساده بهش میشه شباهتش رو با rgb دید :

#example4 {background: rgba(0, 0, 0, 1);}

همون طور که میبیند تنها اسم rgba تغییر کرده و در اخر آن یک قسمت جدید اضافه شده است . به این قسمت جدید میتوانید یک عدد بین ” ۰ تا ۱ ” بدهید و نه بیشتر …

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

آشنایی با دو عنصر rgb و rgba در CSS

همون طوری که توی تصویر بالا میبینید کد rgb به شکل همون کد رنگی بهش داده شده مونده اما rgba با تنظیم قسمت آخر آن بین اعداد صفر تا یک  انعطاف پذیری بیشتری ایجاد گردیده . این کد میتونه استفاده های زیادی برای طراحان وب داشته باشه . در اصل کار rgba میشه گفت محو کردن رنگ هست که میتونه بین ۰ تا ۱ باشه. در گذشته اگر میخواستیم چنین کاری را انجام دهیم مجبور به استفاده از opacity بودیم که با این امکان جدید دیگر نیاز به این کار نیست با مثاز زیر متوجه منظور خواهید شد :

background-color: rgb(0,0,255); opacity: 0.5;

و

background-color: rgba(0,0,255,0.5);

یک نتیجه را به ما خواهند داد . اما شما میتوانید با کد زیر تصویری که در بالای مطلب گذاشته شده رو شبیه سازی کنید و با کمی دستکاری در آن بیشتر با این کد آشنا شوید …

</pre>
<table border="0">
<tbody>
<tr>
<td style="background: rgba(255,0,0,0.2); width: 40px; height: 40px;"></td>
<td style="background: rgba(255,0,0,0.4); width: 40px; height: 40px;"></td>
<td style="background: rgba(255,0,0,0.6); width: 40px; height: 40px;"></td>
<td style="background: rgba(255,0,0,0.8); width: 40px; height: 40px;"></td>
<td style="background: rgba(255,0,0,1); width: 40px; height: 40px;"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="background: #f3bfbd; width: 40px; height: 40px;"></td>
<td style="background: #f68f8e; width: 40px; height: 40px;"></td>
<td style="background: #f95f5e; width: 40px; height: 40px;"></td>
<td style="background: #fc2f2f; width: 40px; height: 40px;"></td>
<td style="background: #ff0000; width: 40px; height: 40px;"></td>
</tr>
</tbody>
</table>
<pre>

منبع : والفا

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

Input ?
Opacity 1
Name ?
Hex #000080
Hex + Alpha #FF000080
RGB rgb(0,0,128)
RGBA rgba(0,0,128,1)
HSL hsl(240,100%,25%)
HSLA hsla(240,100%,25%,1)

به صورت یکجا دریافت کنید و هر کدام طبق نیازتون توی استایلتون به کار ببرید.

برای دیدن این سایت به آدرس http://projects.korrelboom.com/color-convertor مراجعه کنید.

درباره مدیر سایت

سعید حسینی هستم کارشناسی مهندسی نرم افزار مدیر سایت و علاقه مند به فناوری اطلاعات و تکنولوژی های نو علاقه مند به وردپرس و جوملا و مدتی افتخار همکاری با انجمن پشتیبانی وردپرس پارسی را نیز داشتم. مهارتهای نرم افزاری • وب : PHP , HTML , Java script , JQuery , asp , CSS & CSS3 , Dreamweaver • برنامه نویسی : Delphi , C ++ , C sharp • بانک اطلاعاتی : SQL Server , MySQL , Oracle • طراحی : Photoshop ورزش های مورد علاقه ام شنا و فوتبال و دوچرخه سواری هستند.

همچنین بخوانید

اضافه کردن متن به CSS با خاصیت Content

اگر برای شما هم سوال پیش آمده که چطوری با css متنی را اضافه کنیم …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *