אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » פינות עגולות באתרי אינטרנט

פינות עגולות באתרי אינטרנט

רן בר-זיק פברואר 6, 2009 3:37 pm אין תגובות

מפתחי אינטרנט לפעמים צריכים לעצב אלמנטים עם פינות מעוגלות באתר האינטרנט שלהם. במאמר זה יש עצות ודרכים ליצור פינות מעוגלות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.


המאמר לא מעודכן – כיום משתמשים ב-CSS3 כאשר התמיכה באינטרנט אקספלורר 8 ומטה נעשית באמצעות PIE CSS. אנא קראו את המאמר על תכונות CSS3 ששם יש הסבר כיצד לבצע פינות עגולות עם תמיכה באינטרנט אקספלורר מגרסה 8 ומטה (בגרסה 9 ומעלה יש תמיכה אינהרנטית בפינות עגולות). אל תשתמשו בשיטה המוסברת במאמר זה.

אם יש דבר נורא בעיצוב אתרי אינטרנט הוא כל אותן פינות עגולות שצריך להכניס. כאשר אתה מעצב סקיצה בפוטושופ, זה מאד פשוט לייצר פינות עגולות שיתמזגו יפה עם אתר האינטרנט ויקנו לו הילה של אתר אינטרנט מתוחכם ביותר. אך כאשר אתה צריך להפוך את ה-PSD למציאות, הכל מתחיל להסתבך.

הפתרון הקלאסי הוא להשתמש כמובן בתמונות, ואפילו יש כמה אתר שעושה זאת עבורכם (הנה אתר חביב שבו אני לפעמים משתמש, אם שמים לי אקדח ליד הראש). אבל יש כמה חסרונות גדולים לתמונות, חוץ מהעניין העקרוני של ערבוב תוכן עם תמונות, יש לנו גם בעיות שונות של התעסקות רבה עם תמונות, חוסר גמישות עיצובי ופוטנציאל רב לברדק.

כיוון שהשיטה הקלאסית של פינות עגולות זה בהחלט כאב ראש, לפיכך בתקן CSS 3 התייחסו לעניין זה באופן פשוט ואלגנטי. שימו לב למשל ל-Div הבא:

DIV בדיקה נפלא

הקוד נראה כך:


<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >
DIV בדיקה נפלא
</div>

אם יש לכם את שועל האש/כרום אז הכל נראה נפלא. אך אם אתם קוראים את האתר הזה באמצעות אינטרנט אקספלורר או אופרה, div הדוגמא לא נראה כלל עם פינות עגולות. התגית של פינה עגולה נתמך אך ורק על ידי ספארי/כרום ושועל האש אך לא על ידי אינטרנט אקספלורר ואופרה.
וגם אופרה. ישנו פתרון נהדר לאינטרנט אקספלורר בשם PIE שמאפשר פינות עגולות באמצעות CSS גם בדפדפן זה – מומלץ לנסות אותו.

יום יבוא ותהיה תגית CSS כזו שתקל על החיים של כל בוני אתרי האינטרנט. עד אז, למי שלא רוצה להשתמש בפתרון התמונות, יש כמה פתרונות מומלצים יותר ופחות:

פתרונות מבוססי JavaScript

פתרונות אלו מבוססים jQuery או JavaScript, היתרון שלהם הוא שהם פשוטים ליישום ולא פולשניים. החסרון שלהם הוא שמי שאין לו JavaScript לא יראה את הפינות העגולות.

אחד הפתרונות היותר מוכרים הוא Nifty Corners, פתרון JavaScriptי קל ונעים שמשתמש ב-API משלו על מנת לקשר בין האלמנט לקוד שהופך אותו לבעל שוליים עגולים. אך ה-API הזה קל לשימוש. צריך גם לייצר CSS מיוחד לכל אלמנט. מסיבה מסוימת רוב האנשים מסתדרים איתו. למרות שהוא דורש לטעמי שינויים רבים ותוספות לקוד וקשה ליישם אותו במערכות מובנות. קישור והסברים ניתן למצוא באתר הבית של Nifty Corners.

פתרון יותר פשוט הוא Plugin ל-jQuery שנקרא jQuery Corners. הקוד שלו הוא מאד מאד פשוט וגם קל מאד להשתמש בו בלי ההסתבכויות של ה-Nifty corners. מהצד השני ה-API שלו (שמן הסתם זהה לזה של JQuery) יכול להרתיע את מי שלא מורגל.

שימו לב למשל לdiv הבא:


זו דוגמא נהדרת ל-DIV עם פינות עגולות בלי הרבה כאב ראש.

וזה הקוד שמאחורי העיצוב:



<p>  <script src="http://www.google.com/jsapi"></script> 
  <script>google.load("jquery", "1.2.6")</script> 
  <script src="http://www.atblabs.com/jquery.corners.min.js"></script> 
</p>

<div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

כשהמה שמודגש זה בעצם הפניה לכל ה-class עם שם rounded. וזו הזדמנות מצוינת להכנס למאמרים על ה-jQuery Selectors שכתבתי.

אלטרנטיבה CSSית

אם לא מתאימה לכם אופצית ה-JavaScriptjQuery אבל אתם בכל זאת לא רוצים להשתמש בתמונות, ישנם טריקים שאפשר לעשות ב-CSS על מנת להשיג פינות עגולות ללא תמונות. היתרון הוא שאפשר לעשות את זה ללא JavaScript וקודים, אך זה מכוער, אפילו יותר מתמונות לפעמים.

הפתרון מבוסס על הכנסת דגשים קטנים ומדורגים בכל פינה. הוא מכוער גם מבחינת CSS וגם מבחינת קוד אך הוא כמובן יותר גמיש מתמונות. הייתי יכול להכניס מדריך מסובך איך לעשות את זה, אבל בשביל זה יש אתרי אינטרנט שעושים את העבודה בשבילך. זה שאני משתמש בו בדרך כלל הוא http://www.spiffycorners.com.

סיכום

באופן אישי, אני נמנע מפינות עגולות. אבל אם אני חייב (בדרך כלל כאשר אני עושה Layout שאני לא עיצבתי, וזה קורה לא מעט פעמים) אני משתמש בפתרון של jQuery. יום יבוא ואינטרנט אקספלורר יתמוך בפינות עגולות, אבל עד אז עלינו להתאזר בסבלנות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
בניית אתרי אינטרנט מידע למפתחים פתרונות
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד