عصر دانش

یکی از مشکلاتی که طراحان سایت همیشه با آن دست به گریبان هستند گرد کردن گوشه div ها می باشد که البته ساده ترین آن استفاده از CSS3 می باشد ، اما این روش را فقط مرورگرهای جدید ساپرت می کنند و در مرورگرهایی مانند IE که از CSS3 پشتیبانی نمی کنند این روش جواب نمی دهد. روش دیگری که می توان استفاده کرد روشی است که در این سایت مطرح شده ولی این روش هم یک مشکل دارد و آن هم این است که در آدرس دهی فایل .htc باید از آدرس دهی نسبی استفاده کرد و برای کسانی چون من که قصد دارند قالب وبلاگ خودشان را تغییر دهند و عمل گرد کردن را در وبلاگ انجام بدهند امکان آدرس دهی نسبی وجود ندارد. اما روشی که در این پست معرفی می کنم هیچ کدام از مشکلات مذکور را ندارد و البته با اکثر مرورگرها از جمله IE نیز سازگاری دارد.

برای آگاهی از این روش در ادامه مطلب با ما همراه باشید...

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

<script    type="text/JavaScript"    src=” curvycorners.src.js" >  </script >

بعد از انجام این کار باید تکه کد زیر را به کد صفحه خود در قسمت head اضافه کنید:

<script type="text/JavaScript" >

                curvyCorners.addEvent(window, 'load', initCorners);

                function initCorners() {

                                var settings = {

                                tl: { radius: 10 },

                                tr: { radius: 10 },

                                bl: { radius: 10 },

                                br: { radius: 10 },

                                antiAlias: true

                                }

                curvyCorners(settings, ".myBox");

                }

</script >

حالا هر div ی که می خواهید گوشه های آن را گرد کنید فقط کافی است صفت کلاس آن را برابر myBox قرار دهید. البته می توانید میزان گرد کردن را نیز تغییر دهید. فقط کافیست در قطعه کد بالا اعداد 10 را کم یا زیاد کنید تا میزان گرد شدگی کم و زیاد شود. علاوه بر آن می توانید میزان گرد کردن هرگوشه را یک مقدار متفاوت بگذارید. در کد بالا tl معادل TopLeft (گوشه بالا سمت چپ) ، tr معادل TopRight (گوشه بالا سمت راست) ، bl معادل BottomLeft (گوشه پایین سمت چپ) و br معادل BottomRight (گوشه پایین سمت راست) می باشد. پس با تغییر دادن هرکدام از اعداد میزان گرد شدن گوشه مربوط به آن تغییر خواهد کرد.

البته لازم به ذکر است که نیازی به تعریف کلاس .myBox نیست. البته حتما لازم نیست از این کلاس استفاده کنید و اگر کلاس دیگری را قبلا به div های خود نسبت داده اید می توانید به جای .myBox از آن نام استفاده کنید.

منبع