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

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

4146 بازدید

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

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

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

کد HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>وب سیتی</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div class="image"></div>
	</body>
</html>

کد CSS :

.image{
	width:800px;
	height:400px;
	background:url("64888.png")  right bottom no-repeat, url("nice-background-design.jpg") left top no-repeat;
}

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

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

ویژگی Background-size :

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

background:url("logo.png") no-repeat;
background-size:200px 100px;

مدل رنگ RGBA

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

  rgba(255 , 100 , 0 , 0.6)

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

مدل رنگ HSL

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

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

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

hsl(0 , 70% , 80%)

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

کد HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>وب سیتی</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div class="image"></div>
		<div class="image2"></div>
		<div class="image3"></div>
	</body>
</html>

کد CSS :

.image{
	width:200px;
	height:200px;
	background-color:hsl(0 , 30% , 50%);
}
.image2{
	width:200px;
	height:200px;
	background-color:hsl(0 , 60% , 50%);
}
.image3{
	width:200px;
	height:200px;
	background-color:hsl(0 , 100% , 50%);
}