29 CSS-kop- en voettekste vir u blog of webwerf

CSS-voetskrif

Die kop- en voetskrif is Noodsaaklike elemente by die skep van 'n nuwe bladsy web of 'n blog, of indien niks anders nie, moet ons dit opdateer om aan die huidige standaarde van webontwerp te voldoen. Dit is ruimtes waaraan die besoeker op ons webwerf gewoonlik baie aandag skenk, daarom moet ons na hulle omsien en hulle genoeg vertroetel sodat dit vir die oog aangenaam is, buiten dat dit funksioneel is.

Om hierdie rede gaan ons deel 29 CSS-kop- en voettekste wat u op u blog of webwerf kan gebruik, en gee dit sodoende die punt van kwaliteit waarna u gesoek het. Hierdie lys bestaan ​​uit volskerm-artikelkopskrifte, sowel as die standaardgrootte, vaste of vaste koptekste, voetskriftekens en sommige video-opskrifte om 'n ander perspektief op u webwerf te gee.

Geboë kop

Geboë kop

'N Kop wat geïdentifiseer word deur sy geboë styl aan die onderkant wat dit 'n baie spesiale kop vir 'n webwerf of blog maak. Dit is suiwer CSS, en dit neem dus al tyd om op u web te toets hoe dit sal lyk as u dit by u blog insluit.

Kopopskrif Parallaks

Parallax

Met 'n uitstekende Parallax-beeldeffek, identifiseer hierdie kopstuk homself deur gebruik CSS agtergrond-beeld posisie. Die kopbeeld sal aan die bokant van die bladsy geplaas word vir 'n goeie effek-kode.

Hoekige vaste kop

Hoekige kop

Hierdie kop is goed aan die bokant van die webblad vasgestel op onderskei met daardie skuins lyn wat die hele horisontaal van die gebruiker se aansig oorsteek. Dit wys hoe CSS-pseudo-elemente gebruik kan word om 'n vaste kop met 'n agtergrondafbeelding te skep.

Skewe kop

Skeef

CSS en HTML vir hierdie opskrif wat in die gegewe voorbeeld gekenmerk word langs daardie skuins lyn wat die hele skerm deurkruis van die een kant na die ander.

Kop met SVG-animasie

Geboë svg

'N Baie eenvoudige kop, alhoewel dit gebruik word 'n SVG-animasie om jouself te onderskei waarvan ons in hierdie lys is. U het toegang tot 'n groot lys webbladsye met SVG-animasies van hier af.

Vaste kop met Div

Div vasgestel

Met Parallax beeldeffek, 'n vaste kop wat uitstaan ​​vir die groot effek bereik met die vaste agtergrondbeeld terwyl die res blaai terwyl ons met die muis blaai.

Parallakse meerlaagse illustrasie

Meerlaag

'N Kopskop met 'n wonderlike afwerking in Meerlaagige HTML, CSS en JavaScript en dit kan perfek gebruik word vir 'n webwerf wat verband hou met die wêreld van videospeletjies. Groot afwerking deurgaans.

Vaste poskopkop

Vaste pos

'N Vaste koptekst vir elke pos wat in HTML, CSS en JavaScript gemaak word. Die oomblik as ons afrol, die kop word geminimaliseer en aan die bokant vasgemaak.

Volskermkopkop met animasie

Geanimeerde golwe

'N Kop wat 'n animasie bied wat beweeg lateraal en dit veroorsaak 'n ontspannende effek op die kyker.

Heldbeeld volskerm

Heldbeeld

met 'n zoom-effekDit kop volskerm dit word geopenbaar as een van groot oorspronklikheid. Ideaal vir 'n webwerf waarop die besoeker baie gebruik sal maak om te blaai.

Flexbox met knoppie 

Flexbox met knoppie

'N Kop wat die hele breedte van die skerm neem om 'n knoppie te vertoon. Ideaal vir bestemmingsbladsye met CSS flexbox.

Flexbox-heltekopskrif

Flexbox held

'N Kop met effek parallaks en flexbox redelik eenvoudig wat veral uitstaan ​​vir die elegansie van die ontwerp.

Sticky Header op blaai

Taai kop

Soos sy naam aandui, 'n vaste kop wanneer ons blaai met die muis as ons beweeg om die res van die webblad te sien.

Responsiewe blaai taai

Responsiewe blaai

Nog 'n vaste opskrif met groot effek wanneer die spyskaart bo-aan die bladsy kom, waaromen op daardie oomblik bly dit vas en ons kan die bladsy bly blaai.

Blaai kop

Blaai koptekst

Dit verskil van die res deur behoorlike en fyn animasie soos ons beweeg. Aan die einde daarvan bly die hoofstuk aan die bokant vas.

Responsiewe rolopskrif

Responsiewe skuifkop

Nog 'n wonderlike animasie vir onderskei hierdie opskrif van die res met HTML, CSS en JavaScript.

Kopstuk In / uit

kop aan te gee

'N Kop wat deur die effek onderskei word In / uit na blaai en dit lewer die sensasie van rebound.

Kopskrif vervaag

Kopskrif vervaag

Nog 'n animasie-effek nuuskierig en baie elegant in HTML, CSS en JavaScript.

Kop wat versteek is

Versteek outomaties

'N Ander kopkop as daar volgens ons gebruik blaai met 'n animasie dit bly ongemerk maar van groot gehalte.

Parallaks voetskrif

Parallaks voetskrif

'N Vaste of vaste voetskrif met HTML, CSS en JavaScript. Van uitstekende gehalte met skadu in effek.

Voetskrif met inhoudskaal

Voetskrifskaal

'N hoë gehalte en oorspronklike voetskrif vir verstom die besoeker vir die sierlike manier om hierdie webruimte te vertoon.

Voetskrif vir sosiale media

social media

N voetskrif wat uitstaan ​​vir die knoppies wat lei tot sosiale netwerke bekendste. Die animasie wat plaasvind wanneer u die muiswyser oor elkeen van die sosiale netwerke laat, val op.

Geanimeerde mobiele voetskrifmenu

Geanimeerde voetskrif mobiele

Deur die venster van die webblaaier te verminder om hierdie voetskrif te sien, kan u dit doen vind die 2-3 afdelings wat die gebruiker op 'n mobiele toestel kan vind. Dit word 767px vertoon.

Eenvoudige vaste voetskrif

Eenvoudige vaste

Gemaak in HTML en CSS is 'n eenvoudige voetskrif sonder veel fanfare en floreer.

Reageer videoopskrif

Reageer videoopskrif

N kop met eenvoudige video React.js.

Video-opskrif

Video-opskrif

Ander kop met 'n eenvoudige video en van groot gehalte.

Volledige skerm video-opskrif met mengmengsel

Volskerm

Toon a volledige skerm video met teks op laag met behulp van mengmengsel-modus

Video Header animasie

Video-koptekst animasie

Die animasie was aangepas met Adobe After Effects om versoenbaar te wees met alle blaaiers. Dit werk nie op mobiele toestelle nie.

Responsiewe video-opskrif met gradiënt

Responsieve

El gradiënt is wat uitstaan na die video-opskrif van die res.


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

2 kommentaar, los joune

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.

  1.   TecnOku dijo

    Hulle het my almal oortuig. Dankie