תודה על המדריכים המעולים!ושוב אני כאן...
והפעם -
אלמנט סטיקי
אלמנט סטיקי הינו אלמנט שבחלק מהזמן נגלל רגיל עם העמוד, ובחלק אחר נעוץ לחלון של הדפדפן. הוא משלב בין position: absolute לבין position: fixed. (ולא - לעולם אל תגדירו לו relative כברירת מחדל!!)
מתי עושים שימוש באלמנט סטיקי?
בתפריטים שבמצב הראשוני אינם צמודים לחלק העליון של המסך, ובגלילה הם נצמדים ונשארים שם; ברכיבים צידיים, כמו קישור לצור קשר, כפתורי שיתוף או קישורים לרשתות חברתיות ועוד. בחלק מהמקרים אלו כפתורים נעוצים – fixed, אך בחלק אחר מהמקרים, למשל כשיש באנר גבוה שמעליו לא רוצים שהכפתור יופיע, אלא רק אחרי הבאנר – משתמש באפשרות הסטיקית.
איך יוצרים אלמנט סטיקי
מבחינת html כותבים את האלמנט במקום שבו הוא מופיע כשהוא אינו נעוץ. ונותנים לו את ההגדרה position: absolute. חובה לתת absolute דווקא, ולא להשאיר סטטי או רלטיבי – מאחר וברגע שנהפוך את הposition של האלמנט לfixed – האלמנטים האחרים בעמוד לא יכירו בקיומו, ובמידה וההגדרה המקורית לא תהיה אבסולוטית – האלמנטים שאחריו יקפצו למעלה. לכן במצב הראשוני יש לתת position: absolute.
בנוסף, נוסיף בCSS, סלקטור של האלמנט הזה + קלאס נוסף, למשל הקלאס fixed. ועל הסלקטור הזה ניתן את ההגדרות של position fixed, + הגדרות המיקום כמו top: 0px על מנת להעמיד אותו בצמוד לחלק העליון של המסך בגלילה.
כעת הגענו לשלב הסקריפט. בשלב זה ללכוד גלילה של העמוד, ובאירוע הזה נבדוק כמה גללו, בהשוואה לנקודה שבה רוצים לנעוץ את האלמנט. נניח לדוגמה תפריט שמונח אחרי קומה של לוגו ומס' קישורים, וברגע שהתפריט במהלך הגלילה הגיע ללמעלה של החלון – הוא צריך להדבק לשם ולא להמשיך להגלל מעלה, אלא שיהיה זמין לאורך כל העמוד שלנו. אנחנו צריכים לדעת מה הנקודה שבה ממוקם התפריט, ואת הערך הזה נשמור למשתנה מחוץ לאירוע הגלילה, כדי לחסוך לסקריפט שלנו לבדוק את המיקום בכל רגע של גלילה מחדש.
קוד:Var menuTop = jQuery(‘#menu’).offset().top
כעת נלכוד את אירוע הגלילה
השורה הראשונה לוכדת את אירוע הגלילה.קוד:jQuery(window).scroll(function(){ if(jQuery(window).scrollTop() > menuTop) jQuery('#menu').addClass('fixed'); else jQuery('#menu').removeClass(''fixed'); });
השורה השניה משווה את המשתנה שלנו – menuTop מול מס' הפיקסלים שכבר נגללו – jQuery(window).scrollTop(). במידה ועברנו את אותה נקודה – נוסיף את הקלאס שהגדרנו בCSS, כדי שהתפריט יקבל את ההגדרות של position: fixed, וכל שאר הגדרות המיקום (top, left וכו'), ובמידה ולא עברנו את הנקודה – נסיר את הקלאס הזה.
אין שום בעיה לכתוב addClass כשכבר הקלאס קיים. הוא לא יתווסף פעם נוספת לאלמנט. כנ"ל לגבי removeClass – במידה והקלאס לא קיים – פשוט לא יקרה כלום.
הערה,
בדוגמה שלנו, הנקודה שהתפריט ננעץ בה היא הנקודה שהוא נוגע בחלון, לכן אנחנו משווים את הנקודה הזו עם מס' הפיקסלים שנגללו. במידה ונרצה שהוא יינעץ בנקודה אחרת, למשל תפריט צידי, שננעץ 10 פיקסלים מלמעלה, למשתנה menuTop נוסיף עשרה פיקסלים (jQueyr(‘#menu’).offset().top + 10), וכן הלאה. העיקר שבמשתנה שמשווים מולו יהיה כבר את המספר הסופי שמולו רוצים להשוות.
אשמח למשוב מכם. מובן? לא ברור לגמרי? רוצים לשתף באלמנטים דומים שבניתם בעצמכם?
פורסם בבלוג שלי:
https://hanniessite.wordpress.com/2017/03/02/אלמנט-סטיקי/
left: 0;
right: 0;
top: 0;
אולי זה מוגזם מידי..ערב טוב,
חברה, תשאירו תגובות בבקשה. תגובות שלכם = הדלק שלי להמשיך לכתוב
הפעם נדבר על אחד הדברים האהובים עלי ביותר בCSS:
before & after
בCSS ישנם מס' אלמנטים פיקטיביים, שבעצם לא באמת קיימים, הם אינם חלק מהHTML, אך בCSS ניתן לתפוס אותם ולתת להם הגדרות סטייל שונות. בפוסט הזה נדבר על שתי האלמנטים before, after.
האם כל אלמנט HTMLי יכול לקבל before/after?
התשובה היא לא. כל אלמנט של HTML שכולל תגית פתיחה ותגית סגירה – מסוגל לקבל before וafter. לדוגמא: div, a, button, p, header, form וכו'.
אלמנטים שכוללים תגית אחת בלבד – שבסופה בד"כ מגיע סלאש הסגירה – לא מסוגלים לקבל before או after. לדוגמא: input, img, br.
שימו לב, תגית select - תגית של בחירה מרשימה בטפסים, למרות שיש לה תגית פותחת וסוגרת - לא מקבלת את האלמנטים הפיקטיביים before&after. לפחות בחלק מהדפדפנים ואולי בכולם. לא בדקתי (אני תמיד צריכה להתאים את האתר לכל סוגי הדפדפנים, כולל IE11 המקולל, אז מה שלא נתמך באחד מהם - יוצר לי בעיות ועדיף להמנע מלהשתמש בו...)
לאיזה צורך משמשים האלמנטים הפיקטיביים?
וואוו, להמון שימושים! כמעט כל תוספת עיצובית שדורשת אלמנט ריק נוסף בתוך אלמנט "אב" – תוכל להתממש באמצעות before, after או שניהם. לדוגמא: אייקון של חץ בסוף טקסט קישור, משולש קטן ליד קישורים, רקע אלכסוני מתחת לדיב עם תוכן שעומד ישר ועוד.
עוד קצת מידע…
האלמנט before יתווסף לנו בתחילת אלמנט האב, לפני כל התוכן שלו, והאלמנט after יתווסף לסוף האלמנט האב, אחרי כל התוכן שלו. יש לזכור ששתיהם נוספים לתוך האלמנט האב שלהם שעליו הם מוגדרים, ולא כמו שנשמע מהשם שלהם – לפניו או אחריו, אלא לפני או אחרי התוכן שבתוך האלמנט האב.
מאחר ומדובר באלמנטים פיקטיביים, שלא באמת קיימים בHTML, נכון לעכשיו סקריפטים אינם מסוגלים לשלוט עליהם. כלומר, לא ניתן לכתוב משהו כמו jQuery('button:after').click(), כי הafter לא מוכר לJS.
לbefore/after חייב להיות מאפיין CSS שנקרא content. תכף נדבר מה האפשרויות הקיימות, רק חשוב לציין שבלי המאפיין הזה – לא נוכל לראות את האלמנט הפיקטיבי שלנו בכלי הפיתוח שבדפדפן, לערוך אותו וכו'. הוא פשוט לא יהיה קיים ורק המאפיין של content נותן לו חיים. המאפיין content מכיל את התוכן של הbefore/after, אם זה טקסט או תמונה. למשל אם נצהיר משהו כמו content: 'hello' – הbefore שלנו יכיל את הטקסט הזה. כמה שאני יודעת – קוראי מסך לא מסוגלים לקרוא את זה, כי זה לא טקסט אמיתי של HTML, אלא כמו כל האלמנט – זה פיקטיבי. בנוסף לא ניתן לתפוס את זה עם העכבר, וכו'.
סוגי הcontent האפשריים:
בהצלחה רבה!
- ריק – '' (זה נראה מרכאות, אבל זה שני תווי גרש). משמש כשאנחנו צריכים רק להשתמש בbefore/after לצורך עיצובי כלשהו, בלי להכניס להם תוכן.
- טקסט – יכול להיות מילה ממש, ויכול להיות רק תו כלשהו שמסמל אייקון בפונט של אייקונים כמו font awesome או glyphicons. לדוגמא "\f024". במקרה הזה נצטרך כמובן להוסיף לbefore או הafter שלנו מאפיינים נוספים כמו font-family וכו'.
- attr(attribute) – ניתן לשתול לתוך הbefore טקסט שקיים כattribute של האלמנט האב שלו. למשל לשתול שם את הID של האב, וכדו'. יצא לי לראות שימוש נחמד לזה בלינקים, שהיו חייבים להיות נגישים, ומצד שני רצו שהtooltip שמופיע מעל הקישור כשעומדים עליו יהיה מעוצב ויפה. לכן במקום להגדיר title לקישור (לצורך נגישות, שקורא המסך יוכל לקרוא מה השם של הלינק), שגם יוצר טולטיפ אפור מעל הקישור במעכבר עכבר – הגדירו aria-label – שזו הגדרה שרק קורא המסך מכיר, בדיוק כמו title, אבל בלי טולטיפ, וכדי להוסיף את הטופלטיפ המעוצב, לאנשים שמסוגלים לצפות באתר – הוסיפו before עם content: attr(aria-label); בתוספת רקע חביב וכו'.
- counter – ארחיב עליו בפוסט נפרד בעז"ה מתישהו. באופן כללי – מדובר באפשרות לייצר מונה, אם בספרות או באותיות, שמאתחלים פעם אחת ומקדמים כל הזמן. והכל בCSS בלבד. את התוכן של המונה – הספרה או האות הנוכחית – יש להכניס לbefore או after כדי להציג אותו. אפשר לראות דוגמה שבה ממשתי את זה בעבר באתר של אלקטרה, אם תפתחו את האקורדיונים כאן: http://www.electra-trade.co.il/service/questions-and-answers/ המספור שם הוא לא מספור אוטומטי, כי רצו צבע שונה. הגדרנו את זה עם before שמכיל counter.
- url(url) – ניתן להכניס לbefore/after מדיה כמו תמונה, אודיו, וידאו וכדו. כותבים url ואז בסוגריים את הURL של אותה מדיה. יש לשים לב שבמידה ומכניסים שם תמונה – לא ניתן להגדיר לה גודל, אלא היא מוצגת בגודל המקורי שלה בלבד. (אם מצאתם דרך לעשות את זה – אשמח מאד להתעדכן.) באופן אישי אני לא משתגעת על האפשרות הזו, בגלל המגבלות האמורות, אבל שתדעו שגם זו אפשרות שקיימת.
- יש אפשרות, השימוש שלה נדיר יותר, להוסיף סימני ציטוט, או לבטל אם כבר קיים. במידה ותצטרכו להשתמש בזה – תוכלו למצא מידע רב ברשת
אשמח אם תוכלו לעדכן אותי כאן בתגובות, אם ישנה אפשרות לשלב אייפריים של codepen כאן, כי יש לי כמה מדריכים שמוכרחים את codepen, בשביל דוגמאות הקוד החיות.
.your-selector:before{
content: '';
display: block;
height: 40px;
width: 40px;
background: red;
}
דבר ראשון, תודה רבה!!למה הכוונה "איך מנסחים"?
הקוד אמור להיות משהו כזה (זו דוגמה לbefore שנראה כמו קוביה אדומה בגודל של 40*40 פיקסל.
CSS:.your-selector:before{ content: ''; display: block; height: 40px; width: 40px; background: red; }
את יכולה לראות בפוסט שכתבתי אילו content אפשריים. הנפוץ ביותר זה להשאיר ריק, ואז לתת לזה עיצוב, או להשתמש בbefore/after עבור אייקון שהוא פונט.
כן. אני מתכוונת לזה.את מדברת על שתי הקווים שמחליפים צד (הימני זז לשמאל והשמאל זז לימין) ונצבעים באדום?
לא צריך בשביל זה דווקא before + after אם כי זה אפשרי. פשוט יחסוך לך שימוש באלמנטים נוספים של HTML.
אני לא יודעת עם איזה כלים את עובדת, אבל זה אפשרי בCSS פשוט לחלוטין.
ספציפית הם עשו את זה עם SVG, אבל אפשר עם HTML רגיל גם כן.
אם תרצי - אכתוב לך את הCSS הנדרש שם
selector .elementor-button-text:before, selector .elementor-button-text:after{
content: '';
display: block;
width: 30px; // רוחב הקווים. אפשר להגדיל/להקטין
height: 3px; // גובה הקווים
border-radius: 5px;
background: #000; // הצבע של הקווים לפני מעבר עכבר
position: absolute;
left: 0;
transition: all .25s;
}
selector .elementor-button-text:before{
margin-top: 2px; // מוריד טיפה את הקו העליון. אפשר לשחק עם זה אם צריך
}
selector .elementor-button-text:after{
transform: translateX(10px);
margin-top: -5px; // מעלה טיפה את הקו התחתון. גם עם זה אפשר לשחק אם צריך
}
selector a:hover .elementor-button-text:after,
selector a:hover .elementor-button-text:before{
background: red; // הצבע של הקווים במעבר עכבר. תחליפי לצבע שלך
}
selector a:hover .elementor-button-text:after{
transform: none;
}
selector a:hover .elementor-button-text:before{
transform: translateX(10px);
}
אמרתי שאני אעדכן..הכנתי.
הכפתור הזה צריך להיות כפתור רגיל. בלי רקע. צריך להוסיף לו שוליים פנימיים, מצד שמאל לתת בערך 30-40 פיקסלים. תלוי כמה ארוכים צריכים להיות הקווים.
את העיצוב של הטקסט עצמו - תעצבי דרך הכלים הרגילים של האלמנטור.
עכשיו הקווים. צריך להוסיף בcustom css (נמצא בטאב advanced בעריכה של הכפתור) את קוד הCSS הבא:
CSS:selector .elementor-button-text:before, selector .elementor-button-text:after{ content: ''; display: block; width: 30px; // רוחב הקווים. אפשר להגדיל/להקטין height: 3px; // גובה הקווים border-radius: 5px; background: #000; // הצבע של הקווים לפני מעבר עכבר position: absolute; left: 0; transition: all .25s; } selector .elementor-button-text:before{ margin-top: 2px; // מוריד טיפה את הקו העליון. אפשר לשחק עם זה אם צריך } selector .elementor-button-text:after{ transform: translateX(10px); margin-top: -5px; // מעלה טיפה את הקו התחתון. גם עם זה אפשר לשחק אם צריך } selector a:hover .elementor-button-text:after, selector a:hover .elementor-button-text:before{ background: red; // הצבע של הקווים במעבר עכבר. תחליפי לצבע שלך } selector a:hover .elementor-button-text:after{ transform: none; } selector a:hover .elementor-button-text:before{ transform: translateX(10px); }
זו התוצאה אצלי:
צפה בקובץ המצורף 1028743
ובמעבר עכבר:
צפה בקובץ המצורף 1028744
התזוזה של הכפתורים היא באנימציה כמו באתר שקישרת לדוגמה.
בהצלחה! תעדכני איך הלך לך.
לוח לימודים
מסלולי לימוד שאפשר לההצטרף
אליהם ממש עכשיו:
8.05
ל' ניסן
פתיחת מסלול
אוטומציות עסקיות, בוטים והטמעת מערכות מידע
מלגות גבוהות!
9.05
א' אייר
הנחת ענק!
ירושלמי?
יש לנו מלגה מטורפת עבורך! קורס במימון כמעט מלא!!
ההרשמה בעיצומה
28.05
כ' אייר
פתיחת מסלול מורחב:
פיתוח ובניית אתרים
מלגות גבוהות!
2.06
כ"ה אייר
פתיחת מסלול
קורס עריכת וידאו
מלגות והנחות משמעותיות!
24.06
י"ח סיוון
פתיחת מסלול
מאסטר בשיווק דיגיטלי
מלגות גבוהות!
27.06
כ"א סיוון
פתיחת מסלול
עיצוב ואדריכלות פנים
מלגות גבוהות!
27.06
כ"א סיוון
השקה חגיגית!
עיצוב גרפי ודיגיטל - בסילבוס חדש ומטורף!
מלגות גבוהות!
21.05
י"ג אייר
#רקבפרוג
הרצאה מרתקת:
דיגיטל בגובה העיניים
עם מנדי נאבול
כל האפשרויות הטמונות בעולם הדיגיטל שיגרמו לך להרוויח יותר!
לתלמידים ובוגרים בלבד!
תהילים פרק קלז
א עַל נַהֲרוֹת בָּבֶל שָׁם יָשַׁבְנוּ גַּם בָּכִינוּ בְּזָכְרֵנוּ אֶת צִיּוֹן:ב עַל עֲרָבִים בְּתוֹכָהּ תָּלִינוּ כִּנֹּרוֹתֵינוּ:ג כִּי שָׁם שְׁאֵלוּנוּ שׁוֹבֵינוּ דִּבְרֵי שִׁיר וְתוֹלָלֵינוּ שִׂמְחָה שִׁירוּ לָנוּ מִשִּׁיר צִיּוֹן:ד אֵיךְ נָשִׁיר אֶת שִׁיר יְהוָה עַל אַדְמַת נֵכָר:ה אִם אֶשְׁכָּחֵךְ יְרוּשָׁלִָם תִּשְׁכַּח יְמִינִי:ו תִּדְבַּק לְשׁוֹנִי לְחִכִּי אִם לֹא אֶזְכְּרֵכִי אִם לֹא אַעֲלֶה אֶת יְרוּשָׁלִַם עַל רֹאשׁ שִׂמְחָתִי:ז זְכֹר יְהוָה לִבְנֵי אֱדוֹם אֵת יוֹם יְרוּשָׁלִָם הָאֹמְרִים עָרוּ עָרוּ עַד הַיְסוֹד בָּהּ:ח בַּת בָּבֶל הַשְּׁדוּדָה אַשְׁרֵי שֶׁיְשַׁלֶּם לָךְ אֶת גְּמוּלֵךְ שֶׁגָּמַלְתְּ לָנוּ:ט אַשְׁרֵי שֶׁיֹּאחֵז וְנִפֵּץ אֶת עֹלָלַיִךְ אֶל הַסָּלַע: