מדריכים - CSS3

12 נושאים 18 פוסטים
  • מדריך | תפריט נגלל אופקי בקוד css

    הועבר
    3
    0 הצבעות
    3 פוסטים
    73 צפיות

    מכיון שאף אחד לא ענה לי 😞 אני יעשה מהלימון למינודה והכנתי לכם מדריך איך ליצור תפריט נגלל ב css, באלמנטור:

    ראשית הוסיפו את אלמנט תפריט הוורדפרס,

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

    אחר כך קבעו את סדר הפריטים כממורכזים.

    תנו קלאס ייעודי בשם: my-nav

    הוסיפו את קוד ה css הבא ב css מותאם:

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

    .my-nav .elementor-nav-menu li .elementor-item { color:#000!important; text-align: center; background-color: #DBB385; border-radius: 15px; } /*Hover Background color*/ .my-nav .elementor-nav-menu li:last-of-type .elementor-item:hover{ background-color:#000; } selector .elementor-nav-menu { display: flex; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .my-nav .elementor-nav-menu li.current-menu-item .elementor-item { color:#DBB385!important; text-align: center; background-color: #000; border: 2px solid #DBB385; } .my-nav .elementor-nav-menu { display: flex; gap: 10px; }

    לפני:
    e13ad831-6291-4e80-8c6a-99d9a5ffc558-image.png

    אחרי:
    c0378a15-4521-4e6e-bd3e-66d9f8b4faa2-image.png

    {זה הנגלל הצידה]

    עם אפשרות גלילה אופקית, ללא תוספים מיותרים!!!

  • CSS | Flexbox

    הועבר
    1
    7 הצבעות
    1 פוסטים
    98 צפיות
    אין תגובות
  • אנימציות מתקדמות | CSS

    הועבר
    1
    10 הצבעות
    1 פוסטים
    197 צפיות
    אין תגובות
  • אנימציות בסיסיות | CSS

    הועבר
    2
    13 הצבעות
    2 פוסטים
    125 צפיות

    @מוטי-אורן
    מדריך ברור ומושקע

  • מיקום אלמנטים | CSS

    הועבר
    1
    7 הצבעות
    1 פוסטים
    134 צפיות
    אין תגובות
  • רקעים | CSS

    הועבר
    1
    10 הצבעות
    1 פוסטים
    209 צפיות
    אין תגובות
  • עיצוב פונטים | CSS

    הועבר
    1
    8 הצבעות
    1 פוסטים
    93 צפיות
    אין תגובות
  • עיצוב טקסטים | CSS

    הועבר
    3
    10 הצבעות
    3 פוסטים
    137 צפיות

    @ליבל תגדיר לו ב - style, שיהיה block, וה - margin right ו left יהיו auto. מצרף דוגמה:

    video { display: block; margin-left: auto; margin-right: auto; }

    נ.ב. אפשר פשוט לשים את margin ימין ושמאל בתכונה אחת כך:

    margin: auto;

    הבעיה שזה יגדיר לך גם את ה top ו bottom, האמת לא אמור להיות בעיה כל שהיא.

    נ.ב. יש עוד דרכים אבל זאת אמורה לעבוד... אם לא עובד תעדכן כאן.

  • מודל הקופסה | CSS

    הועבר
    3
    22 הצבעות
    3 פוסטים
    208 צפיות

    @זלמן תודה רבה! ננסה להאריך במדריכים הבאים...😜

  • סלקטורים נוספים | CSS

    הועבר
    1
    8 הצבעות
    1 פוסטים
    78 צפיות
    אין תגובות
  • אפשרויות כתיבה | CSS

    הועבר
    1
    10 הצבעות
    1 פוסטים
    60 צפיות
    אין תגובות
  • סלקטורים | שפת CSS

    הועבר
    1
    11 הצבעות
    1 פוסטים
    105 צפיות
    אין תגובות