29 headers u footers CSS għall-blog jew il-websajt tiegħek

L-intestaturi u l-footers huma Elementi essenzjali meta tinħoloq paġna ġdida web jew blog, jew jekk xejn ma rridu naġġornawhom biex jilħqu l-istandards attwali tad-disinn tal-web. Huma spazji li l-viżitatur tal-websajt tagħna normalment jagħtihom attenzjoni kbira, allura rridu nieħdu ħsiebhom u nħarsuhom biżżejjed sabiex ikunu pjaċevoli għall-għajn, apparti li jkunu funzjonali.

Għal dik ir-raġuni se naqsmu 29 headers u footers CSS li tista 'tuża fuq il-blog jew il-websajt tiegħek, u b'hekk agħtih dak il-punt ta 'kwalità li kont qed tfittex. Din il-lista hija magħmula minn headers tal-artikoli full screen, kif ukoll id-daqs standard, headers fissi jew fissi, footers u xi headers tal-vidjow biex jagħtu punt ta 'perspettiva ieħor lill-websajt tiegħek.

Header mgħawweġ

Intestatura li hija identifikata minn l-istil mgħawweġ tagħha fil-qiegħ li jagħmilha header speċjali ħafna għal websajt jew blog. Huwa CSS pur, allura diġà qed jieħu ż-żmien biex tittestja fil-web staging tiegħek kif se tidher jekk tinkludih fil-blog tiegħek.

Immaġni tal-intestatura Parallax

B'effett ta 'immaġni Parallax kbir, din l-intestatura tidentifika lilha nnifisha bi uża l-pożizzjoni tal-immaġni ta 'sfond CSS. L-immaġni tal-intestatura tkun ippożizzjonata fin-naħa ta 'fuq tal-paġna għal kodiċi ta' effett kbir.

Header imwaħħal angolat

Dan l-intestatura huwa ffissat sew fin-naħa ta 'fuq tal-paġna tal-web għal jiddifferenzjaw ma 'dik il-linja djagonali li taqsam l-orizzontali kollha tal-veduta tal-utent. Juri kif il-psewdo-elementi CSS jistgħu jintużaw biex tinħoloq header fissa b'immaġni ta 'sfond.

Daqqa ta 'ras mgħawġa

CSS u HTML għal din l-intestatura li fl-eżempju mogħti hija kkaratterizzata tul dik il-linja djagonali li taqsam l-iskrin kollu minn naħa għall-oħra.

Header b'animazzjoni SVG

Intestatura sempliċi ħafna, għalkemm tuża animazzjoni SVG biex tiddistingwi lilek innifsek minn dawk li għandna f'din il-lista. Tista 'taċċessa lista kbira ta' paġni tal-web b'animazzjonijiet SVG minn hawn.

Header fiss b'Div

B'effett ta 'immaġni Parallax, header fiss li jispikka għall-effett kbir miksuba bl-immaġni ta 'sfond fissa waqt li l-bqija qed tiskrollja kif niskrolljaw bil-maws.

Parallax illustrazzjoni b'ħafna saffi

Daqqa ta 'ras ta' temm mill-aqwa ġewwa HTML, CSS u JavaScript b'ħafna saffi u li jistgħu jintużaw perfettament għal websajt relatata mad-dinja tal-logħob tal-kompjuter. Finitura kbira matul.

Header tal-post fiss

Intestatura fissa għal kull kariga magħmula f'HTML, CSS u JavaScript. Il-mument li nidħlu, l-intestatura hija minimizzata u ffissat fil-parti ta 'fuq.

Header tal-iskrin sħiħ b'animazzjoni

Intestatura li toffri animazzjoni li jiċċaqlaq lateralment u li jipproduċi effett rilassanti fuq it-telespettatur.

Immaġni tal-eroj full screen

ma effett zoom, din header full screen huwa żvelat bħala wieħed ta 'oriġinalità kbira. Perfetta għal websajt li fiha l-viżitatur se jagħmel użu kbir mill-iscroll biex iscrollha.

Flexbox bil-buttuna 

Intestatura li tieħu l-wisa 'kollha tal-iskrin biex turi buttuna. Perfetta għall-inżul tal-paġni bis-CSS flexbox.

Header tal-Eroj tal-Flexbox

Intestatura b'effett parallax u flexbox pjuttost sempliċi li tispikka għall-eleganti tad-disinn tagħha prinċipalment.

Header twaħħal fuq l-iscroll

Kif jissuġġerixxi ismu, header fiss meta aħna niskrolljaw bil-maws meta nimxu biex tara l-bqija tal-paġna tal-web.

Skrolljar Responsiv Sticky

Intestatura fissa oħra ta 'effett kbir meta l-menu jilħaq il-parti ta' fuq tal-paġna, għaliexu f'dak il-mument tibqa 'fissa u nistgħu nibqgħu niskrolljaw is-sit.

Skrollja Header

Huwa differenti mill-bqija minn animazzjoni xierqa u delikata kif nimxu. Fl-aħħar tagħha, it-ras tibqa 'mwaħħla fin-naħa ta' fuq.

Skrolljar Responsiv Header

Animazzjoni oħra kbira għal jiddistingwu din l-intestatura mill-bqija bl-HTML, CSS u JavaScript.

Header In / out

Intestatura li tingħaraf bl-effett Ġewwa / barra wara li tiskrollja u li tipproduċi s-sensazzjoni ta 'rebound.

header fade

Effett ieħor ta 'animazzjoni kurjuż u eleganti ħafna f'HTML, CSS u JavaScript.

Header li huwa moħbi

Intestatura differenti meta tinħeba skond nużaw scrolling b'animazzjoni li ma jindunax imma ta 'kwalità kbira.

Footall tal-Parallax

Footer fiss jew fiss b'HTML, CSS u JavaScript. Ta ' kwalità kbira bid-dell fis-seħħ.

Footer bi skala ta 'kontenut

Footer ta 'kwalità għolja u oriġinali għal stagħġeb lill-viżitatur għall-mod grazzjuż ta 'kif turi dan l-ispazju fuq il-web.

Footer tal-Midja Soċjali

Footer li jispikka għalih il-buttuni li jwasslu għan-netwerks soċjali l-iktar magħruf. Jispikka l-animazzjoni li sseħħ meta tħalli l-mouse pointer fuq kull waħda min-netwerks soċjali.

Menu animat tal-footer mobbli

Billi tnaqqas it-tieqa tal-web browser biex tara dan il-footer, tkun tista ' sib it-2-3 taqsimiet li l-utent jista 'jsib fuq apparat mobbli. Huwa muri fuq 767px.

Footer Sempliċi Fiss

Magħmul f'HTML u CSS huwa footer sempliċi mingħajr ħafna daqq u frills.

Irreaġixxi Header tal-Vidjo

Intestatura bi video sempliċi React.js.

Header tal-Vidjo

Oħra header b'vidjo sempliċi u ta 'kwalità kbira.

Full Screen Video Header b'Mix-Blend

Uri a vidjo fuq skrin sħiħ bit-test fuq saff bl-użu tal-mod mix-blend.

Animazzjoni tal-Header tal-Vidjo

L-animazzjoni kienet apposta bl-Adobe After Effects biex tkun kompatibbli mal-browsers kollha. Ma jaħdimx fuq il-mowbajl.

Header tal-vidjow li jirrispondi bi gradjent

El gradjent huwa dak li jispikka għal dan il-header tal-video mill-bqija.