سلام دوستان...
با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید
سی اس اس CSS 3 در واقع نوین ترین ویرایش یا استاندارد عرضه شده در زمینه ی طراحی وب با استفاده از تکنولوژی CSS می باشد. CSS 3 با ورژن های پیشین خود از جمله CSS 2 و CSS 1 کاملاً سازگار است.
در این فصل از سری مقاله های آموزشی CSS شما را با امکانات و ویژگی های جدید که در CSS 3 ارائه شد آشنا می سازیم.
سی اس اس CSS 3 به ماژول هایی تقسیم شده است که خصوصیت های قدیمی ویرایش های CSS 1 و CSS 2 را دارد که این مشخصات به بخش های کوچکتری تقیسم شده. علاوه بر ماژول های قدیمی, ماژول های جدیدی به آن اضافه شده است.
برخی از مهمترین ماژول های CSS 3 در زیر فهرست شده است:
بیشتر ماژول های نوین CSS 3 بنا به توصیه ی کنسرسیوم وب جهان شمول به آن اضافه شده و بیشتر خصوصیات آن از پیش در بسیاری از مرورگرهای مدرن پیاده سازی شده است.
به وسیله ی خاصیت border-radius که در CSS 3 عرضه شد, می توان هر عنصر دلخواهی را با گوشه های گرد ترسیم کرد.
در CSS 3 با بهره گیری از خاصیت border-radius می توان به المان دلخواه خود خصوصیت گوشه های گرد را اعمال کرد.
توجه خود را به سه مثال زیر جلب کنید:
1. عنصری با گوشه های گرد که رنگ پس زمینه ی مشخصی دارد:
2. المانی با گوشه های گرد که خط حاشیه (border) دارد:
3. عنصری با گوشه های گرد که دارای یک تصویر پس زمینه است:
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
نکته:
خاصیت border-radius در واقع یک خاصیت مختصر نویسی کد (short-hand) است که به منظور بهینه کد نویسی و کاهش اندازه ی خاصیت های border-top-left-radius, border-top-right-radius, border-bottom-right-radius و border-bottom-left-radius تعبیه شده است.
چنانچه طراح وب تنها یک مقدار به خاصیت border-radius تخصیص دهد, در آن صورت همان مقدار تخصیص یافته به هر چهار گوشه ی عنصر مربوطه اعمال می شود.
با این وجود, شما می توانید برای هر گوشه مقداری متمایز درنظر بگیرید. برای این منظور باید از قوانین ذیل پیروی کنید:
مفهوم Four values: اولین مقدار به گوشه ی بالا سمت چپ اعمال می شود. مقدار دوم به گوشه ی بالا سمت راست اعمال می گردد. سومین مقدار به گوشه ی پایین سمت راست و چهارمین مقدار به گوشه ی پایین سمت چپ اعمال می شود.
مفهوم Three values: اولین مقدار به گوشه ی بالا سمت چپ, دومین مقدار به گوشه ی بالا سمت راست و همچنین گوشه ی پایین سمت چپ, سومین مقدار نیز به گوشه ی پایین سمت راست اعمال می گردد.
مفهوم Two values: اولین مقدار به گوشه های بالا سمت چپ و گوشه ی پایین سمت راست اعمال می شود. دومین مقدار نیز به گوشه ی بالا سمت راست و گوشه ی پایین سمت چپ اعمال می گردد.
مفهوم One value: هر چهار گوشه به طور یکسان گرد شده و مقداردهی می شوند
زیر سه مثال از مقداردهی های فوق را مشاهده می کنید:
Four values - border-radius: 15px 50px 30px 5px:
Three values - border-radius: 15px 50px 30px:
Two values - border-radius: 15px 50px:
کد CSS 3 آن در مثال زیر به نمایش گذاشته شده است:
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
همچنین می توان گوشه های بیضی شکل برای عنصر ایجاد کرد:
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
خاصیت های مربوط به گرد سازی گوشه ی عناصر در CSS:
آموزش طراحی سایتادامه دارد
