کانال تلگرام فال و طالع بینی

در تمام بخش ها مدیر فعال ( با سابقه فعالیت در انجمن های دیگر ) می پذیریم ، با ما تماس بگیرید. انجمن پیچک

نمایش نتایج: از شماره 1 تا 2 , از مجموع 2

موضوع: آموزش گرد کردن گوشه ها بدون استفاده از css

  1. #1
    کاربر سایت

    آخرین بازدید
    یکشنبه ۱۵ تیر ۹۳ [ ۰۹:۲۳]
    نوشته ها
    18
    امتیاز
    272
    سطح
    1
    Points: 272, Level: 1
    Level completed: 99%, Points required for next Level: 0
    Overall activity: 1.0%
    دستاوردها:
    Created Blog entryTagger First Class31 days registered250 Experience Points
    نوشته های وبلاگ
    2
    سپاس ها
    0
    سپاس شده 4 در 4 پست

    Icon2007 آموزش گرد کردن گوشه ها بدون استفاده از css

    یکی از دغدغه های اصلی طراحان وب نمایش صحیح سایت در تمامی مرورگرها می باشد که اصطلاحا میگن سایت باید حالت Cross Browser داشته باشه.
    سایتهای زیادی هم برای تست نمایش سایت در مرورگرهای مختلف وجود داره که بعد از طراحی میتونید از اون ها استفاده کنید.

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

    معمولا طراحان از دستور border-radius در css برای گرد کردن گوشه های استفاده میکنند.

    حالت کلی به صورت زیر می باشد:


    کد:

    border-radius ==> تمام گوشه هاي جدول border-top-right-radius ==> گوشه بالا راست border-top-left-radius ==> گوشه بالا چپ border-bottom-right-radius ==> گوشه پايين راست border-bottom-left-radius ==> گوشه پایین چپ
    در css3 مرورگرها کدهای خاص خودشون رو دارند

    مثلا برای موزیلا میتونید از دستور زیر استفاده کنید:


    کد:

    -moz-border-radius
    در گوگل کروم و سافاری هم میتونید از دستور زیر استفاده کنید:


    کد:

    -webkit-border-radius
    مرورگر اپرا هم به نیاز به این پیشوند ها ندارد و border-radius را شناسایی میکند.
    البته توجه داشته باشید این پیشوند ها رو هم نذارید تمامی مرورگرها اونهارو شناسایی میکنند به جر IE ورژن 9 به پایین.

    مثلا برای گرد کردن تمامی گوشه های باکس به صورت زیر عمل میکنیم.


    کد:

    border-radius: 5px;
    با استفاده از این کد تمامی گوشه ها به اندازه 5 پیکسل گرد می شوند.

    خوب حالا بریم سراغ روشی که مرورگر IE هم اونو ساپورت کنه.

    برای استفاده از این روش شما میتونید از کد jquery corner استفاده کنید و از لینک زیر قابل دریافت می باشد.

    [برای مشاهده لینک ها شما باید عضو سایت باشید | عضویت]

    روش استفاده از کد هم در خود سایت به صورت تصویری و به طور کامل توضیح داده شده است.

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

    به جز روشی که توضیح داده شد با استفاده از margin هم میتونید گوشه های گرد ایجاد کنید که در تمامی مرورگرها درست دیده بشه اما نیاز به کدها و کم و زیاد کردن اندازه margin می باشد که خیلی جالب نیست.
    همچنین میتوانید از عکس هم برای گرد کردن گوشه ها استفاده کنید.
    بهترین روش برای گرد کردن استفاده از jquery corner می باشد که در سریعترین زمان ممکن با کمترین خط کد میتوانید گوشه هایی گرد یا غیر گرد با حالتهای مختلف داشته باشید.

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



    منبع : [برای مشاهده لینک ها شما باید عضو سایت باشید | عضویت]

  2. کاربر روبرو از پست مفید partiaweb سپاس کرده است .

    webcade (دوشنبه ۲۹ اردیبهشت ۹۳)

  3. #2
    کاربر سایت

    آخرین بازدید
    دوشنبه ۲۹ اردیبهشت ۹۳ [ ۱۴:۰۳]
    نوشته ها
    2
    امتیاز
    18
    سطح
    1
    Points: 18, Level: 1
    Level completed: 99%, Points required for next Level: 0
    Overall activity: 3.0%
    سپاس ها
    1
    سپاس شده 2 در 1 پست
    مرسی از شما . مطلب مفیدی بود

    [برای مشاهده لینک ها شما باید عضو سایت باشید | عضویت]

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •