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.
Všetci ma presvedčili. Vďaka
Nie je začo!