בלא מעט עיצובים וגם אתרים שאני רואה ברשת יש לנו את הצורך לעשות הדר שקוף שיהיה מעל ה- HERO ויתמלא צבע או יהפך לאפקט זכוכית בזמן גלילה,
חיפשתי לא מעט ברשת משהו כזה ונתקלתי במדריך המעולה של Rino de Boer האלוף מ- livingwithpixels (שווה לעקוב אחריו) והוא פרסם מדריך פשוט ביותר להפיכת הדר משקוף לצבע בגלילה.
את הקוד הבא שימו ב- CSS של ההדר שלכם ותגדירו את ההדר כסטיקי, חשוב מאוד כדי שזה יעבוד.
כמובן שתוכלו להתאים את הצבע של ההדר לצבע שתרצו (בשורה 2)
את אפקט הזכוכית תגדירו בשורות 3+4.
בהצלחה.
selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.4)!important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}