29 לוחות זמנים נהדרים לעיצוב ב- CSS ועם קצת Javascript

גלול את ציר הזמן

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

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

ציר הזמן על ידי גלילה

גלול את ציר הזמן

ציר זמן הנמצא בקוד HTML, CSS ו- JavaScript כדי למקם את עצמו בחינניות כ- מינימליסטי טוב המדגיש אדום לרשימת השנים משמאל, ושחור לגופן ו- H2. הדבר הטוב ביותר בציר הזמן הזה הוא שכשאתה גולל בדף, שינוי השנה יבוצע באופן אוטומטי. גימור, עיצוב ותוצאה נהדרים.

ציר זמן ב- CSS

מאפייני ציר זמן של CSS

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

מחוון ציר הזמן רספונסיבי

מחוון ציר הזמן רספונסיבי

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

ציר זמן מתקדם

ציר זמן מתקדם

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

ציר זמן עם כותרת קבועה ו- Flexbox

קו הזמן קבוע

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

ציר הזמן של הפרויקט

ציר הזמן של הפרויקט

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

ציר זמן

ציר זמן

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

הייפרלופ

הייפרלופ

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

ציר זמן אנכי

ציר זמן אנכי

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

ציר זמן בפלקסבוקס

ציר הזמן flexbox

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

ציר זמן ב- DIV

קו ציר הזמן

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

ציר זמן ב- CSS ו- HTML

ציר זמן של CSS

אתה יכול למקם תמונות בגודל 400 × 300 בציר זמן זה מובחן בצבע הירוק של השורות ובטקסט התאריכים והימים. אין לו אנימציות והוא מאופיין דווקא בעיצוב הפשוט שלו בכל הרמות.

הערות וציר זמן משוב

הערות על ציר הזמן

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

בוקר ציר זמן ב- HTML ו- CSS

ציר זמן רספונסיבי

ציר זמן מושלם להגיב על כך הוא מאופיין בכך שהוא HTML, CSS ומציעים ציר זמן פשוט למדי אך נייד מאוד.

ממשק משתמש לציר הזמן

ציר זמן

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

ציר זמן ב- CSS בלבד

ציר הזמן של CSS

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

ציר זמן רספונסיבי V3

ציר זמן רספונסיבי V3

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

ציר הזמן שוכן בצבע

מקונן

אחד מקווי הזמן האופקיים האיכות החזותית הגבוהה ביותר ברשימה. ציר זמן אינטראקטיבי היטב עם אנימציות עדינות ומוצגות היטב כדי להציע חווית משתמש נהדרת בכל פעם שנלחץ על אחד מרווחי הזמן. זה עשוי עם HTML CSS / Sass ו- JavaScript / TypeScript (jquery.js).

ציר זמן היסטורי רספונסיבי

סיפור רספונסיבי

ציר זמן מושלם עבור להראות את האירועים השונים בתמונות של משבצת זמן בהיסטוריה. זה אופקי ומגיב לפיתוח ב- HTML, CSS ו- JavaScript.

ציר זמן קבוצתי

קבוצת ציר הזמן

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

ציר זמן אופקי של CSS ו- HTML

Envato אופקי

תוצרתו ידוע Envato Tuts +, לפנינו ציר זמן אופקי עם סדרת כרטיסים נקיים ובסיסיים בעיצוב. צבעים שטוחים וקו אופקי עם סדרת נקודות אדומות שמשלבות כל מרווח.

ציר זמן CSS, HTML ו- slick.js 

ציר זמן של פסטל

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

רצף ציר הזמן V1

רצף ציר הזמן

ציר זמן שבולט בו כפתורים בכל קו אנכי של כל מרווח לקישור תמונת רקע במסך מלא בכל פעם שאנחנו לוחצים על אחת.

ציר זמן אופקי HTML CSS

ציר הזמן משאבי אנוש

לא תוכל ללחוץ בשום מקום על ציר הזמן הזה שמודגש על ידי a עיצוב מעולה על ידי בחירה נבונה של לוח הצבעים וסדרת כריכים לכל אחד מקווי הזמן. אין אנימציות, אבל מבחינה ויזואלית זה מאוד נעים לעין.

ציר הזמן קודיאוס

ציר הזמן CodyHouse

ציר הזמן הזה המוצג על ידי Codyhouse הוא צבע יחיד בעיצוב ומפותח ב- HTML, CSS ו- JavaScript. הוא מציג קו מינימליסטי עם סדרה של נקודות כמרווחים שיש ללחוץ עליהם ולגרום לאנימציה אופקית של פחות מחצי שנייה. פשוט, אבל חזק.

ציר זמן אופקי

ציר זמן אופקי

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

ציר זמן ללא שם

ציר זמן ללא שם

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

ציר זמן

ציר זמן

ציר הזמן הזה מציב המבטא על הצבע הירוק להיות סטטי לחלוטין.

ציר זמן אופקי נוסף

ציר זמן נוסף

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

אל תפספסו סדרה נוספת של תפריטים ב- CSS ו- HTML.


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

היה הראשון להגיב

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם.

*

*

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

bool (נכון)