ایجاد گوشه گرد برای عناصر صفحه

[iran-TEC]

با سلام خدمت دوستان
من قصد داشتم برای تگ div صفحه با استفاده از jQuery گوشه گرد ایجاد کنم ولی فقط این گوشه های گرد بر روی
mozila firefox نمایش داده می شه البته من از border برای نمایش قاب برای div استفاده کرده ام و وقتی که از background-color برای پر کردن div بدون استفاده از border را به کار می گیرم در همه مرورگر ها درست نمایش داده می شود . فایلی که ساخته در پیوست قرار داده ام

 

[maysam.m]

توی اینترنت اکسپلورر که به درستی کار نمیکنه!

 

[DANG3R]

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

چرا از روش های ساده تر استفاده نمی کنید ؟
از این کد XHTML , CSS استفاده کنید.


سی اس اس :

div.rounded {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  padding:10px;
  border:3px solid #f3ddac;
  background: #fff3d8;
}

اچ تی ام ال :

<div class="rounded">
<h2>تست گوشه گرد!</h2>
<p>تست گوشه گرد ساده.</p>
</div>

 

[E-Boy]

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

چرا از روش های ساده تر استفاده نمی کنید ؟
از این کد XHTML , CSS استفاده کنید.


سی اس اس :

div.rounded {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  padding:10px;
  border:3px solid #f3ddac;
  background: #fff3d8;
}

اچ تی ام ال :

<div class="rounded">
<h2>تست گوشه گرد!</h2>
<p>تست گوشه گرد ساده.</p>
</div>

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

 

[Mr.Steres]

3 تا عکس برای بالا پایین و وسط طراحی کنید و به عنوان بک گراند می تونی به کارش ببری ....

css هم خاستی بگو ...

 

[foranyone]

اگه میخوای با JQuery همه ی منو ها رو تو همه ی مرورگرها تست کتی ، هرچند که بهترین روش همون عکسه ولی :

با جی کوئری علاوه بر گرد کردن میشه افکت های جالب تری هم داد :

http://malsup.com/jquery/corner/

 

[port80]

درور به همه اساتید
یه سوال...؟
راهی وجود داره فقط دوتا گوشه خاص رو گرد کرد؟ مثلا گوشه پایین سمت چپ و گوشه بالا سمت راست؟

 

[echessdesign]

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

 

[eAmin]

درور به همه اساتید
یه سوال...؟
راهی وجود داره فقط دوتا گوشه خاص رو گرد کرد؟ مثلا گوشه پایین سمت چپ و گوشه بالا سمت راست؟

سلام.

بله می شه البته در مرورگرهای firefox,opera,safari,chrome، کلا border-radius یکی از خصیصه های css3 هست که 4 تا ورودی دریافت می کنه شما می تونید هرکدوم رو که دوست داشتید رو مقدار دهی کنید، مثال:

-moz-border-radius: 10px 0 10px 0;
-webkit-border-radius: 10px 0 10px 0;
border-radius: 10px 0 10px 0;

 

[foranyone]

امین css3 توسط مرورگرها پشتیبانی میشه ؟

منبع یادگیری هم بدی ممنون میشم

 

[k2-4u]

منبع یاد گیری CSS3
http://CSS3.Info

 

[port80]

سلام.

بله می شه البته در مرورگرهای firefox,opera,safari,chrome، کلا border-radius یکی از خصیصه های css3 هست که 4 تا ورودی دریافت می کنه شما می تونید هرکدوم رو که دوست داشتید رو مقدار دهی کنید، مثال:

-moz-border-radius: 10px 0 10px 0;
-webkit-border-radius: 10px 0 10px 0;
border-radius: 10px 0 10px 0;

واقعا از راهنماییتون ممنونم..اما واسه اینترنت اکسپلورر و بقیه مرورگرها چه راهی رو پیشنهاد میکنید؟

 

[foranyone]

http://malsup.com/jquery/corner/

این روش تو همه ی مرورگر ها جواب میده !

 

[echessdesign]

درود بر شما
در اولین فرصت، آموزش تصویری ساخت گوشه های گرد با css2 را قرار خواهم داد.

 

[eAmin]

سلام.

این آدرس هم می تونه مفید باشه:
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
برای پشتیبانی در تمامی مرورگرها.
----------------
اگر می خواید بدونید که چه مواردی از css3 در ورژنهای مختلف IE پشتیبانی می شه، تو این آدرس تمامی موارد آورده شده:
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

 

[meysamz]

در حال حاضر و البته در ایران بهترین راه استفاده از تصویر در پش زمینه است.
استفاده از جاوا اسکریپتی که بتوانه تو تمام مروگر ها از جمله ie6 که یزرگترین مشکل هستند سایت را کند می کند
ضمنا شما با تصویر می توانید گوشه های بسیار زیبا تری طراحی کنید.
کافی است از چند دیو داخل هم استفاده کنید.
استفاده از border-radius بدرد زمانی می خوره که نمی توانید کد را تغییر بدهید.