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

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

فیلم آموزش CSS3 – اولین جلسه از آموزش CSS3

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

در اولین جلسه از فیلم آموزش CSS3 که از سایت وب سیتی ارائه می شود ، درباره CSS3 توضیح داده شده است و با ویژگی های جدیدی که در این نسخه ارائه شده است آشنا خواهید شد . در ادامه با ویژگی های border-radius و border-image آشنا می شوید .

CSS3 چیست ؟

پس از معرفی CSS برای اولین بار ، در سال های بعدی به سی اس اس ویژگی های جدیدی اضافه کردند و آن را CSS2 نام گذاری کردند و بعد از آن هم دوباره به CSS ویژگی های جدید اضافه کردند که می شود نسخه سوم از CSS و به همین خاطر به آن CSS3 می گویند و در حال حاضر این جدید ترین نسخه از CSS است و در سال های بعد هم شاید نسخه های بعدی CSS معرفی شود .

ویژگی border-radius

این ویژگی در CSS3 معرفی شده است و با استفاده از این ویژگی می توانیم گوشه های همه عناصر را گِرد ( به صورت دایره ای ) کنیم .
مقدار این ویژگی را می توانیم به صورت پیکسل تعیین کنیم یا به صورت درصد آن را بنویسیم .

کد HTML :

<!doctype html>
<html>
	<head>
		<title>وب سیتی</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="box"></div>
		<div id="border"></div>
	</body>
</html>

کد CSS :

#border{
	width: 200px;
	height: 200px;
	background-color:green;
	border-radius:20px;
}
#box{
	width: 200px;
	height: 200px;
	background-color:green;
	margin-bottom:20px;
}

اگر کد های بالا را اجرا کنید تفاوت را خواهید دید .
در فیلم آموزش CSS3 به صورت کامل ویژگی border-radius توضیح داده ام .

ویژگی border-image

از این ویژگی که در CSS3 معرفی شد ، برای قرار دادن تصویر دلخواه در Border به جای رنگ استفاده می کنیم . نکته ای که باید در نظر بگیرید این هست که قبل از استفاده از این ویژگی باید از ویژگی border در CSS استفاده کنید و مقدار رنگ آن را transparent ( به معنی شفاف ) قرار بدید .
این ویژگی درای چندین مقادیر است که آن ها را در فیلم آموزشی برای شما توضیح داده ایم .

border-image-slice : از ویژگی برای مشخص کردن اندازه تصویر استفاده می شود ، و تصویری که برای border درست می کنیم باید دارای 9 ناحیه باشد . ( در فیلم آموزش CSS3 با مثال توضیح داده شده است )

border-image-repeat : این ویژگی تعیین می کند که اون ناحیه ای در عکس هست به چه صورت باشد ؟ به صورت تکراری باشد یا به صورت کشیده ( stretch ) باشد . و دارای مقادیر round ، stretch ، repeat است .

border-image-source : این ویژگی هم آدرس عکس را مشخص می کند .

عکس زیر رو در نظر بگیرید :

نحوه استفاده از border-image

حالا می خوایم این عکس رو به عنوان border یا حاشیه یه تگ قرار بدیم ، توضیحات این ها در فیلم آموزشی داده شده است و من فقط کد ها رو اینجا قرار میدم .

کد HTML :

<!doctype html>
<html>
	<head>
		<title>وب سیتی</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

کد CSS :

#box{
	width: 600px;
	height: 300px;
	border: 50px solid transparent; 
	border-image-source:url(border2.png);
	border-image-slice:100;
	border-image-repeat:round;
}

توضیحات بیشتر در فیلم آموزش CSS3 داده شده است .