css گرد کردن لبه تکس باکس

[alia.n]

سلام دوستان من کد css می خوام که لبه تکس باکس رو گرد کنه توی سایتم جستو جو کردم هر کدی که بود رو امتحان کردم جواب نگرفتم اگر میشه کد رو همراه با یه پروژه برام بزارید ممنون میشم.

[ramin149]

http://border-radius.com/

[≡ ALEX ≡]

اگر می خواهید این افکت روی همه مرورگر ها قابل دیدن باشه به کمی اضافه کاری احتیاج هست و استایل هایی که در لینک فوق ارایه می شوند کافی نخواهند بود.

اول از همه باید این افکت رو به مرورگر های Safari ،Firefox و Chrome بدهید. کد زیر این مرورگر ها و مرورگر های دیگری که از هسته های WebKit و Mozilla و KHTML استفاده می کنند پوشش خواهد داد. WebKit هسته توسعه یافته از KHTML لینوکسی است (KHTML توسط KDE توسعه می یابد) که توسط شرکت Apple شکل گرفت و در مرورگر Safari بکار گرفته شد و سپس بعد از مدتی تحت لایسنس GNU LGPL, BSD-style و بصورت Open Source انتشار یافت و در دسترس عموم قرار گرفت. این هسته هم اکنون در مرورگر های Safari و Google Chrome و نیز مرورگر تلفن های همراه بر پایه نوکیا و Palm و ... مورد استفاده قرار گرفته است. KHTML نیز در حال حاضر بر روی مرورگر لینوکسی Konqueror استفاده می شود. شرکت موزیلا نیز هسته Gecko را که در ابتدا توسط Netscape توسعه داده شد، مورد استفاده قرار داده و توسعه می دهد. قدیمی تر ها مرورگر Netscape رو بخاطر دارند حتما. شرکت مایکروسافت نیز بر روی هسته های Tasman و Trident کار توسعه را انجام داده و در حال حاضر مرورگر های Internet Explorer این شرکت از هسته ثانوی بهره می برد. (اطلاعات بیشتر در اینجا (http://en.wikipedia.org/wiki/Comparison_of_web_browser_engines))

خوب پس ما برای پوشش دادن سری اول مرورگر ها می بایست از استایل های زیر استفاده کنیم:

.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari and chrome */
-khtml-border-radius: 10px; /* KHTML/Konqueror (Linux browsers) */
border-radius: 10px; /* CSS3 */
}

خوب حالا می رسیم به IE... مرورگر مایکروسافت تا ورژن 8 از هیچ border-radius ای پشتیبانی نمی کند. ولی ورژن 9 آن از CSS3 پشتیبانی می کند و لذا برای این ورژن، خط آخر کد بالا کار خواهد کرد. و اما برای ورژن های 8 به قبل روش htc پیشنهاد می گردد. بدین جهت شما می بایست آخرین ورژن این فایل یعنی نسخه 3 که از مرورگر های IE6 و IE7 و IE8 پشتیبانی میکند را از اینجا (http://code.google.com/p/curved-corner/downloads/list) دانلود کرده و توسط کد زیر مورد استفاده قرار دهید.

.rounded-corners {
behavior: url(border-radius.htc);
border-radius: 10px;
}

خوب اینم از IE، حالا نوبت می رسه به Opera... برای اپرا نسخه های سری 10 هم کد زیر پاسخگو خواهد بود:

.rounded-corners {
-o-border-radius: 10px;
}

در آخر نیز مرورگر iCab (http://en.wikipedia.org/wiki/ICab) که برای MAC OS ارایه شده است را تحت پوشش قرار خواهیم داد:

.rounded-corners {
-icab-border-radius: 10px;
}

پس در نهایت یک همچین کدی را خواهیم داشت:

.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari and chrome */
-khtml-border-radius: 10px; /* KHTML/Konqueror (Linux browsers) */
-o-border-radius: 10px; /* Opera 10.x */
-icab-border-radius: 10px; /* iCab */
behavior: url(border-radius.htc); /* IE6, IE7 and IE8 */
border-radius: 10px; /* CSS3 and .htc */
}

البته برای هر کدام از این ها روش های متفاوتی وجود داره ولی بدترین روش استفاده از تصاویر هستش که بهتره سمت آن ها نرید تا وبسایت سبک تر و خوش استیل تری داشته باشید. برای اطلاعات بیشتر شامل توضیحات تکمیلی، مطالعه روش های دیگر و نیز روش پشتیبانی از مرورگر های دیگر می توانید به منابع زیر مراجعه بفرمایید:

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
و
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

موفق باشید

[alia.n]

:متعجب:دوست عزیز میشه توی یه پروژه کوچولو اینو برام بزارید اخه دوباره قرار میدم توی هیچ مرورگری جواب نمیده؟!!!!!!!

[≡ ALEX ≡]

خدمت شما...

[≡ ALEX ≡]

دوست عزیز فایل بالا آپدیت شد، لطفا مجددا دانلود بفرمایید. چک کردم دیدم با IE8 مشکل داره کمی دستکاری اش کردم تا مشکل برطرف بشه.

[alia.n]

سلام دوستم نمی شه کاری کرد که اسکرول تکس باکس در لبه ها هم گرد بشه اخه اینجوری خیلی زشته

92589

[alia.n]

سلام دوستان می دونم تاپیکم درمورد تکس باکسه اما میشه بلایی سر این DropDownlist آورد که قشنگ تر بشه با گرد شدن لبه ها

92590

[≡ ALEX ≡]

oops!! باورتون میشه اصلا کلمه TextBox رو ندیدم از اول تاپیک؟! :لبخند: یک چند لحظه صبر کنید استایل اینو براتون بزنم! البته هیچ فرقی نداره فقط باید نمونه اش رو ویرایش کنم که روی TextBox اعمال بشه.

[≡ ALEX ≡]

اینم نمونه برای TextBox ها...

برای هر Element دیگری که بخواهید نیز می توانید این استایل ها رو بکار بگیرید.

[alia.n]

سلام دوستم من با تغییر این کد رنگ کادر دور تکس باکس رو عوض کردم




input[type=text] {


padding: 3px 6px;


border:2px Solid blue;

}


اما رنگ دور تکس باکس هاییم که به صورت مولتی لاین هستم تغییر نمی کنه فقط لبشون گرد میشه!!!

[≡ ALEX ≡]

اگر دیده باشید، من اومدم رنگ border رو لیمویی (lime) تعریف کرده ام. میتونید این کلمه رو عوض یا حذف کنید یا کلا اون خط رو حذف کنید. من در اون خط تعریف کردم border به اندازه 1px از بصورت solid و با رنگ لیمویی باشد، شما می توانید تغییرات خودتون رو اعمال کنید.

[≡ ALEX ≡]

سلام دوستم من با تغییر این کد رنگ کادر دور تکس باکس رو عوض کردم




input[type=text] {


padding: 3px 6px;


border:2px Solid blue;

}


اما رنگ دور تکس باکس هاییم که به صورت مولتی لاین هستم تغییر نمی کنه فقط لبشون گرد میشه!!!

شما ظاهرا با CSS آشنایی ندارید. Selector ای که می بینید یعنی [input[type=text داره میگه فقط تگ های input که type شون برابر text هست انتخاب بشوند و استایل درون { } به اون ها اعمال بشه. اگر می خواهید آن را برای TextArea استفاده کنید و یا برای Select باید به ترتیب textarea و select را در آن خط درج کنید. می توانید چند selector را با ویرگول از هم جدا کنید و با یکباره نویسی همه آن ها را پوشش دهید. مثلا:

input[type=text], input[type=password], textarea, select {
/* Your styles */
}

[Saman Hashemi]

البته یه کارایی با jQuery (http://jquery.malsup.com/corner/)هم میشه کرد که اکثر مرورگرها پشتیبانی کنند...!

[≡ ALEX ≡]

البته یه کارایی با jQuery (http://jquery.malsup.com/corner/)هم میشه کرد که اکثر مرورگرها پشتیبانی کنند...!

استفاده از جاوا اسکریپت باعث کندی نسبی صفحات میشه مخصوصا اگر تعداد عملیات جاوا اسکریپتی چند تا بشه. ضمن اینکه در حالت غیر فعال بودن جاوا اسکریپت بر روی مرورگر و یا عدم پشتیبانی از یکسری ویژگی ها عملا کار ها مختل میشه. علاوه بر اون روشی که گفتید ملزم به الحاق کتابخانه jQuery و نیز کد های مربوط به پلاگین corner اون هستش که در نتیجه حجم صفحه رو افزایش و سرعت load رو کاهش میده. حال آنکه راه حلی ساده با چند دستور کوچک توسط CSS پیشنهاد شده و مشکلات قبلی در آن وجود نداره.

البته در صورتیکه افکت ها و ویژگی های خاصی مد نظرتون باشه همانند نمونه هایی که در پلاگین jQuery Conrner مشاهده می کنیم و در صورتیکه قبلا از jQuery در صفحات استفاده شده باشه میشه روی این روش هم حساب کرد و در واقع بهره بری کامل تر از امکانات موجود محسوب می شود. در غیر اینصورت روش استفاده از تصاویر برای گوشه ها به کمک CSS مناسب تر خواهد بود.

[alia.n]

اینم نمونه برای TextBox ها...

برای هر Element دیگری که بخواهید نیز می توانید این استایل ها رو بکار بگیرید.

سلام دوست عزیز فکرکنم این استایل فقط روی چند تا المنت جواب بده مثلا من روی گرید ویو انجام دادم لبه هاش گرد نشد احتمالا برای اون نمیشه حالا میشه کاری کرد که اون هم کمی گرد بشه
ممنون.

[≡ ALEX ≡]

در حالت عادی، ما چیزی تحت عنوان GridView در HTML نداریم. فکر کنم شما ASP کار می کنید. ASP کنترل های مختلف رو به کمک روش های دیگری به صورت عناصر HTML نمایش می دهد. مثلا از Table و Javascript بهره می برد. UI های وب نیز همین کار را می کنند، مثل jQueryUI (http://jqueryui.com/) که به کمک HTML و CSS و jQuery و نیز تعدادی تصویر، کنترل های مختلفی را با theme های مختلف در اختیار ما قرار می دهد.

در کل کد هایی که در اینجا ارایه شده اند بر هر element ای که خاصیت border را پشتیبانی کند، عمل می کند. اگر ممکنه نمونه خروجی تان به صورت HTML را در اختیار من قرار دهید تا ببینم چه کار میشه برایش کرد.

[≡ ALEX ≡]

راستی، اگر ASP استفاده می کنید، بهتر نیست از WPF کمک بگیرید؟! در این صورت لینک زیر به شما کمک خواهد نمود:

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/210c3136-2b2d-4f7c-b472-459428707faf/

[alia.n]

92723

اگر ممکنه نمونه خروجی تان به صورت HTML را در اختیار من قرار دهید تا ببینم چه کار میشه برایش کرد.

این خروجی گرید ویو هست اگر منظورتون چیز دیگه هست یه کم بیشتر توضیح بدید.ممنون

[≡ ALEX ≡]

منظورم Source Code خروجی بود نه تصویرش! :لبخند:

اینطور که معلوم هست یک GridView ساده بدون Sorting و Selecting و ... هستش که توسط Table پیاده سازی شده. نگفتید ASP دارید استفاده می کنید یا خیر؟!

[alia.n]

منظورم Source Code خروجی بود نه تصویرش! :لبخند:

اینطور که معلوم هست یک GridView ساده بدون Sorting و Selecting و ... هستش که توسط Table پیاده سازی شده. نگفتید ASP دارید استفاده می کنید یا خیر؟!

ببخشید یادم رفت بگم از asp استفاده می کنم.


<

asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"


DataSourceID="SqlDataSource1">


<Columns>


<asp:BoundField DataField="lesson_code" HeaderText=" "


SortExpression="lesson_code" />


<asp:BoundField DataField="Lesson_name" HeaderText=" "


SortExpression="Lesson_name" />


<asp:BoundField DataField="tedad_soal" HeaderText=" "


SortExpression="tedad_soal" />


</Columns>


</asp:GridView>

[alia.n]

دوستان ایا می تونید لبه گرید ویو رو گرد کنید؟؟؟