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

شروع موضوع توسط websaz2012 ‏29 دسامبر 2011 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

?

این مطلب را چگونه می پندارین؟

  1. خیلی بد

    1 رای
    20.0%
  2. بد

    0 رای
    0.0%
  3. متوسط

    1 رای
    20.0%
  4. خوب

    3 رای
    60.0%
  1. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    سلام
    امروز میخوام اموزش گرد کردن گوشه های یک دیو رو بهتون بگم
    حتما تا حالا متوجه شدین که در بسیاری از سایتها پس زمینه پستهای اونها گوشه هاشون بصورت
    گرد شده یا نیم دایره است.می دونین این کار تو دریمیور چجوریه؟
    اینجوری
    .
    .
    .
    توجه!
    این کد را باید بصورت دستی تو قسمت css style واسه هر دیوتگ تایپ کنید
    moz-border-radius-
    واسه گرد کردن 4طرف گوشه های دیو

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

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

    نمونه

    moz-border-radius 10px-

    moz-border-radius-topleft 10px-




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







     
    نوشته شده توسط websaz2012 در ‏29 دسامبر 2011
    injaboodam، echessdesign و freemagic از این ارسال تشکر کرده اند.
  2. freemagic

    freemagic New Member

    ارسال‌ها:
    25
    تشکر شده:
    7
    امتیاز دستاورد:
    1
    نیکی و پرسش
    خوب ادامه بدید ما هم منتظریم:rose:
    ولی مشکل اینجاست که از همین هم نتونستیم جواب بگیریم!!!!
     
    نوشته شده توسط freemagic در ‏14 ژانویه 2012
    injaboodam از این پست تشکر کرده است.
  3. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    این مثالشه (البته کامل):

    کد (Text):
    <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>
     
    نوشته شده توسط vahidd.com در ‏15 ژانویه 2012
    injaboodam و echessdesign از این پست تشکر کرده اند.
  4. mazyar_f

    mazyar_f Member

    ارسال‌ها:
    30
    تشکر شده:
    18
    امتیاز دستاورد:
    6
    سلام اگه صفحه رو با table تقسیم بندی کرده باشیم ،چطور میشه از همین کد استفاده کرد؟من داخل تگ td و tr امتحان کردم اما جواب نداد.
     
    نوشته شده توسط mazyar_f در ‏31 ژانویه 2012
    injaboodam از این پست تشکر کرده است.
  5. talesh

    talesh Active Member

    ارسال‌ها:
    105
    تشکر شده:
    34
    امتیاز دستاورد:
    28
    سلام بزارید مطلب دوست عزیزمان 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;
       
     
    نوشته شده توسط talesh در ‏2 فوریه 2012
    injaboodam از این پست تشکر کرده است.
  6. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    مثال حالت افکت‌دار
    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>
     
    نوشته شده توسط vahidd.com در ‏2 فوریه 2012
    hexmehdi از این پست تشکر کرده است.
  7. Graphessional

    Graphessional Active Member

    ارسال‌ها:
    302
    تشکر شده:
    136
    امتیاز دستاورد:
    43
    از آموزشهاتون ممنونم ولی به IE زبون نفهم هم اشاره کنید که هنوز از radius پشتیبانی نمی کنه.
    به نظرم اگه کسی بخواد دایوش تو همه بروزرها radius داشته باشه، برای گوشه ها از تصویر استفاده کنه بهتره.
     
    نوشته شده توسط Graphessional در ‏10 فوریه 2012
    injaboodam و vahidd.com از این پست تشکر کرده اند.
  8. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    ie9 از خاصیت border-radius پشتیبانی میکنه

     
    نوشته شده توسط vahidd.com در ‏11 فوریه 2012
  9. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    برای سایتهایی که با جدول ساخته شده اند

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

    ************************با سپاس از دوستانی که همکاری کرده اند-*****************************
     
    نوشته شده توسط websaz2012 در ‏11 فوریه 2012
    mazyar_f از این پست تشکر کرده است.
  10. hossein111111

    hossein111111 New Member

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

    39475625833274187308.jpg 63088152230985806115.jpg

    سمت چپ فابرفاکس و سمت راست اکسپلورر
     
    نوشته شده توسط hossein111111 در ‏9 آگوست 2012

به اشتراک بگذارید