29 hlavičiek a päty CSS pre váš blog alebo web

Hlavičky a päty sú Základné prvky pri vytváraní novej stránky web alebo blog, alebo ak už nič iné, musíme ich aktualizovať, aby vyhovovali súčasným štandardom webdizajnu. Jedná sa o priestory, ktorým návštevník našej webovej stránky zvyčajne venuje veľkú pozornosť, a preto sa o ne musíme starať a dostatočne ich rozmaznávať, aby boli okrem funkčných aj príjemné pre oči.

Preto sa budeme deliť 29 hlavičiek a päty CSS, ktoré môžete použiť na svojom blogu alebo webovej stránke, a tým mu dajte bod kvality, ktorý ste hľadali. Tento zoznam sa skladá z hlavičiek článkov na celú obrazovku, ako aj zo štandardnej veľkosti, pevných alebo pevných hlavičiek, päty a niektorých hlavičiek videí, ktoré poskytujú vášmu webovému serveru ďalší uhol pohľadu.

Zakrivená hlavička

Hlavička, ktorá je označená jeho zakrivený štýl v dolnej časti čo z neho robí veľmi špeciálnu hlavičku pre web alebo blog. Je to čistý CSS, takže si už vyžaduje čas, aby ste si vo svojom webovom testovaní vyskúšali, ako bude vyzerať, ak ho zahrniete do svojho blogu.

Obrázok hlavičky Paralaxa

Vďaka skvelému obrazovému efektu Paralaxy sa táto hlavička identifikuje podľa použite pozíciu pozadia CSS. Obrázok hlavičky by bol umiestnený v hornej časti stránky, aby poskytoval vynikajúci kód.

Uhlová pevná hlavička

Táto hlavička je v hornej časti webovej stránky dobre pripevnená na rozlíšiť s touto diagonálnou čiarou ktorá pretína celú horizontálu pohľadu používateľa. Ukazuje, ako je možné pomocou pseudo prvkov CSS vytvoriť pevnú hlavičku s obrázkom na pozadí.

Šikmá hlavička

CSS a HTML pre túto hlavičku, ktorá je v danom príklade charakterizovaná pozdĺž tejto diagonálnej čiary ktorá prechádza celou obrazovkou z jednej strany na druhú.

Hlavička s animáciou SVG

Veľmi jednoduchá hlavička, aj keď sa používa animáciu SVG, aby ste sa odlíšili z tých, ktoré máme na tomto zozname. Máte prístup k veľkému zoznamu webových stránok s animáciami SVG odtiaľto.

Opravená hlavička s Div

S obrazovým efektom Paralaxy pevná hlavička, ktorá vyniká veľkým efektom dosiahnuté s pevným obrázkom na pozadí, zatiaľ čo zvyšok sa posúva pri posúvaní myšou.

Parallaxová viacvrstvová ilustrácia

Hlavička so skvelým zakončením v Viacvrstvové HTML, CSS a JavaScript a ktoré sa dá perfektne použiť pre web súvisiaci so svetom videohier. Skvelé zakončenie.

Opravená hlavička príspevku

Pevná hlavička pre každý príspevok vytvorený v HTML, CSS a JavaScript. V okamihu, keď sa skotúľame, hlavička je minimalizovaná a upevnené v hornej časti.

Hlavička na celú obrazovku s animáciou

Hlavička, ktorá ponúka animáciu sa pohybuje bočne a to na diváka pôsobí uvoľňujúco.

Obrázok hrdinu na celú obrazovku

s efekt zväčšeniaje hlavička na celú obrazovku odhaľuje sa ako prejav veľkej originality. Ideálne pre webovú stránku, na ktorej návštevník bude veľmi dobre rolovať.

Flexbox s tlačidlom 

Hlavička, ktorá zaberá celú šírku obrazovky a zobrazuje tlačidlo. Ideálne pre cieľové stránky s flexboxom CSS.

Hlavička Flexbox Hero

Hlavička s efektom paralaxa a flexbox celkom jednoduché ktorá vyniká predovšetkým na elegancii svojho dizajnu.

Prilepená hlavička na zvitku

Ako naznačuje jeho názov, pevná hlavička, keď pri pohybe rolujeme myšou aby ste videli zvyšok webovej stránky.

Rýchle reagujúce posúvanie

Ďalšia pevná hlavička veľkého efektu, keď sa ponuka dostane do hornej časti stránky, prečoa v tej chvíli to zostane pevné a môžeme stránku neustále posúvať.

Posuňte hlavičku

Líši sa od zvyšku správna a jemná animácia ako sa hýbeme. Na jeho konci zostáva čelo postele pripevnené v hornej časti.

Responzívna hlavička rolovania

Ďalšia skvelá animácia pre odlíšiť túto hlavičku od zvyšku s HTML, CSS a JavaScript.

Hlavička dovnútra / von

Hlavička, ktorá sa líši podľa efektu Vstup / výstup po rolovaní a to vyvoláva pocit odrazu.

Vyblednutie hlavičky

Ďalší efekt animácie zvedavý a veľmi elegantný v HTML, CSS a JavaScripte.

Hlavička, ktorá je skrytá

Odlišná hlavička pri skrývaní podľa používame posúvanie s animáciou ktorý zostáva nepovšimnutý, ale má vynikajúcu kvalitu.

Päta paralaxy

Pevná alebo pevná päta s formátmi HTML, CSS a JavaScript. Z skvelá kvalita s tienením v skutočnosti.

Päta s mierkou obsahu

Vysoko kvalitná a originálna päta pre ohromiť návštevníka pre elegantný spôsob zobrazenia tohto webového priestoru.

Pätka sociálnych médií

Päta, ktorá vyniká tlačidlá vedúce k sociálnym sieťam najznámejšie. Vyniká animácia, ktorá sa vyskytne, keď kurzor myši opustíte každú zo sociálnych sietí.

Animované menu päty pre mobil

Zmenšením okna webového prehliadača na zobrazenie tejto päty budete môcť nájdite tie 2-3 sekcie ktoré môže používateľ nájsť na mobilnom zariadení. Je zobrazený na 767px.

Päta jednoduchá pevná

Vytvorené v HTML a CSS je jednoduchá päta bez veľkých fanfár a rozkvetu.

Reagovať Video Header

Hlavička s jednoduché video React.js.

Hlavička videa

Otro hlavička s jednoduchým videom a skvelej kvality.

Celá obrazovka Video Header s Mix-Blend

Ukázať a video na celú obrazovku s textom na vrstve pomocou režimu zmiešavania.

Animácia hlavičky videa

Animácia bola prispôsobené pomocou aplikácie Adobe After Effects kompatibilný so všetkými prehliadačmi. Na mobile to nefunguje.

Responzívna hlavička videa s prechodom

El gradient je to, čo vyniká do tejto hlavičky videa od ostatných.