دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS3 » دانلود فیلم CSS3 – ویژگی های جدید Backgroud و مدل رنگ HSL و RGBA
دانلود فیلم CSS3 - ویژگی های جدید Backgroud و مدل رنگ HSL و RGBA

دانلود فیلم CSS3 – ویژگی های جدید Backgroud و مدل رنگ HSL و RGBA

در این قسمت از دانلود فیلم CSS3 ویژگی های جدیدی که در CSS3 برای Background اضافه شده است را آموزش داده ایم و همین طور مدل رنگ HSL و RGBA را آموزش داده ایم .

در CSS3 شما می تونید برای هر کدام از تگ ها بیش تر از یک Background-image اضافه کنید مثلاً الان من میخوام برای پس زمینه یه تگ div از دوتا عکس استفاده بکنم برای این کار مانند کد زیر عمل می کنیم  :

کد HTML :

کد CSS :

برای توضیحات بیش تر می توانید دانلود فیلم CSS3  را انجام دهید و فیلم را مشاهده کنید .

نکته ای در  مورد کد بالا باید بدونید این است که برای اضافه کردن عکس بعدی باید از کاما ( , ) استفاده کنیم .

ویژگی Background-size :

با استفاده از این ویژگی می توانیم سایز عکسی را که می خواهیم به عنوان Background قرار بدیم را خودمان تعیین کنیم . مقدار این ویژگی را می توانیم براساس پیکسل یا درصد تعیین کنیم .

مدل رنگ RGBA

این مدل رنگ مخفف Red , Green  , Blue  , Alphavalue است و به صورت زیر استفاده می شود :

در این کد مقدار اول  رنگ قرمز را تعیین می کند ، مقدار دوم رنگ سبز را ، مقدار سوم رنگ آبی را تعیین می کند . ولی مقدار چهارمی یعنی Alphavalue کدری رنگ را مشخص می کند و مقدار بین 0 تا 1 را می گیرد .
برای رنگ ها باید از مقدار عددی 0 تا 255  استفاده کرد یا می توان به صورت درصد مقدار رنگ ها را تعیین کرد .

مدل رنگ HSL

HSL مخفف  Hue Saturation Lightness است و این مدل رنگ متفاوت از RGB است . در این مدل رنگ سه تا مقدار میگیره ، مقدار اول یعنی Hue مشخص کننده رنگ است که به صورت درجه مقدار دهی می شود مثل یک دایره از 0 تا 360 درجه می دهیم .
مقدار 0 درجه رنگ قرمز را مشخص می کند ، مقدار 120 درجه رنگ سبز را مشخص می کند ، مقدار 240 درجه رنگ آبی را مشخص می کند .

مقدار دوم یعنی Saturation مشخص کننده غلظت رنگ است که و مقدار آن به صورت درصد از 0 تا 100 درصد تعیین می شود و هر چه از صفر به طرف 100 درصد برویم غلطت رنگ کم تر می شود .

مقدار سوم یعنی Lightness مشخص کننده روشنایی رنگ است و مقدار آن به صورت درصد تعیین می شود .

اگر کدهای زیر رو اجرا کنید به طور کامل متوجه این موضوع خواهید شد :

کد HTML :

کد CSS :

برای دانلود فیلم CSS3 اینجا را کلیک کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *