29 CSS-kop- en voetteksten voor uw blog of website

De kop- en voetteksten zijn Essentiële elementen bij het maken van een nieuwe pagina web of een blog, of als er niets anders is, moeten we ze bijwerken om te voldoen aan de huidige normen voor webontwerp. Het zijn ruimtes waar de bezoeker van onze website meestal veel aandacht aan besteedt, dus we moeten voor ze zorgen en ze voldoende in de watten leggen, zodat ze niet alleen functioneel zijn, maar ook een lust voor het oog.

Dat is waarom we gaan delen 29 CSS-kop- en voetteksten die u op uw blog of website kunt gebruiken, en geef het zo dat punt van kwaliteit waarnaar u op zoek was. Deze lijst bestaat uit artikelkopteksten op volledig scherm, evenals de standaardgrootte, vaste of vaste kopteksten, voetteksten en enkele videokopteksten om uw website een ander perspectief te geven.

Gebogen header

Een koptekst die wordt aangeduid met zijn gebogen stijl aan de onderkant waardoor het een heel bijzondere header is voor een website of blog. Het is pure CSS, dus het kost al tijd om je webstaging te testen, zoals het eruit zal zien als je het in je blog opneemt.

Header afbeelding Parallax

Met een geweldig Parallax-beeldeffect identificeert deze header zichzelf door gebruik CSS achtergrondafbeelding positie. De koptekstafbeelding zou bovenaan de pagina worden geplaatst voor een geweldige effectcode.

Header vast onder een hoek

Deze koptekst is goed bevestigd aan de bovenkant van de webpagina differentiëren met die diagonale lijn dat de volledige horizontale lijn van het zicht van de gebruiker kruist. Het laat zien hoe CSS-pseudo-elementen kunnen worden gebruikt om een ​​vaste header met een achtergrondafbeelding te maken.

Scheve koptekst

CSS en HTML voor deze header die in het gegeven voorbeeld wordt gekenmerkt langs die diagonale lijn dat het hele scherm van de ene naar de andere kant doorkruist.

Header met SVG-animatie

Een heel eenvoudige koptekst, hoewel het een SVG-animatie om u te onderscheiden van degenen die we op deze lijst hebben. U hebt toegang tot een grote lijst met webpagina's met SVG-animaties vanaf hier.

Vaste header met Div

Met Parallax-beeldeffect, een vaste header die opvalt door het geweldige effect bereikt met de vaste achtergrondafbeelding terwijl de rest scrolt terwijl we scrollen met de muis.

Parallax meerlaagse illustratie

Een kopbal met een geweldige finish erin Meerlaagse HTML, CSS en JavaScript en die perfect kan worden gebruikt voor een website die verband houdt met de wereld van videogames. Geweldige afwerking overal.

Vaste berichtkop

Een vaste header voor elk bericht gemaakt in HTML, CSS en JavaScript. Op het moment dat we naar beneden rollen, de koptekst wordt geminimaliseerd en bevestigd aan de bovenkant.

Koptekst op volledig scherm met animatie

Een header die een animatie biedt die beweegt lateraal en dat heeft een ontspannend effect op de kijker.

Hero-afbeelding op volledig scherm

met een zoomeffectis koptekst op volledig scherm het wordt onthuld als een van grote originaliteit. Perfect voor een website waarin de bezoeker veel gebruik gaat maken van scrollen om er doorheen te bewegen.

Flexbox met knop 

Een koptekst die de volledige breedte van het scherm in beslag neemt om een ​​knop weer te geven. Perfect voor bestemmingspagina's met CSS flexbox.

Flexbox Hero-header

Een kopbal met effect parallax en flexbox vrij simpel dat vooral opvalt door de elegantie van het ontwerp.

Sticky Header op scroll

Zoals de naam al doet vermoeden, een vaste header wanneer we scrollen met de muis tijdens het verplaatsen om de rest van de webpagina te zien.

Responsief scrollen Sticky

Nog een vaste koptekst met een groot effect wanneer het menu de bovenkant van de pagina bereikt, waarome op dat moment blijft het vast en we kunnen door de site blijven scrollen.

Koptekst scrollen

Het verschilt van de rest door juiste en delicate animatie terwijl we bewegen. Aan het einde ervan blijft het hoofdeinde bovenaan vast.

Responsieve scroll-koptekst

Nog een geweldige animatie voor onderscheid deze koptekst van de rest met HTML, CSS en JavaScript.

Header in / uit

Een koptekst die zich onderscheidt door het effect In / uit na scrollen en dat veroorzaakt het gevoel van terugveren.

Header vervaagt

Nog een animatie-effect nieuwsgierig en heel elegant in HTML, CSS en JavaScript.

Header die is verborgen

Een andere koptekst bij het verbergen volgens we gebruiken scrollen met een animatie dat blijft onopgemerkt maar van hoge kwaliteit.

Parallax-voettekst

Een vaste of vaste voettekst met HTML, CSS en JavaScript. Van geweldige kwaliteit met schaduw in werkelijkheid.

Voettekst met inhoudsschaal

Een kwalitatief hoogwaardige en originele footer voor verbaas de bezoeker voor de gracieuze manier om deze webruimte weer te geven.

Voettekst op sociale media

Een voettekst die opvalt de knoppen die naar sociale netwerken leiden bekendste. De animatie die optreedt wanneer u de muisaanwijzer op elk van de sociale netwerken plaatst, valt op.

Geanimeerd mobiel voettekstmenu

Door uw webbrowservenster te verkleinen om deze voettekst te zien, kunt u zoek de 2-3 secties die de gebruiker kan vinden op een mobiel apparaat. Het wordt weergegeven op 767px.

Eenvoudige vaste voettekst

Gemaakt in HTML en CSS is een eenvoudige voettekst zonder veel tamtam en bloeien.

Reageer Video Header

Een kopbal met eenvoudige video React.js.

Video-koptekst

anders koptekst met eenvoudige video en van hoge kwaliteit.

Video-header op volledig scherm met Mix-Blend

Toon een video op volledig scherm met tekst op laag in de mix-blend-modus.

Video Header-animatie

De animatie was aangepast met Adobe After Effects compatibel zijn met alle browsers. Het werkt niet op mobiel.

Responsieve videokop met verloop

El gradiënt is wat opvalt naar deze videokop van de rest.