Ang mga header at footer ay Mahahalagang elemento kapag lumilikha ng isang bagong pahina web o isang blog, o kung wala nang kailangan pa nating i-update ang mga ito upang matugunan ang kasalukuyang pamantayan ng disenyo ng web. Ito ang mga puwang kung saan ang bisita sa aming website ay karaniwang nagbibigay ng labis na pansin, kaya dapat naming alagaan ang mga ito at palayawin sila ng sapat upang sila ay nakalulugod sa mata, bukod sa pagiging gumagana.
Iyon ang dahilan kung bakit magbabahagi kami 29 mga header at footer ng CSS na maaari mong gamitin sa iyong blog o website, at sa gayon bigyan ito ng puntong kalidad na iyong hinahanap. Ang listahang ito ay binubuo ng mga buong header ng artikulo ng screen, pati na rin ang karaniwang sukat, naayos o naayos na mga header, footer at ilang mga header ng video upang magbigay ng isa pang pananaw sa iyong website.
Hubog na header
Isang header na kinilala ni ang hubog na istilo nito sa ilalim na ginagawang isang napaka-espesyal na header para sa isang website o blog. Ito ay purong CSS, kaya't kumukuha ng oras upang subukan sa iyong web staging kung paano ito titingnan kung isasama mo ito sa iyong blog.
Parallax na imahe ng header
Sa pamamagitan ng isang mahusay na epekto ng imahe ng Parallax, kinikilala ng header ang sarili nito sa pamamagitan ng gumamit ng posisyon sa background na imahe ng CSS. Ang imahe ng header ay nakaposisyon sa tuktok ng pahina para sa mahusay na code ng epekto.
Inayos angulo ng header
Ang header na ito ay maayos na naayos sa tuktok ng web page sa iba-iba ang linya ng dayagonal na iyon tumatawid sa buong pahalang ng view ng gumagamit. Ipinapakita nito kung paano magagamit ang mga CSS pseudo-element upang lumikha ng isang nakapirming header na may isang imahe sa background.
Napilipit na header
CSS at HTML para sa header na ito na sa ibinigay na halimbawa ay nailalarawan kasama ang linya ng dayagonal na iyon tumatawid sa buong screen mula sa isang gilid patungo sa kabilang panig.
Header na may animasyon na SVG
Isang napaka-simpleng header, kahit na gumagamit ito isang animation ng SVG upang makilala ang iyong sarili na mayroon tayo sa listahang ito. Maaari mong ma-access ang isang malaking listahan ng mga web page kasama ang mga SVG na animasyon mula rito.
Naayos ang header kasama si Div
Sa epekto ng imahe ng Parallax, isang nakapirming header na nakatayo para sa mahusay na epekto nakamit gamit ang naayos na imahe ng background habang ang natitira ay pag-scroll habang nag-scroll kami gamit ang mouse.
Paglalarawan ng parallax multi-layer
Isang header ng mahusay na tapusin sa Multi-layered HTML, CSS at JavaScript at maaari itong magamit nang perpekto para sa isang website na nauugnay sa mundo ng mga video game. Mahusay na tapusin sa buong.
Naayos ang header ng post
Ang isang nakapirming header para sa bawat post na ginawa sa HTML, CSS at JavaScript. Sa sandaling gumulong tayo, ang header ay nai-minimize at naayos sa tuktok.
Buong screen header na may animasyon
Isang header na nagbibigay ng isang animation na gumagalaw sa paglaon at gumagawa iyon ng nakakarelaks na epekto sa manonood.
Larawan ng buong bayani ng screen
may isang epekto ng pag-zoomito buong screen ng header ito ay isiniwalat bilang isa sa mahusay na pagka-orihinal. Perpekto para sa isang website kung saan gagamitin ng bisita ang mahusay na pag-scroll upang lumipat dito.
Flexbox na may pindutan
Isang header na kukuha ng buong lapad ng screen upang maipakita ang isang pindutan. Perpekto para sa mga landing page may CSS flexbox.
Header ng Bayani ng Flexbox
Isang header na may bisa simple lang ang parallax at flexbox iyon ay namumukod-tangi para sa gilas ng disenyo nito higit sa lahat.
Malagkit na Header sa scroll
Tulad ng iminumungkahi ng pangalan nito, isang nakapirming header kung kailan nag-scroll kami gamit ang mouse kapag gumagalaw upang makita ang natitirang pahina ng web.
Nakikiramay na Pag-scroll ng Malagkit
Ang isa pang nakapirming header na may mahusay na epekto kapag naabot ng menu ang tuktok ng pahina, bakitat sa sandaling iyon nananatili itong maayos at maaari naming panatilihin ang pag-scroll sa site.
Mag-scroll Header
Ito ay naiiba mula sa natitirang pamamagitan ng maayos at maselan na animasyon habang gumagalaw kami. Sa dulo nito, ang headboard ay mananatiling naayos sa tuktok.
Tumutugon na Header ng Pag-scroll
Isa pang mahusay na animasyon para sa makilala ang header na ito mula sa iba pa may HTML, CSS at JavaScript.
Header In / out
Isang header na nakikilala sa pamamagitan ng epekto Sa / labas pagkatapos mag-scroll at na gumagawa ng pang-amoy ng rebound.
Lumabo ang header
Isa pang epekto sa animasyon usisa at napaka-elegante sa HTML, CSS at JavaScript.
Header na nakatago
Ibang header kapag nagtatago ayon sa gumagamit kami ng pag-scroll gamit ang isang animasyon hindi napapansin iyon ngunit may mahusay na kalidad.
Paralaks ng paa
Ang isang nakapirming o naayos na footer na may HTML, CSS at JavaScript. Ng mahusay na kalidad na may pagtatabing may bisa.
Footer na may sukat ng nilalaman
Ang isang mataas na kalidad at orihinal na footer para sa pagtataka ng bisita para sa kaaya-ayang paraan ng pagpapakita ng puwang sa web na ito.
Footer ng Social Media
Isang footer na pinanindigan ang mga pindutan na humahantong sa mga social network pinakakilala. Ang animasyon na ginawa kapag iniiwan ang mouse pointer sa bawat isa sa mga social network ay namumukod-tangi.
Animated na mobile footer menu
Sa pamamagitan ng pagbawas sa window ng web browser upang matingnan ang footer na ito, magagawa mong hanapin ang 2-3 na seksyon na mahahanap ng gumagamit sa isang mobile device. Ipinapakita ito sa 767px.
Ang Fioter Simple Naayos
Ginawa sa HTML at CSS ay isang simpleng footer nang walang labis na kasiyahan at yumabong.
Mag-reaksyon ng Header ng Video
Isang header na may simpleng video React.js.
Header ng Video
Iba header na may simpleng video at may mahusay na kalidad.
Buong Screen Video Header na may Mix-Blend
Ipakita ang a full screen video na may teksto sa layer gamit ang mix-blend mode.
Animasyon ng Header ng video
Ang animasyon ay na-customize sa Adobe After Effects upang maging katugma sa lahat ng mga browser. Hindi ito gumagana sa mobile.
Nakikiramay na header ng video na may gradient
El gradient ang namumukod sa header ng video na ito mula sa iba pa.
Lahat sila nakumbinsi ako. Salamat
Walang anuman!