לוגו האתר
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Users
    • Groups

    23c4eb44-2a95-4f93-be69-843c8d729b1f-image.png

    מדריך בסיסי | CSS - חלק ד' | רקעים עם מעבר צבע.

    מדריכים
    1
    2
    62
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Men770
      Men770 מנהל ראשי מנהל תכנות last edited by

      ב"ה.


      #guide(רקעים עם מעבר צבע.)

      היום אסביר על רקעים של מעבר צבע.

      יש שלושה סוגים של מעבר צבע:

      לינארי (linear-gradient)

      מעבר של קו ישר.
      ככה זה נראה:
      7a790905-372f-4f52-a1af-af5588882f2e-image.png

      רדיאלי (radial-gradient)

      מעבר של עיגול.
      ככה זה נראה:
      456d8ba6-555d-4f82-ab85-cdc5d421a891-image.png

      חָרוּטִי (conic-gradient)

      מעבר בצורת חרוט.
      אפשר לעשות איתו המון דברים, ארחיב עליו בל"נ בהמשך.
      ככה זה נראה:
      aa4d4a6e-79e5-4e4f-adb4-5fc186ebf8a0-image.png


      איך עובדים איתם?
      כדי ליצור מעבר צבע לינארי ורדיאלי, הכי קל להשתמש באתר הזה.

      כדי ליצור מעבר צבע בצורת חרוט, נעשה כך:

      background-image: conic-gradient(from 90deg /*רמת סיבוב, אפשר להוריד*/,
                                      #000000 /*צבע 1*/,
                                      #ffffff /*צבע 2*/
                                      )
      

      אפשר לשים כמה צבעים שרוצים, הם צריכים להיות מופרדים בפסיקים.

      אפשר לראות דוגמא שעשיתי בשביל המדריך כאן.


      בהצלחה!

      |- יחי אדוננו מורנו ורבינו מלך המשיח לעולם ועד! -|

      |-יש לנו ב"ה אתר חדש, מוזמנים להיכנס.-|

      1 Reply Last reply Reply Quote 2
      • Men770
        Men770 מנהל ראשי מנהל תכנות last edited by

        עשיתי כאן דוגמא לאתר שנעשה רק באמצעות מה שלמדנו.
        בעז"ה בפרק הבא אסביר על ה-Box model, ואז האתר שלנו כבר יראה ממש אתר אמיתי…

        |- יחי אדוננו מורנו ורבינו מלך המשיח לעולם ועד! -|

        |-יש לנו ב"ה אתר חדש, מוזמנים להיכנס.-|

        1 Reply Last reply Reply Quote 3
        • First post
          Last post
        חוקי הפורום