פיתוח

בואו נעצב מדהים באלמנטור – פרק ראשון

ברוכים הבאים ל”בואו נעצב מדהים באלמנטור!”


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


בכוונה אנחנו לוקחים עיצובים קיצוניים כדי להתמודד עם תרחישים מורכבים, אבל הי, אנחנו נהנים מזה! 🙂

בואו נעצב מדהים באלמנטור – פרק ראשון Read More »

תוויות מרחפות בטופס אלמנטור

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

תוויות מרחפות בטופס אלמנטור Read More »

בנטו גריד באלמנטור? ועוד דינאמי?! כן כן!

הקוד שהופך קונטיינר לגמיש בגריד: selector{ grid-column: span 1; grid-row: span 2; } הקוד שהופך פריט לולאה לגמיש (שנו את הספרה 1 למספר הפריט): .e-loop-item:nth-of-type(1){ grid-column: span 1; grid-row: span 2; } לא לשכוח לתת לקונטיינר שבפריט לולאה: selector{ height: 100%; }

בנטו גריד באלמנטור? ועוד דינאמי?! כן כן! Read More »

3 טרנדים עיצוביים באלמנטור

קובץ פינה מעוגלת: לחצו להורדת קובץ SVG של פינה מעוגלת לבנה הקוד לטקסט מובלט: t{ padding: 1vw 1vw 0.2vw 1vw; border-radius: 0.2em; margin: 0em -0.1em; display: inline-block; transform: rotate(2deg); background-color: blue; color: white; } אפשר להשתמש בקלאס במקום תגית: פה המילה שתרצו להדגיש  הקוד נשאר זהה רק להוסיף נקודה לפני הקלאס: .t{ padding: 1vw 1vw

3 טרנדים עיצוביים באלמנטור Read More »