حاشیه تصویری در CSS3

با استفاده از CSS3 و ویژگی border-image میتوانید از تصویر به عنوان حاشیه استفاده کنید برای نمونه کادر زیر :



با استفاده از این تصویر ایجاد شده است :

سایه برای اجزا در CSS3

در CSS3 از ویژگی box-shadow برای اضافه کردن سایه استفاده می شود.
سایه ای که در زیر مشاهده میکنید با سی اس اس انداخته شده است .

پشتیبانی مرورگر ها

اینترنت اکسپلورر 9 دو مورد از سه مورد خواص جدید را پشتیبانی می کند .
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.
اوپرا خوشبختانه ویژگی های جدید سی اس اس که در بالا ذکر شد ( border-radius , border-image و box-shadow ) را پشتیبانی میکند .

گرد کردن گوشه ها در CSS3

اضافه کردن گوشه های گرد در CSS2 بسیار وقت گیر بود . ما باید برای هر گوشه از یک تصویر استفاده میکردیم .
در CSS3 ایجاد گوشه های گرد آسان است .
در CSS3 از ویژگی border-radius برای ایجاد گوشه های گرد استفاده میشود .

آمدن سی اس اس 3 به این معنا نیست که دیگر ورژن های قبلی پشتیبانی نمیشوند ، لذا لازم نیست طرح های قبلی خود را حتماً به CSS3 تبدیل کنید . مرورگر ها همچنان CSS2 را پشتیبانی میکنند.

ماژول های سی اس اس

CSS3 به بخش های کوچکتری که ماژول نامیده میشوند تقسیم میشود . در CSS3 نسبت به نگارش قبلی برخی از خواص به بخش های کوچکتری تقسیم شده اند و برخی خواص جدید نیز اضافه شده است .

برخی از ماژول های CSS3 عبارتند از :

• Selector ها
• Box Model
• زمینه و حاشیه
• افکت نوشته ها
• تبدیل های دو/سه بعدی
• انیمیشن
• ستون های چندگانه
• واسط کاربری (UI)

توصیه CSS

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