Curvy Corners – פינות מעוגלות באמצעות Javascript בלבד

פינות מעוגלות בעיצוב יכולות להיות בעיתיות מאוד. כדי ליצור תיבה עם פינות מעוגלות ולהכיל בתוכה תוכן מכל סוג שהוא צריך ליצור טבלה ולהניח בכל ארבעת הפינות image ולהשלים את החסר וכו וכו.., ניתן גם לעשות את זה בעזרת css sliding doors וכו אך תמיד העסק מסובך קל וחומר שמדובר בהרבה תיבות בסגנון הזה. הפיתרון הוא לא לעשות פינות מעוגלות בעיצוב!! , אני באופן אישי לא אוהב אך עכשיו ברצינות:
ניתן להשתמש ב – Javascript Library די חדשה בשם Curvy Corners.

את הספריה עם קבצי דוגמא ניתן להוריד מכאן

השימוש:

1. לאחר ההורדה מומלץ ליצור תיקיית ג’אווה סקריפט , לתת לה שם לדוגמא: js
   ולהכניס לתוכה את שני הקבצים שהורדתם:
   curvycorners.js
   curvycorners.src.js
2. בדף HTML באיזור ה – HEAD יש לקרוא לקבצים עפ”י הנתיב בו הם נמצאים לדוגמא:
   <script type=”text/JavaScript” src=”js/curvycorners.src.js”></script>
   *יש לשנות את הנתיב בהתאם לדף
3. יש ליצור DIV ולתת לו ID לדוגמא: #main
4. כדי להפעיל את הפינות המעוגלות על אותו DIV יש להוסיף את הקוד הבא באיזור ה – head של המסמך:
   <script type=”text/JavaScript”>addEvent(window, ‘load’, initCorners);function initCorners() {
   var settings = {
   tl: { radius: 20 },
   tr: { radius: 20 },
   bl: { radius: 20 },
   br: { radius: 20 },
   antiAlias: true
   }curvyCorners(settings, “#main”);
   }</script>

   הסבר: קודם מכילים את קוטר הרדיוס על כל הפינות: tl=top left , bl = bottom left וכו…
   antiAlias – true – על מנת “להחליק” פינות
   אח”כ מחילים את הפרמטרים על ה – DIV הרצוי – במקרה שלנו #main

   תוצאה:

   

5. שימו לב שניתן גם לשחק עם הרדיוסים וכן ניתן גם ליצור מרובע עם 3 פינות מעוגלות ורק אחת מרובעת על ידי הזנת הערך 0 באחד הפרמטרים (לדוגמא tr radius: 0 ) כמובדוגמא:
6. שימו לב שניתן להוסיף גם border ל – DIV והוא מתעגל בהתאם (ניתן לראות בדמו למטה)

דמו | הורדה