29 сјајних временских рокова за дизајн у ЦСС-у и са мало Јавасцрипта

Померите временску линију

Временски рокови или временски редови су још један од додатних елемената које можемо интегришите у веб локацију како бисте приказали напредак или еволуцију у годинама предузећа или предузећа. Добро визуелни графички израз који знајући како да га елегантно компонује с типографијом и визуелним елементима, може показати кораке које је услуга или производ предузела током времена.

Ових 29 временских рокова које ћете наћи у наставку су из вертикалних временских линија као што би били хоризонти. Пронаћи ћете најбољег који одговара вашим потребама да бисте га пронашли на страници веб странице коју развијате за клијента или за себе. Идемо са колекцијом врло занимљивих временских рокова који су веома визуелно угодни.

Хронологија померањем

Померите временску линију

Временска линија која је у ХТМЛ, ЦСС и ЈаваСцрипт коду како би се грациозно позиционирала као добар минималиста која наглашава црвену боју за списак година с леве стране, а црну за фонт и Х2с. Најбоља ствар у вези са овом временском линијом је та што ће се током померања странице аутоматски вршити промена године. Одличан завршетак, дизајн и резултат.

Хронологија у ЦСС-у

Својства ЦСС хронологије

Ова временска линија користи ЦСС код да би чак могла да буде правилно конфигурисана у неким својим својствима. Нема померање као и претходни, али карактерише га низ кутија и плава боја, што му даје још један врло елегантан додир и додаје на листу временских линија ове публикације.

Одзивни клизач временске линије

Одзивни клизач временске линије

Ова временска црта је направљена помоћу Свипер ЈС библиотеке како би укључила ХТМЛ, ЦСС и ЈаваСцрипт код. Нема померања док напредујемо кроз веб страницу, али јесте године ставља на десну страну и дугме помоћу којег можемо да пређемо на следећу, осим што ћемо помоћу показивача миша ићи на одређену годину. Одлична анимација у сваком од прелаза.

Напредна временска линија

Напредна временска линија

Ова временска линија се издваја по томе што осим ХТМЛ-а користи и ХТМЛ, ЦСС и ЈаваСцрипт ући у једнобоју, управо у црвеним тоновима. Такође се одликује употребом дугмета које вам омогућава да се крећете напред или назад у временској линији означеној овим сјајним кодом резултата да бисте били прилично минималистички.

Временска линија са фиксним заглављем и Флекбок-ом

Временска линија је фиксна

ХТМЛ и ЦСС код за фиксно заглавље које остаће фиксно у тренутку када се померимо на страници. Изузетно суптилно бити временски след од великог интереса за било ког тренутног програмера који жели да буде истакнут тренутним стандардима веб дизајна.

Временска линија пројекта

Временска линија пројекта

Овај временски след користи ЦСС и ХТМЛ за представљање важног временског следа за који се користи тај одређени временски период за пројекат. Док се помичемо кроз њега кроз дане у седмици, савршено је примијенити га на заједничке алате које је направила сама компанија.

Тимелине

Тимелине

Временска линија у ХТМЛ, ЦСС и ЈаваСцрипт који се издваја од осталих за визуелну тему. И то је тако, док се крећемо кроз померање кроз вертикалну временску линију, сваки пут када пронађемо нову фотографију на временској линији, она ће постати позадинска слика веб странице на коју смо поставили овај код.

ХИПЕРЛООП

ХИПЕРЛООП

Хиперлоопу је временска линија која издваја се пре по дизајну који се користи и за то што је програмиран ништа више него у ХТМЛ-у и ЦСС-у. Карактерише се употребом различитих величина у фонту текста са вертикалном линијом и низом оквира који обележавају сваки важан тренутак временске линије.

Вертикална временска линија

Вертикална временска линија

Интервални временски след који дистанцира се од осталих својим визуелним додиром. Има врло актуелну градијентну позадину у дизајну и низ кутија које означавају сваки од ових интервала. Програмирано у ЦСС и ХТМЛ.

Временска линија у Флекбок-у

Флекбок временске линије

Један од најбоље завршених рокова и то заснива се на картама да бисмо укључили све информације потребне за тај временски интервал. Такође развијени у ХТМЛ-у и ЦСС-у, мора се узети у обзир да све картице морају имати исту висину и ширину да би се израчунао простор за веће екране.

Хронологија у ДИВ-у

Хронологија див

Минималистички временски оквир у дизајну и то је било развијен само у ХТМЛ-у и ЦСС-у, тако да његова примена може бити врло брза. Савршено је погодно за изражавање временске линије у информативном медију због своје монохроматске обраде.

Хронологија у ЦСС-у и ХТМЛ-у

ЦСС хронологија

Можете сместити Слике величине 400 × 300 на овом временском следу који се одликује зеленом бојом линија и текстом датума и дана. Нема анимације и одликује се једноставним дизајном на свим нивоима.

Временска линија за коментаре и повратне информације

Коментари временске линије

Временска линија која се веома разликује од осталих за дозвољавање ставите картице са фотографијама корисника, или је то бар намера у почетку. Са одличним визуелним стилом, картице користе сенчење за прилично равну временску линију без анимација.

Хронологија јутра у ХТМЛ-у и ЦСС-у

Респонсиве тимелине

Савршен временски след за одговор на то карактерише га ХТМЛ, ЦСС и нуде прилично једноставан, али врло мобилан временски след.

УИ временске оси

Тимелине

Овај код у ХТМЛ-у и ЦСС-у савршено ради за представити радни дан тренинга. Реагује са заглавном сликом и низом дугмади која је приказују на врло јасан и чист начин у визуелном аспекту.

Хронологија само у ЦСС-у

ЦСС Тимелине

Ову временску линију карактерише боравак у ЦСС и а добро изабрана серија боја: црвена и зелена. Зелена да потпуно покрије целу страницу, бела за текст и линије за раздвајање, а црвена за разликовање временског интервала у којем се налазимо. Можемо кликнути на сваки интервал да бисмо га поставили у оквир који га окружује и истиче.

Прилагодљиви временски след В3

Респонсиве Тимелине В3

Прва од хоризонталних временских линија на листи у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у. Визуелно се издваја по употреба црне и сиве боје да поставимо хоризонталну линију са низом тачака. Сваки интервал је истакнут већом тежином у извору и садржају текста.

Временска црта смештена у боји

Угнездио

Један од хоризонталних временских рокова највиши визуелни квалитет на листи. Веома интерактивни хронолошки след са врло суптилним и добро представљеним анимацијама који нуде сјајно корисничко искуство сваки пут када се притисне један од временских интервала. Направљен је са ХТМЛ ЦСС / Сасс и ЈаваСцрипт / ТипеСцрипт (јкуери.јс).

Прилагодљив хронологија историје

Одзивна прича

Савршена временска линија за приказати различите догађаје на сликама временског слота у историји. Хоризонталан је и реагује на то што је развијен у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у.

Хронологија групе

Тимелине гроуп

Ова временска линија се истиче добром транзицијом изведено са хоризонталном анимацијом. Одличних боја и изврсног дизајна који истиче сваки временски интервал. У ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у представљен је низ карата прекривених репрезентативном позадинском сликом.

Хоризонтална ЦСС и ХТМЛ временска линија

Хоризонтални енвато

Направио он познати Енвато Тутс +, представљен нам је водоравни временски след са низом чистих и основних карата у дизајну. Равне боје и водоравна линија са низом црвених тачака које спајају сваки интервал.

Временска црта ЦСС, ХТМЛ и слицк.јс 

Пастелна временска линија

Пастелни тонови у дизајну временске линије која издваја се презентацијом сваке од слика приказујући сваки временски интервал. Прелаз између сваке слике и интервала чини овај временски след истакнутим.

Временски слијед В1

Редослед временске линије

Временска линија која се истиче дугмад на свакој вертикалној линији сваког интервала за повезивање позадинске слике преко целог екрана сваки пут када притиснемо једну.

Хоризонтална хронологија ХТМЛ ЦСС

Временска црта ХР

Нећете моћи да кликнете било где на овој временској линији која је истакнута знаком изврстан дизајн мудрим избором палете боја и низ сендвича за сваки временски распоред. Нема анимација, али визуелно је оку угодно.

Временска црта Цодихоусе

Временска црта ЦодиХоусе

Овај временски след представио Цодихоусе је једнобојан у дизајну и развијен је у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у. Представља минималистичку линију са низом тачака као интервалима на које треба кликнути и узрокује хоризонталну анимацију краћу од пола секунде. Једноставно, али моћно.

Хоризонтална временска линија

Хоризонтална временска линија

Друга временска линија израђена у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у. Карактерише једна боја, садржи елегантан дизајн са зеленом бојом да стави чипку на сваку од тачака које представљају временске интервале. Сваки пут када притиснемо један, започиње врло глатка бочна анимација.

Неименована временска линија

Неименована временска линија

Једина црна временска линија са доње листе. Затим користи различите боје за разликовање сваке године и текста истовремено са границама тога. Има истакнуту анимацију која пролази између сваког текста.

Временска линија

Временска линија

Ова временска линија ставља акценат на зеленој боји да буде потпуно статичан.

Још једна хоризонтална временска линија

Друга временска линија

Можете поставите слику близу целог екрана за временску линију која се истиче употребом плаве и сиве боје, плус низ кругова који представљају сваку годину.

Не пропустите друга серија менија у ЦСС-у и ХТМЛ-у.


Оставите свој коментар

Ваша емаил адреса неће бити објављена. Обавезна поља су означена са *

*

*

  1. За податке одговоран: Мигуел Ангел Гатон
  2. Сврха података: Контрола нежељене поште, управљање коментарима.
  3. Легитимација: Ваш пристанак
  4. Комуникација података: Подаци се неће преносити трећим лицима, осим по законској обавези.
  5. Похрана података: База података коју хостује Оццентус Нетворкс (ЕУ)
  6. Права: У било ком тренутку можете ограничити, опоравити и избрисати своје податке.