אני שמח לראות שחזרתם גם לחלק השלישי (למרות החפירות הקודמות), כאן אנחנו נראה איך הדברים משתלבים ביחד.
פופאפ –
כמעט שאין אתרים ללא פופאפים, זה יכול להיות פירסומת, הודעה לגולש, שאלה, בקשה לאישור או כל דבר שאנחנו רוצים למשוך את הצומת לב אליו.
איך בונים אותו?
<div>THIS IS TEXT ON THE BODY</div> <div class="popup-wrapper active"> <div class="massage-wrapper"> <h2>HI, I AM POPUP TITLE</h2> <p>this is the popup massage info to the user</p> </div> </div>
.popup-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); display: none; } .popup-wrapper.active { display: block; } .popup-wrapper .massage-wrapper { width: 100%; max-width: 300px; background-color: snow; padding: 10px; box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translatey(-50%); }
זו דוגמה לפופאפ מאוד בסיסי שכולל וילון להשחרת הדף ובכך להבליט את הפופאפ , מרכוז הפופאפ יחסית לדף ובמידה שהרוחב של הדף ירד מהמקסימום רוחב שהגדרנו לפופאפ אז הוא ידע לשנות את הגודל שלו בהתאם.
למה אנחנו צריכים את השורה הזאת: transform: translateX(-50%) translatey(-50%); ?
הסיבה היא- כאשר אנחנו רושמים TOP 50% ו- LEFT 50% , הפינה השמאלית למעלה של הפופאפ תהיה בדיוק במרכז, אנחנו רוצים שהמרכז כל הפופאפ יהיה במרכז הדף.
לכן אנחנו אומרים לו לזוז חצי מהגודל שלו למעלה ושמאלה, כך הוא מתייצב בדיוק באמצע.
טולטיפ עם חץ –
אפשר ליצר טולטיפ עם חץ בהרבה צורות, אראה את אחת הצורות כאן
<div> <p> let's see how to make tooltip helper <i class="tooltip-wrapper active">i <span class="tooltip">hi, i am a tooltip</span></i> </p> </div>
.tooltip-wrapper { border: 1px solid silver; font-size: 16px; border-radius: 50%; position: relative; font-weight: bold; padding: 0 7px; } .tooltip-wrapper.active::after { content: ''; border-top: 0 solid transparent; border-bottom: 12px solid skyblue; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; top: 100%; left: 0; } .tooltip-wrapper .tooltip { display: none; } .tooltip-wrapper.active .tooltip { display: block; position: absolute; background-color: skyblue; top: calc(100% + 12px); left: -50%; padding: 6px; width: 150px; border-radius: 4px; box-shadow: 1px 1px 3px 0 #000; }
מעבר צבעים (CSS colors Gradients) –
ההגדרות:
background/background-image
עבור לינארי – linear-gradient
ובתוך הסוגריים הערך הראשון נותן את הכיוון (לא חייבים) ולאחר מכן את הצבעים כאשר כולם מופרדים בפסיקים (אפשר כמה צבעים שאתם רוצים). ליד כל צבע אפשר להוסיף אחוזים שאומרים כמה מתוך סך השטח שיש יהיה בצבע מלא ורק לאחר מכן יתחיל מעבר הדרגתי של הצבעים
.gradient-colors { background: linear-gradient(rgb(38, 0, 255), rgb(0, 217, 255)); /* up */ } .gradient-colors { background-image: linear-gradient(to right, rgb(38, 0, 255), rgb(0, 217, 255)); /* right */ } .gradient-colors { background: linear-gradient(to left, rgb(38, 0, 255), rgb(0, 217, 255)); /* left */ } .gradient-colors { background-image: linear-gradient(to bottom, rgb(38, 0, 255), rgb(0, 217, 255)); /* bottom */ } .gradient-colors { background-image: linear-gradient(to bottom right, rgb(38, 0, 255), rgb(0, 217, 255)); /* bottom and right*/ } .gradient-colors { background-image: linear-gradient(120deg, rgb(38, 0, 255), rgb(0, 217, 255)); /* 120 deg */ } .gradient-colors { background: linear-gradient(120deg, rgb(38, 0, 255) 50%, rgb(0, 217, 255) 50%); /* 50% full color */ }
עבור מעגלי – radial-gradient
בתוך הסוגריים הערך הראשון מציין את הצורה, אם לא מציינים ערך , אז ברירת המחדל היא אליפסה. אחרי זה הצבעים מופרדים בפסיקים וגם כאן אפשר להגדיר אחוזים.
.gradient-colors { background-image: radial-gradient(rgb(30, 255, 0) 10%, blue 30%, orange 20%); } .gradient-colors { background-image: radial-gradient(circle, red, yellow, green); } .gradient-colors { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, green); } .gradient-colors { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, green); } .gradient-colors { background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, green); } .gradient-colors { background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, green); } .gradient-colors { background-image: repeating-radial-gradient(circle, red 5%, yellow 15%, green 25%); }
תפריט –
איך עושים תפריט שנפתח כאשר העכבר מרחף מעל?
שימו לב שהוספתי כפתור בתפריט, כרגע אין לו ממש שימוש, הוא הכנה לנגישות. כאשר תוסיפו JS, לחיצה על הכפתור תפתח את התפריט ולחיצה נוספת תסגור אותה.
<div class="header"> <nav> <button class="menu">Menu</button> <ul class="options"> <li><a href="#">option 1</a></li> <li><a href="#">option 2</a></li> <li><a href="#">option 3</a></li> <li><a href="#">option 4</a></li> <li><a href="#">option 5</a></li> </ul> </nav> </div>
.header { position: sticky; top: 0; left: 0; right: 0; background-color: rgb(104, 192, 142); padding: 10px; } .header nav { position: relative; display: inline-block; } .header nav .menu { background-color: lightsalmon; border: none; padding: 4px 8px; font-size: 20px; border-radius: 4px; } .header nav .options { display: none; position: absolute; } .header nav:hover .options { display: block; margin: 0; list-style-type: none; background-color: skyblue; border-radius: 4px; padding: 0; overflow: hidden; box-shadow: 1px 1px 3px 0 #000; } .header nav:hover .options a { text-decoration: none; padding: 4px 8px; font-size: 18px; color: black; display: inline-block; width: 100px; } .header nav .options a:hover { background-color: cadetblue; }
יש כמובן עוד צורות לממש את זה, אבל זו הצורה הפשוטה ביותר וקלה להבנה.
אם יש עוד דברים שתרצו לדעת איך לעשות אשמח שתצרו איתי קשר ואני אוסיף אותם לפוסט הזה ☺