در اولین جلسه از فیلم آموزش 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 داده شده است .
مرسی بابت فیلم های اموزشی خوبتون. واقعا مفید . و طوری اموزش داه شده که مبتدی ها هم میتونن استفاده کنن.
فقط اگه امکان داره یه اموزشم بذارین در مورد اینکه اصلا چه جوری یه پروژه رو شروع کرد؟
بیشتر پروژه محور باشه.
چون حجم مطالب بالاست و اگه بدونیم چه جوری میشه از اینا بهترین استفاده رو کرد خیلی خوب میشه.
ممنون. موفق باشید
سلام وقتتون بخیر
آموزش پروژه محور هم گذاشتیم توی سایت که جمع بندی همین مطالب طراحی سایت هستش و از لینک زیر می تونید بهش دسترسی داشته باشید :
https://web30ty.com/%d9%81%db%8c%d9%84%d9%85-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3%db%8c/