29 mga header at footer ng CSS para sa iyong blog o website

Footer ng CSS

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

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

Paralaks

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

Angled 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

Lumusot

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

Hubog 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

Naayos ang 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

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

Naayos na 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

Mga animated na alon

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

Larawan ng bayani

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 

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.

Flexbox Hero Header

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

Malagkit na header

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

Tumutugon na scroll

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

Mag-scroll ng 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

Tumutugon sa header ng 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

buhayin ang header

Isang header na nakikilala sa pamamagitan ng epekto Sa / labas pagkatapos mag-scroll at na gumagawa ng pang-amoy ng rebound.

Header fade

Header fade

Isa pang epekto sa animasyon usisa at napaka-elegante sa HTML, CSS at JavaScript.

Header na nakatago

Itago ang auto

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

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

Sukat ng footer

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

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

Animated na footer mobile

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

Simpleng Fixed

Ginawa sa HTML at CSS ay isang simpleng footer nang walang labis na kasiyahan at yumabong.

Mag-reaksyon ng Header ng Video

Mag-reaksyon ng Header ng Video

Isang header na may simpleng video React.js.

Header ng Video

Header ng Video

Iba header na may simpleng video at may mahusay na kalidad.

Buong Screen Video Header na may Mix-Blend

Fullscreen

Ipakita ang a full screen video na may teksto sa layer gamit ang mix-blend mode.

Animasyon ng Header ng video

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

Tumutugon

El gradient ang namumukod sa header ng video na ito mula sa iba pa.


Ang nilalaman ng artikulo ay sumusunod sa aming mga prinsipyo ng etika ng editoryal. Upang mag-ulat ng isang pag-click sa error dito.

2 na puna, iwan mo na ang iyo

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan ng *

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.

  1.   TecnOku dijo

    Lahat sila nakumbinsi ako. Salamat

    1.    Manuel Ramirez dijo

      Walang anuman!