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

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

کد CSS :

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

کد CSS :

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

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

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

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

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

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



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