آموزش CSS3 ـ بخش اول

CSS 2 را مطمئنا می شناسید و می دانید که ورژن قدیمی زبان css است. اما ورژن جدید آن تحولی نوین در طراحی صفحات وب به وجود آورده است، ولی نقص ها و کمبودهایی زیادی را به همراه داشته است. از این رو طراحان استانداردهای وب تصمیم گرفتند تا ورژن جدیدی از این زبان را ایجاد نمایند تا کمبودهای ورژن قبلی را برطرف نمایند. این گونه بود که CSS3 متولد شد. در واقع باید این طور از این زبان برنامه نویسی گفت که CSS3 روش نوین قالب بندی صفحات وب است که بیشتر خواص های CSS 2 را شامل شده و خواص جدید و بسیار جالبی به آن اضافه شده است.

و اما در ادامه به شما خواص و قابلیت های جدیدی که در این ورژن گنجانده شده است را یاد می دهیم و با کلیت کار با CSS کاری نداریم. اما قبل از آن سری به آموزش سی.اس.اس بزنید که باید حتما زمینه ای از این داشت باشید.

خواص جدید سی.اس.اس ۳ :

در سی.اس.اس ۳، خواص جالب و کاربردی زیادی اضافه شده است. از جمله این خواص می توان به خطوط حاشیه با گوشه های منحنی، افکت سایه برای خطوط حاشیه عناصر و یا استفاده از چندین عکس همزمان در پس زمینه یک عنصر نام برد. در مثال زیر خاصیت جدید خطوط حاشیه با گوشه های منحنی را نشان داده ایم. نمایش صحیح خروجی به ورژن مرورگر شما بستگی دارد.

اما نگرانی درباره پشتیبانی ورژن دوم آن می باشد که در ادامه به آن پرداخته ایم :

هیچ نگرانی برای پشتیانی از خواص قبلی ورژن دوم و در سی.اس.اس ۳ وجود ندارد. تمام این خواص و امکانات در ورژن سی.اس.اس ۳ لحاظ شده و مرورگرهای مطرح از آن ها به طور کامل پشتیبانی می کنند. سی.اس.اس ۳ فقط امکانات جدید و بی نظیری را در اختیار ما قرار داده است. تمامی مثال ها و مطاب این بخش بر اساس استاندارهای مرجع های آموزشی رسمی این زبان طراحی شده و با مرورگر های مطرح IE , Opera , FireFox و Chrome تست شده اند.

خطوط حاشیه در سی.اس.اس ۳ :

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

border-image : به وسیله این خاصیت می توان یک عکس را به عنوان خطوط حاشیه برای عنصر مورد نظر خود به کار ببرید.

border-radius : به وسیله این خاصیت می توانید گوشه های خطوط حاشیه را به صورت گرد ( منحنی ) در بیاورید.

box-shadow : به وسیله این خاصیت می توانید برای خطوط حاشیه عناصر سایه ایجاد نمایید.