29 záhlaví a zápatí CSS pro váš blog nebo web

Zápatí CSS

Záhlaví a zápatí jsou Základní prvky při vytváření nové stránky web nebo blog, nebo pokud nic jiného, ​​musíme je aktualizovat, aby splňovaly současné standardy webového designu. Jsou to prostory, kterým návštěvník našeho webu obvykle věnuje velkou pozornost, takže se o ně musíme starat a dostatečně je hýčkat, aby byly příjemné pro oči, kromě toho, že jsou funkční.

Z tohoto důvodu budeme sdílet 29 záhlaví a zápatí CSS, které můžete použít na svém blogu nebo webu, a tak mu dejte ten bod kvality, který jste hledali. Tento seznam se skládá ze záhlaví článků na celou obrazovku, stejně jako standardní velikosti, pevných nebo pevných záhlaví, zápatí a některých záhlaví videa, které vašemu webu poskytnou další perspektivu.

Zakřivená hlavička

Zakřivená hlavička

Záhlaví, které je identifikováno jeho zakřivený styl dole což z něj dělá velmi speciální záhlaví pro web nebo blog. Je to čistý CSS, takže otestování vašeho webového stagingu již nějakou dobu trvá, protože bude vypadat, pokud jej zahrnete do svého blogu.

Obrázek záhlaví Paralaxa

Parallax

Díky skvělému obrazovému efektu Parallax se tato hlavička identifikuje podle použijte pozici CSS pozadí obrázku. Obrázek záhlaví by byl umístěn v horní části stránky pro skvělý efektový kód.

Záhlaví pevně zalomené

Úhlová hlavička

Tato záhlaví je v horní části webové stránky dobře fixováno na rozlišit s touto úhlopříčkou který prochází celou vodorovnou rovinou pohledu uživatele. Ukazuje, jak lze pomocí pseudoelementů CSS vytvořit pevnou hlavičku s obrázkem na pozadí.

Zkosená hlavička

Šikmý

CSS a HTML pro tuto hlavičku, která je v daném příkladu charakterizována podél této diagonální čáry která protíná celou obrazovku z jedné strany na druhou.

Záhlaví s animací SVG

Zakřivené svg

Velmi jednoduchá hlavička, i když používá animace SVG, abyste se odlišili z nichž máme v tomto seznamu. Můžete přistupovat k velkému seznamu webových stránek s animacemi SVG odtud.

Opravená hlavička s Div

Div opraveno

S obrazovým efektem Paralaxy pevná hlavička, která vyniká velkým efektem dosažena s pevným obrázkem na pozadí, zatímco zbytek se posouvá, když se posouváme myší.

Vícevrstvá paralaxová ilustrace

Vícevrstvá

Hlavička skvělého zakončení Vícevrstvý HTML, CSS a JavaScript a kterou lze perfektně použít pro web související se světem videoher. Skvělý povrch po celou dobu.

Opravená hlavička příspěvku

Opravený příspěvek

Opravená hlavička pro každý příspěvek vytvořený v HTML, CSS a JavaScriptu. Ve chvíli, kdy se sjíždíme, záhlaví je minimalizováno a upevněn nahoře.

Záhlaví celé obrazovky s animací

Animované vlny

Záhlaví, které poskytuje animaci se pohybuje do strany a to na diváka působí relaxačně.

Obraz hrdiny na celou obrazovku

Obrázek hrdiny

s efekt zvětšeníTento záhlaví na celou obrazovku je odhalen jako jeden s velkou originalitou. Perfektní pro web, na kterém návštěvník bude skvěle využívat posouvání, aby se po něm pohyboval.

Flexbox s tlačítkem 

Flexbox s tlačítkem

Záhlaví, které zabírá celou šířku obrazovky k zobrazení tlačítka. Ideální pro vstupní stránky s flexboxem CSS.

Záhlaví Flexbox Hero

Flexbox hrdina

Záhlaví s efektem paralaxa a flexbox docela jednoduché která vyniká hlavně na eleganci svého designu.

Lepicí záhlaví na svitku

Lepkavá hlavička

Jak název napovídá, pevná hlavička, když při pohybu posouváme myší pro zobrazení zbytku webové stránky.

Reagující posouvání je rychlé

Citlivý svitek

Další pevná hlavička s velkým efektem, když nabídka dosáhne horní části stránky, proča v tu chvíli to zůstane pevné a můžeme web posouvat.

Posuňte záhlaví

Posuňte záhlaví

Od ostatních se liší o správná a delikátní animace jak se pohybujeme. Na jeho konci zůstává čelo postele upevněno nahoře.

Responzivní záhlaví rolování

Responzivní rolovací záhlaví

Další skvělá animace pro odlišit tuto hlavičku od ostatních s HTML, CSS a JavaScriptem.

Záhlaví In / Out

animovat záhlaví

Záhlaví, které se vyznačuje účinkem Vstup / výstup po rolování a to vytváří pocit odrazu.

Ztráta záhlaví

Ztráta záhlaví

Další efekt animace zvědavý a velmi elegantní v HTML, CSS a JavaScriptu.

Záhlaví, které je skryté

Automatické skrytí

Odlišná hlavička při skrytí podle používáme posouvání s animací to zůstává bez povšimnutí, ale velmi kvalitní.

Zápatí paralaxy

Zápatí paralaxy

Pevná nebo pevná zápatí s HTML, CSS a JavaScriptem. Z skvělá kvalita se stínováním v důsledku.

Zápatí s měřítkem obsahu

Stupnice zápatí

Vysoce kvalitní a originální zápatí pro ohromit návštěvníka pro elegantní způsob zobrazení tohoto webového prostoru.

Zápatí sociálních médií

sociální média

Zápatí, které vyniká tlačítka, která vedou k sociálním sítím nejznámější. Animace, která se objeví, když opustíte ukazatel myši nad každou ze sociálních sítí, vynikne.

Animované mobilní zápatí nabídka

Animovaná zápatí pro mobilní zařízení

Zmenšením okna webového prohlížeče k zobrazení této zápatí budete moci najděte 2-3 oddíly které uživatel může najít na mobilním zařízení. Zobrazuje se na 767px.

Zápatí jednoduché pevné

Jednoduché pevné

Vyrobeno v HTML a CSS je jednoduché zápatí bez velkých fanfár a rozkvětu.

Reagovat záhlaví videa

Reagovat záhlaví videa

Záhlaví s jednoduché video React.js.

Záhlaví videa

Video záhlaví

Další záhlaví s jednoduchým videem a velmi kvalitní.

Záhlaví videa na celou obrazovku se směsí

Celá obrazovka

Ukázat a video na celou obrazovku s textem na vrstvě pomocí režimu míchání.

Animace záhlaví videa

Animace záhlaví videa

Animace byla přizpůsobené pomocí Adobe After Effects aby byl kompatibilní se všemi prohlížeči. Na mobilu to nefunguje.

Responzivní záhlaví videa s přechodem

Citlivý

El gradient je to, co vyniká na toto video záhlaví od ostatních.


Obsah článku se řídí našimi zásadami redakční etika. Chcete-li nahlásit chybu, klikněte zde.

2 komentářů, nechte svůj

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   TecnOku řekl

    Všichni mě přesvědčili. dík

    1.    Manuel Ramírez řekl

      Nemáš zač!