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