رنگ RGBA در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

colorwhh

پیکی از ویژگیهای جدیدی که به Css3 اضافه شده است پالت رنگ RGBA می باشد . اگر با ورژن قبلی Css کار کرده باشید حتما میدانید که برای تعیین رنگ یک عنصر یا المنت از ترکیب رنگهای RGB یا درصد رنگ یا بهتر هست بگویم کدهای هگزا دسیمال که به این شکل FFFFFF# نوشته می شدند استفاده می کردیم .
RGBA چه قابلیت هایی رادر اختیار طراح قرار میدهد ؟  با استفاده از RGBA می توانیم شفافیت المنت مورد نظر را با استفاده از آلفا تغییر بدهیم و این درصد را کم یا زیاد کنیم . 

این ویژگی در اینترنت اکسپلورر10+ ، فایرفاکس 3+ ، کروم ، سافاری و اوپرا 10+ پشتیبانی می شود .

رنگهای RGB
نحوه نوشتن کدهای RGB به شکل زیر می باشد . 255 برابر است با رنگ قرمز - 0 برابر است با سبز ، 0 سوم برابر است با رنگ آبی | rgb(red, green, blue
می توانیم از درصد هم برای استفاده از مقدار رنگها استفاده کنیم . rgb(0%,0%,100%
هرچه مقدار عدد و درصد بیشتر شود ، درصد شفافیفت رنگ مورد نظر بیشتر می شود . 


برای درک بهتر بر روی کلید دمو کلیک کنید . 

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

 

به مثال زیر دقت کنید .متن کامل کد را تایپ کرده ام . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
p
{
background-color:rgb(255,0,0);
}
</style>
</head>
<body>
<h1>به کدهای زیر توجه کنید</h1>
<p>This is some text in a paragraph.</p>
</body>
</html>
{/code}

 

  مشاهده دمو

 رنگ RGBA

این ویژگی در اینترنت اکسپلورر10+ ، فایرفاکس 3+ ، کروم ، سافاری و اوپرا 10+ پشتیبانی می شود .
با استفاده از RGBA می توانیم شفافیت رنگ را بوسیله کد آلفا تغییر بدهیم . دیگر نیازی نیست که درصد و مقدارها را کم یا زیاد کنیم . بوسیله مقدار Alpha که بین دو عدد 0.0 و 1.0 می باشد شفافیت نیز تغییر می کند .

روش نوشتن کدهای RGBA به شکل زیر می باشد rgba(red, green, blue, alpha

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

 

به مثال زیر دقت کنید .متن کامل کد را تایپ کرده ام . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
p
{
background-color:rgba(255,0,0,0.3);
}
</style>
</head>
<body>
<h1>به  کادر زیر توجه کنید .هرچه عدد 3 بیشتر شود شفافیت افزایش پیدا می کند</h1>
<p>This is some text in a paragraph.</p>
</body>
</html>

مشاهده دمو

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:30
مجموعه های بیشتر: « رنگ HSL در Css3 User Interface در Css3 »

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا