CSS жана Javascript бир аз 29 мыкты дизайн мөөнөттөрү

Убакыттар же мөөнөттөр дагы бир кошумча элемент болуп саналат прогрессти же эволюцияны көрсөтүү үчүн веб-сайтка интеграциялоо компаниянын же компаниянын жылдарында. Аны арип менен жана визуалдык элементтер менен кооздоп түзүүнү билип, кызматтын же өнүмдүн убакыттын өтүшү менен жасаган кадамдарын көрсөтө алган жакшы визуалдык графикалык туюнтма.

Төмөндө таба турган ушул 29 график тик мөөнөттөрдөн горизонталдуу болот. Кардар үчүн же өзүңүз үчүн иштеп жаткан веб-сайттагы баракчадан аны табуу үчүн сизге ылайыктуусун таба аласыз. Биз көзгө көрүнөө жагымдуу абдан кызыктуу графиктердин жыйнагы менен баратабыз.

Жылдыруу менен убакыт тилкеси

HTML, CSS жана JavaScript коддорундагы өзүн-өзү а катары жайгаштыруу үчүн убакыт тилкеси жакшы минималист сол жактагы жылдардын тизмеси үчүн кызылга, ал эми шрифт менен H2s үчүн кара түскө басым жасайт. Бул убакыт тилкесиндеги эң жакшы нерсе - баракчаны жылдырганда, жыл өзгөрүүсү автоматтык түрдө жүргүзүлөт. Мыкты жасалгалоо, дизайн жана натыйжа.

CSSтеги убакыт тилкеси

Бул убакыт шкаласы CSS кодун колдонуп, айрым касиеттерин туура конфигурациялоого мүмкүнчүлүк берет. Ал жылдырууга ээ эмес Мурунку сыяктуу, бирок бир катар ящиктер жана көк түс менен мүнөздөлөт, ага дагы бир жарашыктуу тийүү берип, ушул басылмадагы убакыт тизмесине кошулат.

Жооптуу убакыт шкаласы

Бул убакыт тилкеси HTML, CSS жана JavaScript коддорун камтыган Swiper JS китепканасы менен түзүлгөн. Веб-баракча аркылуу алга жылдырууда ал жылдырууга ээ эмес, бирок бар жылдарды оң жагына жайгаштырат жана баскычы менен, биз белгилүү бир жылга баруу үчүн чычкан көрсөткүчүн колдонуудан тышкары, кийинки жылга өтсөк болот. Өтмөлөрдүн ар биринде сонун анимация.

Өркүндөтүлгөн убакыт шкаласы

Бул убакыт тилкеси HTML, CSS жана JavaScript тилдерин колдонуудан айырмаланып турат моноколго өтүү, так кызыл обондордо. Ошондой эле бул баскычтын колдонулушу менен мүнөздөлөт, бул чоң натыйжа коду менен белгиленген убакыт тилкесинде бир топ алдыга жылып же артка кайтып, минимализмге өтөт.

Бекитилген баш жана Flexbox менен убакыт тилкеси

Бул белгиленген баш үчүн HTML жана CSS коду Ал биз жылдырып жаткан учурда туруктуу бойдон калат баракта. Учурдагы веб-дизайн стандарттары менен айырмаланууну каалаган учурдагы иштеп чыгуучулар үчүн абдан кызыктуу убакыт тилкеси.

Долбоордун мөөнөтү

Бул убакыт шкаласы CSS жана HTML колдонуп, маанилүү убакыт тилкесин сунуштайт ошол белгилүү бир мезгил долбоор үчүн. Жылдырганда, ал жуманын күндөрүн басып өткөндүктөн, аны компания өзү биргеликте жасаган биргелешкен шаймандар үчүн жүзөгө ашырат.

Timeline

Убакыт тилкеси кирди Башкалардан айырмаланып турган HTML, CSS жана JavaScript визуалдык тема үчүн. Вертикалдуу убакыт тилкесин жылдырып, убакыт графасында жаңы сүрөт табылган сайын, ал ушул кодду койгон веб баракчанын фондук сүрөтү болуп калат.

Hyperloop

Hyperloopu бул убакыт тилкеси колдонулган дизайны менен айырмаланып турат жана HTMLде жана CSSте гана программалангандыгы үчүн. Бул тексттик шрифтте ар кандай өлчөмдөрдү вертикалдык сызык менен жана убакыт тилкесинин ар бир маанилүү учурун белгилеген бир катар уячаларды колдонуу менен мүнөздөлөт.

Тик убакыт шкаласы

Убакыт аралык визуалдык тийүү менен өзүн башкалардан алыстатат. Дизайндагы азыркы градиенттик фонго жана ар бир аралыгын белгилеген бир катар кутучаларга ээ. CSS жана HTMLде программаланган.

Flexbox'тогу убакыт тилкеси

Мыкты аяктаган мөөнөттөрдүн бири жана ошол карталарга негизделген ошол убакыт аралыгында биз үчүн зарыл болгон бардык маалыматтарды камтыйт. Ошондой эле HTML жана CSSте иштелип чыккандыктан, чоңураак экрандарга орун эсептөө үчүн бардык карталардын бийиктиги жана туурасы бирдей болушу керектигин эске алуу керек.

DIVдеги убакыт тилкеси

Дизайндагы минималисттик убакыт тилкеси жана буга чейин болгон HTML жана CSSте гана иштелип чыккан, ошондуктан аны ишке ашыруу өтө тез болушу мүмкүн. Монохромдуу болгондуктан, маалымат чөйрөсүндө убакыт тилкесин чагылдырууга толук ылайыктуу.

CSS жана HTMLдеги убакыт тилкеси

Сиз жайгаштыра аласыз 400 × 300 өлчөмүндөгү сүрөттөр сызыктардын жашыл түсү жана даталар менен күндөрдүн тексти менен айырмаланган бул убакыт тилкесинде. Анимациялары жок жана бардык деңгээлдеги жөнөкөй дизайны менен мүнөздөлөт.

Жорумдар жана пикирлердин графиги

Жол бергендиги үчүн башкалардан такыр айырмаланган убакыт тилкеси колдонуучулардын сүрөттөрү бар карталарды коюңуз, же, жок дегенде, алгач ушул ниет. Кереметтүү визуалдык стили менен, карталар анимациясыз бир кыйла тегиз убакыт шкаласы үчүн көлөкөнү колдонушат.

HTML жана CSS программаларында эртең менен

Буга жооп берген мыкты убакыт тилкеси ал HTML, CSS болуу менен мүнөздөлөт жана кыйла жөнөкөй, бирок абдан мобилдик убакыт тилкесин сунуштайбыз.

Убакыт тилкеси

HTML жана CSS коддору толугу менен иштейт жумушчу күндү көрсөтүү машыгуу. Бул визуалдык аспектиде абдан так жана таза чагылдырган баш сүрөтү жана баскычтардын сериясы менен жооп берет.

CSS ичинде гана убакыт тилкеси

Бул убакыт сызыгы CSS жана а туура тандалган түстөрдүн сериясы: кызыл жана жашыл. Бардык бетти толугу менен камтый турган жашыл, текст жана бөлүнүүчү саптар үчүн ак, ал эми биз турган убакыт аралыгын айырмалоо үчүн кызыл. Биз ар бир интервалды басып, аны курчап турган жана аны белгилеп турган кутуча менен жайгаштыра алабыз.

Жооптуу убакыт шкаласы V3

HTML, CSS жана JavaScript тилдериндеги горизонталдык убакыт графаларынын биринчиси. Визуалдуу үчүн айырмаланып турат кара жана боз түстөрдү колдонуу бир катар упайлар менен горизонталдык сызыкты жайгаштыруу. Ар бир интервал булакта жана тексттин мазмунунда көбүрөөк салмак менен белгиленет.

Убакыт тилкеси түстө жайгаштырылган

Горизонталдык мөөнөттөрдүн бири тизмедеги эң жогорку визуалдык сапат. Убакыт аралыгынын бири басылган сайын колдонуучунун чоң тажрыйбасын сунуштай турган, өтө кылдат жана жакшы көрсөтүлгөн анимациялары бар өтө интерактивдүү убакыт тилкеси. Ал менен жасалган HTML CSS / Sass жана JavaScript / TypeScript (jquery.js).

Жооптуу тарых хронологиясы

Үчүн мыкты убакыт ар кандай окуяларды образдарда көрсөтүү тарыхтагы убакыт аралыгы. HTML, CSS жана JavaScript тилдеринде иштелип чыккандыгы горизонталдуу жана жооп берет.

Топтун убакыт тилкеси

Бул убакыт тилкеси жакшы өтүү үчүн айырмаланып турат горизонталдуу анимация менен жүргүзүлөт. Убакыттын ар бир бөлүгүн бөлүп көрсөтүү үчүн укмуштай түстө жана эң сонун дизайн. HTML, CSS жана JavaScript тилдеринде өкүлчүлүктүү фон сүрөтүнө салынган бир катар карталарды көрсөтүү мүмкүн.

Горизонталдык CSS жана HTML убакыт тилкеси

Ал тарабынан жасалган Envato Tuts + белгилүү, бизге дизайндагы таза жана негизги карталардын сериясы менен горизонталдык убакыт тилкеси сунушталды. Жалпак түстөр жана ар бир интервалды бири-бирине байлап туруучу кызыл чекиттер менен горизонталдык сызык.

CSS, HTML жана slick.js убакыт тилкеси 

Бул убакыт графиги үчүн дизайндагы пастел обондору сүрөттөрдүн ар биринин презентациясы менен айырмаланып турат ар бир убакыт аралыгын көрсөтүү. Бул ар бир сүрөттөлүш менен аралыктын ортосундагы өтүү бул убакыт тилкесин өзгөчө кылат.

V1 ырааттуулугу

Ал үчүн айырмаланган убакыт тилкеси ар бир тик сызыктагы баскычтар ар бир интервалдын экрандын сүрөтүн толук баскан сайын шилтеме берүү

HTML горизонталдуу убакыт шкаласы

Сиз белгилеген бул убакыт тилкесинин эч жерин баса албайсыз түстөр палитрасын акылдуу тандоо менен эң сонун дизайн жана убакыттын ар бири үчүн бутерброддордун сериясы. Анимациялар жок, бирок көзгө көрүнүп ал көзгө абдан жагат.

Codyhouse Timeline

Бул убакыт тилкеси Codyhouse сунуш кылган бир түстүү дизайнында жана HTML, CSS жана JavaScriptте иштелип чыккан. Чектелүүчү интервал катары минималисттик сызыкты бир катар упайлар менен көрсөтөт жана горизонталдуу анимацияны жарым секундага жеткирбейт. Жөнөкөй, бирок күчтүү.

Горизонталдык убакыт шкаласы

HTML, CSS жана JavaScript тилдеринде жасалган дагы бир убакыт тилкеси. Бир түс менен мүнөздөлөт, анда убакыт аралыгын чагылдырган ар бир чекитке шнурка коюу үчүн жашыл түстөгү жарашыктуу дизайн камтылган. Биз баскан сайын, абдан жылмакай каптал анимациясы башталат.

Аты аталбаган убакыт шкаласы

Төмөндө көрсөтүлгөн жалгыз кара убакыт тилкеси. Андан кийин ал колдонот жыл сайын жана текстти айырмалоо үчүн ар кандай түстөр анын чектери менен бир эле мезгилде. Бул тексттердин ар биринин арасынан өтө турган мыкты анимацияга ээ.

Убакыт тилкеси

Бул убакыт тилкеси коет жашыл түскө басым толугу менен статикалык болуу.

Дагы бир горизонталдуу убакыт шкаласы

Сиз сүрөттү толук экрандын жанына коюңуз көк жана боз түстөрдү колдонуу менен айырмаланган убакыт тилкеси үчүн, ошондой эле жыл сайын көрсөтүлгөн бир катар чөйрөлөр үчүн.

Өткөрүп жибербеңиз CSS жана HTMLдеги дагы бир катар менюлар.