اموزش گرد کردن گوشه های یک دیو در دریمیور

websaz2012 · Dec 29, 2011

سلام
امروز میخوام اموزش گرد کردن گوشه های یک دیو رو بهتون بگم
حتما تا حالا متوجه شدین که در بسیاری از سایتها پس زمینه پستهای اونها گوشه هاشون بصورت
گرد شده یا نیم دایره است.می دونین این کار تو دریمیور چجوریه؟
اینجوری
.
.
.
توجه!
این کد را باید بصورت دستی تو قسمت css style واسه هر دیوتگ تایپ کنید

moz-border-radius-
واسه گرد کردن 4طرف گوشه های دیو

اما اگه میخواهیین فقط یه طرف یا دو طرف یا سه طرف گوشه رو گرد کنید باید در اخر این کد top right - بالا راست

topleft- بالا چپ bottomleft- پایین چپ bottomright- پایین راست رو اضافه کنین که در اون صورت باید همه ی اینها رو جداگانه تایپ کنید و در اخر در کادر جلوی اونها مقدار بدین که بر اساس پیکسل است

نمونه

moz-border-radius 10px-

moz-border-radius-topleft 10px-

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

freemagic · Jan 14, 2012

نیکی و پرسش
خوب ادامه بدید ما هم منتظریم :rose:

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

vahidd.com · Jan 15, 2012

این مثالشه (البته کامل):

کد:

<html>
<head>
<title>vahidd.com</title>
<style>
div.vahidd{
    border: 2px orange solid;
    margin-left:auto;
    margin-right:auto;
    width:770px;
    height: 361px;
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
    -moz-border-radius: 12px; /* FF1-3.6 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

}

</style>
</head>
<body>
<div class="vahidd"></div>
</body>
</html>

mazyar_f · Jan 31, 2012

سلام اگه صفحه رو با table تقسیم بندی کرده باشیم ،چطور میشه از همین کد استفاده کرد؟من داخل تگ td و tr امتحان کردم اما جواب نداد.

talesh · Feb 2, 2012

سلام بزارید مطلب دوست عزیزمان websaz2012 رو کامل کنم
برای گرادینت دادن به صفحه از کد

PHP:

     background: -moz-linear-gradient(top,#fff,#eee);

نمونه دیگر

PHP:

      background: -moz-linear-gradient(top , #EAEAEA 0%, #F6F6F6 20px) repeat 0 0;

برای hover هم کدی هست که به صورت اهسته hover یا جابه جایی انجام میشود

PHP:

             -webkit-transition : all 0.8s  ease-in-out;-moz-transition : all .8s ease-in-out;-o-transition : all  0.8s ease-in-out;

vahidd.com · Feb 2, 2012

مثال حالت افکت‌دار

PHP:

<html>
<head>
<title>vahidd.com</title>
<style>
.vahidd{
    border: 2px orange solid;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:770px;
    height: 361px;
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
    -moz-border-radius: 12px; /* FF1-3.6 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    -webkit-transition : all 0.3s  ease-in-out;
    -moz-transition : all .3s ease-in-out;
    -o-transition : all  0.3s ease-in-out;  

}
table.vahidd:hover{
    -webkit-transition : all 0.3s  ease-in-out;
    -moz-transition : all .3s ease-in-out;
    -o-transition : all  0.3s ease-in-out;  
    -webkit-border-radius: 29px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
    -moz-border-radius: 29px; /* FF1-3.6 */
    border-radius: 29px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

    
}
</style>
</head>
<body>
<table class="vahidd">
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
</body>
</html>

Graphessional · Feb 10, 2012

از آموزشهاتون ممنونم ولی به IE زبون نفهم هم اشاره کنید که هنوز از radius پشتیبانی نمی کنه.
به نظرم اگه کسی بخواد دایوش تو همه بروزرها radius داشته باشه، برای گوشه ها از تصویر استفاده کنه بهتره.

vahidd.com · Feb 11, 2012

ie9 از خاصیت border-radius پشتیبانی میکنه

websaz2012 · Feb 11, 2012

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

بسیاری از دوستان سوال کرده اند که برای تیبل میشه از این کدها استفاده کرد ؟ باید بگم بله میشه فقط کافیه تمام این کدها رو به صورت یک کلاس در بیاریین و بر هر تیبل اپلای کنید(داخل ور table کلیک کنید از گزینه properties
گزینه class را انتخاب کنید و کلاس مورد نظر را که تعریف کرده اید را انتخاب کنید

************************با سپاس از دوستانی که همکاری کرده اند-*****************************

hossein111111 · Aug 9, 2012

آقا من میخوام div بصورت پرچمی در بیاد یعنی مثلا اینجوری: border-radius:0px 10px تو فایرفاکس مشکلی نداره ولی در اکسپلورر بک گراند و بردر در گوشه های گرد شده برعکس عمل میکنه به عکس توجه کنید :

سمت چپ فابرفاکس و سمت راست اکسپلورر