گوشه هاي گرد با css براي يك cms

نوشته شده توسط حسین

يكي از راههاي ساده براي ايجاد گوشه هاي گرد استفاده از دستوري كه متعلق به css3 است كه مشخص است كه با مرورگرهاي قديمي مثل ie سازگاري نداره . البته اين دستور فعلاً فقط با firefox جواب ميده و با ديگر مرورگرها ساپورت نميشه . به هر حال دستور به اين صورت است :

;moz-border-radius: 10px-

البته به جاي عدد 10 ميتونيد هر عدد ديگري وارد كنيد كه نشون دهنده ميزان گرد بون گوشه است . اما هون طور كه گفتم اين روش فقط با firefox جواب ميده پس چاره چيه؟

خوب يك روش ديگه اي كه وجود داره و خيلي معروفه استفاده از عكسهايي با گوشه هاي گرد و هماهنگ با رنگ قالب براي گرد كردن گوشه هاست . شما ميتونيد رنگ و درجه و تنظيمات مورد نظر خودتون رو تو سايت roundedcornr.com انجام بديد و تصوير گوشه ها رو دريافت كنيد و توي كد css خودتون استفاده كنيد . اگر از cms استفاده ميكنيد به كدهايي كه سايت ميده كاري نداشته باشيد .

به مثالي كه از يك قالب جوملا گذاشتم دقت كنيد تا توضيح بدم.

كد را در اينجا ببينيد.

خوب اولي كه div نداره براي عكس top - left استفاده ميشه بعدي يك div به ته ماژولهاي مورد نظرمون اضافه ميشه . به ترتيب در هر مرحله يك div اضافه ميشه . در مرحله آخر كه 4 تا div داريم ديگه نبايد تصويري وجود داشته باشد اما وجود آن براي تنظيم گوشه آخر ضروري است .

يكي ديگر از كارهاي مهم تنظيم كردن گوشه ها به صورت درصدي ابتدا از left و سپس از top است.

يه كار مهم هنوز باقي مونده و اون هم اينه كه به عنوان نمونه اگر از يك cms مربوط به php استفاده ميكنيد فايل index.php رو باز كنيد و در قسمت مورد نيازتون براي گرد شدن مثلاً يك منو ، style رو برابر rounded قرار بديد . مثل كد زير :

<jdoc:include type="modules" name="right" style="rounded" />

نظر

افزودن جدید