iman_ebru
Active Member
به عنوان يک ديزاينر، شايد خيلی وقتها برای طرحتون نياز به Tableهايی با لبههای گرد شده داشتين و اون رو با درنظر گرفتن يک جدول ۳x۳ و قرار دادن گوشههای گرد شدهی اون در قالب عکسهای خيلی کوچيک و در هرکدام از گوشههای جدول ساختين. (شکل پائین)
اين لبههای گرد رو با تکنيکهای مختلفی ميشه درست کرد. همونطور که میبینید توی شکل پائين با حذف کردن يک پيکسل از گوشههای مستطیل، در نمای %100 لبه گردی تجسم ميشه.
هرچقدر که تعداد پيکسلهای حذف شده در لبههای مستطيل بيشتر باشه، اونها بهتر گردی خودشون رو نشون ميدن.
در طرحهايی با رنگهای زمينه روشن، حتی میتونيم پيکسلهای بيشتری رو حذف کنيم و به اين ترتيب به لبههای گردتری برسيم.
تا اینجا مطلب خاصی رو نگفتیم! با این مقدمه و با استفاده از ابزار قدرتمند CSS میخوایم تگهای HTML خودمون رو طوری Customize کنیم که به راحتی و با صرف کمترین هزینه در طراحيمون به اين مستطيلها با رنگهای مختلف برسيم.
با گفتن تکنیک اول در همون ابتدای مطلب (ساختن یه جدول ۳x۳)، شايد متوجه شده باشيد که برای ايجاد جدولهايی با رنگهای مختلف در یک صفحه بايد يک Set کامل (هر ۴ لبهی گرد شده) از رنگ موردنظرمون رو داشته باشيم. خب اين کار وقت گيريه…! با روشی که میگم دیگه نیازی به انجام این کار نیست و حجم تصاویر استفاده شده در صفحه به مراتب کمتره.
در این روش فقط رنگ Background صفحهی ما (که من اینجا از سفید استفاده می کنم) مهمه. کاری که ما انجام ميديم اینه که يه تصوير Transparent به اندازهی عرض جدول موردنظرمون باز میکنيم و به جای ساختن گوشههای گرد، فقط معکوس اونها رو با رنگ زمينه صفحهمون رنگ میکنيم. اگه دقیقا متوجه نشدید، شکل زير همه چيز رو به وضوح نشون ميده. (دقت کنید که ۲۴۰ پیکسل به صورت دلخواه انتخاب شده، عرض جدول شما میتونه هرچیز دیگهای باشه)
اين تصوير رو به عنوان Background قسمت بالای مستطيلمون در نظر میگيريم و برای قسمت پائين اون همين تصوير رو قرينه میکنيم. به عنوان آخرین مرحله اين تکنيک رو برای تگ <DL> یا Definition List پیادهسازی می کنیم. این هم کد CSS اون:
همانطور که میبینید، در این روش برای عوض کردن رنگ مستطيل فقط کافيه مقدار BACKGROUND-COLOR رو برای تگهای <DL> و <DT> عوض کنيم. نمونهی کاملی از اين مثال با رنگهای مختلف رو می تونيد از اينجا ببينيد
منبع
ايمان
اين لبههای گرد رو با تکنيکهای مختلفی ميشه درست کرد. همونطور که میبینید توی شکل پائين با حذف کردن يک پيکسل از گوشههای مستطیل، در نمای %100 لبه گردی تجسم ميشه.
هرچقدر که تعداد پيکسلهای حذف شده در لبههای مستطيل بيشتر باشه، اونها بهتر گردی خودشون رو نشون ميدن.
در طرحهايی با رنگهای زمينه روشن، حتی میتونيم پيکسلهای بيشتری رو حذف کنيم و به اين ترتيب به لبههای گردتری برسيم.
تا اینجا مطلب خاصی رو نگفتیم! با این مقدمه و با استفاده از ابزار قدرتمند CSS میخوایم تگهای HTML خودمون رو طوری Customize کنیم که به راحتی و با صرف کمترین هزینه در طراحيمون به اين مستطيلها با رنگهای مختلف برسيم.
با گفتن تکنیک اول در همون ابتدای مطلب (ساختن یه جدول ۳x۳)، شايد متوجه شده باشيد که برای ايجاد جدولهايی با رنگهای مختلف در یک صفحه بايد يک Set کامل (هر ۴ لبهی گرد شده) از رنگ موردنظرمون رو داشته باشيم. خب اين کار وقت گيريه…! با روشی که میگم دیگه نیازی به انجام این کار نیست و حجم تصاویر استفاده شده در صفحه به مراتب کمتره.
در این روش فقط رنگ Background صفحهی ما (که من اینجا از سفید استفاده می کنم) مهمه. کاری که ما انجام ميديم اینه که يه تصوير Transparent به اندازهی عرض جدول موردنظرمون باز میکنيم و به جای ساختن گوشههای گرد، فقط معکوس اونها رو با رنگ زمينه صفحهمون رنگ میکنيم. اگه دقیقا متوجه نشدید، شکل زير همه چيز رو به وضوح نشون ميده. (دقت کنید که ۲۴۰ پیکسل به صورت دلخواه انتخاب شده، عرض جدول شما میتونه هرچیز دیگهای باشه)
اين تصوير رو به عنوان Background قسمت بالای مستطيلمون در نظر میگيريم و برای قسمت پائين اون همين تصوير رو قرينه میکنيم. به عنوان آخرین مرحله اين تکنيک رو برای تگ <DL> یا Definition List پیادهسازی می کنیم. این هم کد CSS اون:
کد:
dl {
width: 240px;
margin: 0 0 20px 20px;
background: #999 url(box_bottom.gif) »
no-repeat bottom left;
}
dt {
margin: 0;
padding: 10px;
background: #999 url(box_top.gif) »
no-repeat top left;
}
dd {
margin: 0;
padding: 10px;
}همانطور که میبینید، در این روش برای عوض کردن رنگ مستطيل فقط کافيه مقدار BACKGROUND-COLOR رو برای تگهای <DL> و <DT> عوض کنيم. نمونهی کاملی از اين مثال با رنگهای مختلف رو می تونيد از اينجا ببينيد
منبع
ايمان
