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

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

فیلم آموزش CSS3 – اولین جلسه از آموزش 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-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 داده شده است .

فیلم آموزش CSS3 را می توانید از لینک زیر دانلود کنید .

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

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

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



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