تبلیغات
تبلیغات متنی
آموزشگاه آرایشگری مردانه شفیع رسالت
دکتر علی پرند فوق تخصص جراحی پلاستیک
بهترین دکتر پروتز سینه در تهران
محبوبترینها
راهنمای انتخاب شرکت‌های معتبر باربری برای حمل مایعات در ایران
چگونه اینورتر های صنعتی را عیب یابی و تعمیر کنیم؟
جاهای دیدنی قشم در شب که نباید از دست بدهید
سیگنال سهام چیست؟ مزایا و معایب استفاده از سیگنال خرید و فروش سهم
کاغذ دیواری از کجا بخرم؟ راهنمای جامع خرید کاغذ دیواری با کیفیت و قیمت مناسب
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
آفریقای جنوبی چگونه کشوری است؟
بهترین فروشگاه اینترنتی خرید کتاب زبان آلمانی: پیک زبان
با این روش ساده، فروش خود را چند برابر کنید (تست‌شده و 100٪ عملی)
خصوصیات نگین و سنگ های قیمتی از نگاه اسلام
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1866197298
مستطیل های لبه گرد و CSS -
واضح آرشیو وب فارسی:سایت ریسک: t=24278">مستطیل های لبه گرد و CSS iman_ebru 03 آذر 1383, 21:24به عنوان يک ديزاينر، شايد خيلی وقتها برای طرحتون نياز به Tableهايی با لبههای گرد شده داشتين و اون رو با درنظر گرفتن يک جدول ۳x۳ و قرار دادن گوشه‌های گرد شده‌ی اون در قالب عکسهای خيلی کوچيک و در هرکدام از گوشه‌های جدول ساختين. (شکل پائین) اين لبههای گرد رو با تکنيک‌های مختلفی ميشه درست کرد. همونطور که می‌بینید توی شکل پائين با حذف کردن يک پيکسل از گوشه‌های مستطیل، در نمای %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> عوض کنيم. نمونه‌ی کاملی از اين مثال با رنگهای مختلف رو می تونيد از اينجا ببينيد منبع () ايمان :oops: :( mohsenshahbazi 03 آذر 1383, 21:30چي شده ايكون Sad (ناراحتي) گذاشتي اون پايين قبلا فقط همون ايكون اولي بود هميشه ... اتفاقي افتاده ؟؟ محسن mazoolagh 06 آذر 1383, 10:04ابتكار هر كي هست خيلي جالبه! من هميشه براي گوشه ها از شكل و جدول (روش اول) استفاده ميكردم البته فقط وقتهايي كه ارتفاع يا عرض يا هر دو متغير باشن . يك بنده خدايي ميگفت كه شنيده با css ميشه لبه ها رو گرد كرد - گفتم با css هم بدون عكس نميشه احتمالا منظورش همچين چيزي بوده و من فكر ميكردم منظورش فرضا با border type يا چيزي مشابه هست. PersianArt 07 آذر 1383, 02:43جالب بود ايمان جان.....مرسي فرهاد :(
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 1754]
-
گوناگون
پربازدیدترینها