בעקבות השידרוג - כותרת הפוסט

[yossiz]

למי שמעוניין, יש לי קוד CSS שאני משתמש בו כדי להסתיר רוב הכותרת ולהגדילו ברחיפה על הקצה הגלוי:

.topic .topic-header {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
    background-color: rgba(250,250,250,0.7);
    backdrop-filter: blur(5px);
    top: 10px;
    transition: top 0.5s ease-in;
}

.topic .topic-header:hover {
    top: 92px;
}

[מעלה ומוריד]

@yossiz נהדר!

עשיתי לעצמי שיפורונצ'יק (צל מותאם לעיצוב באתר, ובמקום להשאיר קצת מהכותרת שמתי כפתור לרחף עליו) אני רק לא קולט איך להעלים אותו במצב שלפני הגלילה...

.topic .topic-header:hover {
top: 92px;
}

.topic .topic-header {
box-shadow: 0 0 10px 0 rgba(0,0,0,0.12156863);
background-color: rgba(250,250,250,0.7);
backdrop-filter: blur(5px);
top: -3px;
transition: top 0.5s ease-in;
}
 
.topic .topic-header:after{
content:"▼";
padding: 0px 15px 0px 8px;
color: #fff;
font-size: 0.8em;
width: 45px;
height: 18px;
border-radius: 0px 0px 60px 60px;
background-color: #4582ec;
position:absolute;
left: 50%;
bottom: -17.5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.12156863);
}

[yossiz]

@מעלה-ומוריד אמר בבעקבות השידרוג - כותרת הפוסט:

אני רק לא קולט איך להעלים אותו במצב שלפני הגלילה...

אין דרך באמצעות CSS. עיין: https://davidwalsh.name/detect-sticky

[מוטי מן]

@yossiz איך אתם דוחפים את הCSS לתוך הפורום? כולם פה חוגגים חוץ ממני

[yossiz]

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

[מוטי מן]

@yossiz יש לי אותו כבר מפעם, כנראה שבפעם הקודמת שהתבכיינתי מישהו הביא לי, אבל אני לא מצליח לעבוד איתו, אשמח להסבר (בנושא נפרד )

[yossiz]

@מוטי-מן זה די פשוט. כאשר אתה בתוך אתר, תקליק על האייקון של התוסף, נפתח חלונית קטן ואפשר להדביק שם קוד CSS.
הקוד מופעל מיד וניתן לראות את השינויים לייב תוך כדי עריכת הקוד.
כדי להפעיל את ה-CSS אוטומטית בכל ביקור לאתר תלחץ על אייקון ה- בכותרת החלונית.
זה הכל.
(כמובן יש עוד המון אופציות ופיצ'רים מתקדמים, אבל זה מספיק לשימוש בסיסי)

[yossiz]

@מעלה-ומוריד אמר בבעקבות השידרוג - כותרת הפוסט:

עשיתי לעצמי שיפורונצ'יק (צל מותאם לעיצוב באתר, ובמקום להשאיר קצת מהכותרת שמתי כפתור לרחף עליו)

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

.topic .topic-header:after{
...
  left: 50%;
...
}

[bbn]

@yossiz מגניב ביותר!! תודה רבה!
אשמח אם יש למישהו את ה CSS שמאפשר להוריד את חלון ההודעה למטה יותר כמו שרציתי פה
ואז ככה אני יוכל לעשות לעצמי באופן אישי כי יש לי מסך קטן (14)

[yossiz]

@bbn גם לי זה מפריע כי גם לי יש מסך קטן...
הנה הקוד:

.composer {
    min-height: 0;
}

[bbn]

@yossiz ישר כח!