תיבת הודעות זורמות

באמצעות שילוב של כמה מאפייני CSS אנו יכולים לקבל הודעה שהיא אנימציית CSS המכילה תוכן נע שיכול להתאים לתקצירים מתוך דפים אחרים באתר או הודעות לגולש.

השילוב של animation יחד עם white-space ו overflow-y מאפשרים את יצירת הדוגמא הבאה.

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

אין בעיה עם אורך השורות הן מותאמות לרוחב התצוגה גם אם השורה ארוכה כמו שורה זו.

עכשיו אקשקש מעט כדי שיהיה תוכן שתוכלו לראות את הזרימה של ההודעה ועכשיו אני יוסיף מילה עם תגית B להדגשה.

השימוש ב CSS לעיצוב אתרים הוא דבר מעולה

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

אין בעיה עם אורך השורות הן מותאמות לרוחב התצוגה גם אם השורה ארוכה כמו שורה זו.

עכשיו אקשקש מעט כדי שיהיה תוכן שתוכלו לראות את הזרימה של ההודעה ועכשיו אני יוסיף מילה עם תגית B להדגשה.

השימוש ב CSS לעיצוב אתרים הוא דבר מעולה

אפשר להשתמש בטריק זה ללא האנימציה animation ולגלות את פסי הגלילה overflow-y וללא הגדרות המיקום position ו top ולאפשר למשתמש לגלול בעצמו את התוכן הפנימי.

למשתמשי הפיירפוקס תוכלו להוסיף scrollbar-color לקביעת צבע לפסי הגלילה של התיבה.

תפריט ראשי

מאפייני CSS

תיבת הודעות זורמות