CSS אתגרי קוד מלהיבים

[roni ravitz]

היי לכולם.

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

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

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

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

ומה איתכם?
טוב, אתם צריכים לנסות לפתור את האתגר.
אם פתרתם, תכתבו כאן, עם ספוילר של התשובה.
אין לי מתנות לחלק (חוץ מלייק אולי אפי' "שכוייח"), אבל אני מבטיח שזה ישפר משמעותית את היכולות שלכם.
(ואם יש לכם רעיונות נוספים להמריץ את הציבור, אל תתביישו )

מה עוד?
רעיונות, פירגונים, נחירות בוז, וכל דבר אחר שאתם רוצים להוציא - בברכה.
אם יש לכם אתגרים משלכם, תעלו.

ותודה רבה ל- @סיון שזרמה עם הרעיון (ואפי' עשתה ת'עצמה מתלהבת).

 

[roni ravitz]

טוב יאלוש לעבודה.

אתגר קוד #1 הגבלת שורות טקסט







הסבר:
1. ווידג'ט פוסטים, אם יש כותרות באורכים שונים, זה יוצר מצב שבחלק מהפוסטים יש יותר שורות (תמונה 1).
2. עם קוד נסדר שבכל הפוסטים יהיה רק 2 שורות, וכל הטקסט שמעבר לזה ייחתך (תמונה 2).
3. נוסיף אפקט נחמד לשורה השלישית (תמונה 3).
4. אגב, אפשר להשתמש בזה גם למוצרים בווקומרס.

טוב, עכשיו אתם (היי, לפחות באתגר הראשון )

 

[סיון]

ותודה רבה ל- @סיון שזרמה עם הרעיון (ואפי' עשתה ת'עצמה מתלהבת).

עדיין עושה את עצמי,
רעיון מבורך ומעשי,
תשתתפו!

בכל מקרה, לגבי זה:

(ואפי' עשתה ת'עצמה מתלהבת).

זה לגמרי מיסאינטרפטציה! (מקווה שאייתתי נכון)

 

[חגית קרמר]

טוב יאלוש לעבודה.

אתגר קוד #1 הגבלת שורות טקסט

צפה בקובץ המצורף 1255943

צפה בקובץ המצורף 1255944

צפה בקובץ המצורף 1255945

הסבר:
1. ווידג'ט פוסטים, אם יש כותרות באורכים שונים, זה יוצר מצב שבחלק מהפוסטים יש יותר שורות (תמונה 1).
2. עם קוד נסדר שבכל הפוסטים יהיה רק 2 שורות, וכל הטקסט שמעבר לזה ייחתך (תמונה 2).
3. נוסיף אפקט נחמד לשורה השלישית (תמונה 3).
4. אגב, אפשר להשתמש בזה גם למוצרים בווקומרס.

טוב, עכשיו אתם (היי, לפחות באתגר הראשון )

רעיון יפה.

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

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

 

[אלעזר 1]

זה הכיוון:

.elementor-posts .elementor-post__card .elementor-post__excerpt{
    min-height: 65px;
    max-height: 65px;
    overflow: hidden;
}

.elementor-posts .elementor-post__excerpt p{
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to bottom, #333, #333 27px, #eee0 74px);
    -webkit-background-clip: text;
}

 

[אלישבע 2]

.elementor-posts .elementor-post__title{
    line-height: 1.5em;
    max-height: 3em;
    overflow: hidden;
}

את האפקט החלקי אולי עם before

 

[roni ravitz]

פתרון קוד #1 הגבלת שורות טקסט
(כאמור זה הפתרון שלי, כמובן שיש עוד אפשרויות)

1. ליצירת הגבלת שורות:
באלמנטור מגדירים גובה שורה למשל 1em
ומוסיפים את הקוד הבא:

selector .elementor-post__title{
    max-height: 2em;
    overflow: hidden;
    }

2. ליצירת האפקט

selector .elementor-post__title{
    max-height: 3em;
    overflow: hidden;
    position: relative;
}

selector .elementor-post__title:before{
    content: "";
    position: absolute;
    bottom: 0;
    height: 1em;
    width: 100%;
    background: linear-gradient(to bottom, transparent, white);
  
}

האפשרות של הרב @אליעזר1 גם כן אפשרות מעניינת.

על מנת ליצור הגבלת שורות בארכיון מוצרים בווקומרס

.woocommerce-loop-product__title{
    line-height: 1em;
    max-height: 2em;
    overflow: hidden;
}

תודה רבה ל @אלישבע 2 @אליעזר1 @חגית קרמר

 

[roni ravitz]

אתגר קוד #2 אנימציות בסליידר

צפו בגיפ הבא,



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

 

[אילת פלדמן]

כנראה משהו כזה

.swiper-slide-active .elementor-slide-heading{
 animation-name: my-animation;
animation-duration: 1s;
 }

@keyframes my-animation{
    0%{
     opacity: 0;
     }
    100%{
    opacity: 1;
     }
  }

 

[אלעזר 1]

(כן, נשמע קצת מוזר).

ספריית האנימציות של אלמנטור (במידה והפעלתם מיטוב ביצועים תוכלו לעשות בזה שימוש רק אם קיימת בדף לפחות אנימציה אחת שנוצרה עם אלמנטור)

elementor/assets/lib/animate.css/animate.css at master · elementor/elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design. - elementor/elementor

github.com

יש גם את האנימציות של פונט awesome שזמינות גם כן עם ה-class המתאים:

Animating Icons

fontawesome.com

 

[roni ravitz]

(טוב הייתי קצת עסוק)

פתרון אתגר #2 אנימציות בסליידר

טוב הרעיון לתת אנימציה אחרי שנוסף לסליידר הקלאס swiper-slide-active
הנה הקוד

selector .swiper-slide-active .elementor-slide-heading{
    animation-name: bounceInDown;
animation-duration: 1.25s;
    
}
selector .swiper-slide-active .elementor-slide-button{
    animation-name: bounceInUp;
animation-duration: 1.5s;
}

selector .swiper-slide-active .elementor-slide-description{
    animation-name: tada;
animation-duration: 1.25s;
}

כמו שכתב הרב @אליעזר1 אם הכנסתם כבר בעמוד אנימציית כניסה של אלמנטור, מספיק לתת רק את שם האנימציה (מחובר עם אותיות גדולות כמו שבקוד הנ"ל).

 

[roni ravitz]

אתגר קוד #3 מעברי צבע בטקסט

פשוט



קצת יותר



ועם אנימצייה