با سلام خدمت بازدیدکنندگان وبلاگ وینسا در این مطلب میخوایم به شما اولین جلسه css3 آموزش بدیم، دوستان عزیز در نظر گرفته شده سلسله آموزش های طراحی وب از جمله css در این وبلاگ قرار دهیم تا شما استفاده لازم رو ببرید ...
مقدمه
CSS3به بخش های کوچکتری که ماژول نامیده میشوند تقسیم میشود . در CSS3 نسبت به نگارش قبلی برخی از خواص به بخش های کوچکتری تقسیم شده اند و برخی خواص جدید نیز اضافه شده است .
برخی از ماژول های CSS3 عبارتند از :
- Selector ها
- Box Model
- زمینه و حاشیه
- افکت نوشته ها
- تبدیل های دو/سه بعدی
- انیمیشن
- ستون های چندگانه
- واسط کاربری (UI)
با استفاده از CSS3 شما میتوانید گوشه های اجزا ( مثل تصاویر و یا کادر ها ) را گرد کنید و یا به جعبه ها سایه اضافه کنید و یا حتی از تصویر برای حاشیه های استفاده کنید بدون آنکه نیاز به برنامه جانبی دیگری مثل فوتوشاپ داشته باشید .
در درس اول و دوم شما خواص زیر را در سی اس اس یاد میگیرید :
- border-radius
- box-shadow
- border-image
پشتیبانی مرورگرها
اینترنت اکسپلورر 9 دو مورد از سه مورد خواص جدید را پشتیبانی می کند .
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.
اوپرا خوشبختانه ویژگی های جدید سی اس اس که در بالا ذکر شد ( border-radius , border-image و box-shadow ) را پشتیبانی میکند.
گرد کردن گوشه ها
اضافه کردن گوشه های گرد در CSS2 بسیار وقت گیر بود . ما باید برای هر گوشه از یک تصویر استفاده میکردیم .
در CSS3 ایجاد گوشه های گرد آسان است .
در CSS3 از ویژگی border-radius برای ایجاد گوشه های گرد استفاده میشود .
وبلاگ وینسا
border-radius:20px;
-moz-border-radius:20px; /* Firefox 3.6 یا قدیمی تر */
}
ما در کد بالا border-radius را برابر با 20 پیکسل قرار دادیم شما میتونید هر مقداری که دوست دارید بزارید.
هر چه مقدار border-radius بیشتر باشد گوشه ای باکس شما گردتر میشود به مثال زیر دقت کنید :
border-radius:50px;
-moz-border-radius:50px; /* Firefox 3.6 یا قدیمی تر */
}
موفق و سربلند باشید.
