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

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

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

3739 بازدید 28 سپتامبر 2017 رضا طوماری آموزش CSS3 بدون دیدگاه

در این قسمت از دانلود فیلم 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%);
}