טיפים וטריקים בCSS

[ext]

תודה רבה!
נעזרת...

 

[st programmer]

ושוב אני כאן...
והפעם -
אלמנט סטיקי
אלמנט סטיקי הינו אלמנט שבחלק מהזמן נגלל רגיל עם העמוד, ובחלק אחר נעוץ לחלון של הדפדפן. הוא משלב בין 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/אלמנט-סטיקי/

תודה על המדריכים המעולים!

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

 

[חנה 1]

במידה ומדובר בתפריט ראשי עליון, שצריך להיות נעוץ למעלה, צריך לתת לו כך:

left: 0;
right: 0;
top: 0;

ובנוסף כדאי לתת לbody את ההגדרה padding-top כך שהתוכן של העמוד יתחיל רק אחרי סוף התפריט.

כאשר נותנים לאלמנט div את ההגדרה של fixed או absolute - הוא כבר לא מתנהג כמו בלוק מבחינת הרוחב שהוא תופס, ולכן צריך להגדיר לו את זה בCSS.

בהצלחה

 

[st programmer]

תודה רבה!!!
הצלת לי את הtoolbar...

אגב הייתי צריכה גם לתת לו z-index.
שוב תודה, וכמובן אשמח לעוד מאמרים.

 

[חנה 1]

שמחה לשמוע
תוכלי להכנס לאתר שלי לקרוא שם עוד מאמרים על CSS, או את המדריך שכתבתי על jQuery.

עמוד הבית - המקום למפתחי אתרים

cagdash.com

בהצלחה ולילה טוב

 

[TWIN-A]

ערב טוב,
חברה, תשאירו תגובות בבקשה. תגובות שלכם = הדלק שלי להמשיך לכתוב

הפעם נדבר על אחד הדברים האהובים עלי ביותר ב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, בשביל דוגמאות הקוד החיות.

אולי זה מוגזם מידי..
אשמח לדעת איך מנסחים קוד של before after
תודה!!!

 

[חנה 1]

למה הכוונה "איך מנסחים"?
הקוד אמור להיות משהו כזה (זו דוגמה לbefore שנראה כמו קוביה אדומה בגודל של 40*40 פיקסל.

.your-selector:before{
    content: '';
    display: block;
    height: 40px;
    width: 40px;
    background: red;
}

את יכולה לראות בפוסט שכתבתי אילו content אפשריים. הנפוץ ביותר זה להשאיר ריק, ואז לתת לזה עיצוב, או להשתמש בbefore/after עבור אייקון שהוא פונט.

 

[TWIN-A]

למה הכוונה "איך מנסחים"?
הקוד אמור להיות משהו כזה (זו דוגמה לbefore שנראה כמו קוביה אדומה בגודל של 40*40 פיקסל.

.your-selector:before{
    content: '';
    display: block;
    height: 40px;
    width: 40px;
    background: red;
}

את יכולה לראות בפוסט שכתבתי אילו content אפשריים. הנפוץ ביותר זה להשאיר ריק, ואז לתת לזה עיצוב, או להשתמש בbefore/after עבור אייקון שהוא פונט.

דבר ראשון, תודה רבה!!
בעבר שאלתי בפורום איך מייצרים אפקט אובר באיקון תפריט כמו באתר המצ"ב

Haim Benisty – Maximize Your Potential

haimbenisty.com

ואמרו לי שזה אפשרי ע"י כתיבת הקוד הנ"ל..
מה את אומרת?

 

[חנה 1]

את מדברת על שתי הקווים שמחליפים צד (הימני זז לשמאל והשמאל זז לימין) ונצבעים באדום?
לא צריך בשביל זה דווקא before + after אם כי זה אפשרי. פשוט יחסוך לך שימוש באלמנטים נוספים של HTML.
אני לא יודעת עם איזה כלים את עובדת, אבל זה אפשרי בCSS פשוט לחלוטין.
ספציפית הם עשו את זה עם SVG, אבל אפשר עם HTML רגיל גם כן.
אם תרצי - אכתוב לך את הCSS הנדרש שם

 

[TWIN-A]

את מדברת על שתי הקווים שמחליפים צד (הימני זז לשמאל והשמאל זז לימין) ונצבעים באדום?
לא צריך בשביל זה דווקא before + after אם כי זה אפשרי. פשוט יחסוך לך שימוש באלמנטים נוספים של HTML.
אני לא יודעת עם איזה כלים את עובדת, אבל זה אפשרי בCSS פשוט לחלוטין.
ספציפית הם עשו את זה עם SVG, אבל אפשר עם HTML רגיל גם כן.
אם תרצי - אכתוב לך את הCSS הנדרש שם

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

 

[חנה 1]

הכנתי.
הכפתור הזה צריך להיות כפתור רגיל. בלי רקע. צריך להוסיף לו שוליים פנימיים, מצד שמאל לתת בערך 30-40 פיקסלים. תלוי כמה ארוכים צריכים להיות הקווים.
את העיצוב של הטקסט עצמו - תעצבי דרך הכלים הרגילים של האלמנטור.
עכשיו הקווים. צריך להוסיף בcustom css (נמצא בטאב advanced בעריכה של הכפתור) את קוד ה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);
}

זו התוצאה אצלי:

ובמעבר עכבר:

התזוזה של הכפתורים היא באנימציה כמו באתר שקישרת לדוגמה.

בהצלחה! תעדכני איך הלך לך.

 

[TWIN-A]

וווואו ווואוו אני לא מאמינה שהכנת לי את הקוד..!!!!
תודה רבה רבה!!
אני אעדכן אותך - כמובן.

מה המייל שלך?

 

[חנה 1]

-

 

[TWIN-A]

הכנתי.
הכפתור הזה צריך להיות כפתור רגיל. בלי רקע. צריך להוסיף לו שוליים פנימיים, מצד שמאל לתת בערך 30-40 פיקסלים. תלוי כמה ארוכים צריכים להיות הקווים.
את העיצוב של הטקסט עצמו - תעצבי דרך הכלים הרגילים של האלמנטור.
עכשיו הקווים. צריך להוסיף בcustom css (נמצא בטאב advanced בעריכה של הכפתור) את קוד ה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
התזוזה של הכפתורים היא באנימציה כמו באתר שקישרת לדוגמה.

בהצלחה! תעדכני איך הלך לך.

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

 

[bini boo]

איזה אשכול יפהפה,
מדוע את לא מעלה עוד תוכן @חנה 1 ?

 

[חנה 1]

תודה.
זה אשכול די ישן. גם אפשר לראות לפי התאריכים והקישורים ששמתי, שכבר ממש לא מעודכנים (החלפתי דומיין מאז).

כרגע אין לי זמן לשבת על פוסטים נוספים של CSS. יש פוסטים נוספים אצלי באתר - chani-k.co.il, (הוא נראה על הפנים כרגע, אבל כבר יש עיצוב חדש ואני רק צריכה את הזמן לבנות אותו), על CSS וjQuery, כולל מדריך jQuery צעד צעד (מיועד לכאלה עם רקע בJS).

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

אם יש נושא שמעניין את אי מי - מוזמנים לכתוב לי ואשלח על זה ניוזלטר או פוסט חדש באתר.

 

[bini boo]

מעניין אותי נושא הflex וה- grig ומה שביניהם.
לא ראיתי על זה מידע באתר שלך
בנושף, אשמח להרשם לרשימת תפוצה.