محبوبترینها
چگونه با ثبت آگهی رایگان در سایت های نیازمندیها، کسب و کارتان را به دیگران معرفی کنید؟
بهترین لوله برای لوله کشی آب ساختمان
دانلود آهنگ های برتر ایرانی و خارجی 2024
ماندگاری بیشتر محصولات باغ شما با این روش ساده!
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1845498006
مستطیل های لبه گرد و 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]
[تعداد بازديد از اين مطلب: 1747]
-
گوناگون
پربازدیدترینها