29 CSS goiburu eta orri-oina zure blogerako edo webgunerako

CSS orri-oina

Goiburuak eta orri oinak dira Funtsezko elementuak orrialde berria sortzerakoan web bat edo blog bat, edo beste ezer ez bada eguneratu behar ditugu egungo diseinuaren egungo estandarrak betetzeko. Gure webguneko bisitariak arreta handia eskaintzen duen espazioak dira. Horregatik, zaindu eta nahikoa mimatu behar ditugu funtzionalak izateaz gain, begietarako atseginak izan daitezen.

Horregatik partekatuko dugu 29 CSS goiburu eta orri-oina zure blogean edo webgunean erabil ditzakezun, eta horrela eman bilatzen zenuen kalitate puntu hori. Zerrenda hau pantaila osoko artikuluen goiburuek osatzen dute, baita tamaina estandarrak, goiburu finkoak edo finkoak, orri-oinak eta bideo-goiburu batzuk ere zure webguneari beste ikuspegi bat emateko.

Goiburu kurbatua

Goiburu kurbatua

Bidez identifikatzen den goiburua beheko aldean duen estilo kurbatua horrek oso goiburu berezia bihurtzen du webgune edo blog baterako. CSS hutsa da, beraz, dagoeneko denbora hartzen ari da zure web eszenaratzea probatzeko, zure blogean sartzen baduzu itxura izango baita.

Goiburuko irudia Parallax

Parallax

Parallax irudi efektu bikainarekin, goiburu hau honela identifikatzen da erabili CSS atzeko planoko irudiaren posizioa. Goiburuko irudia orrialdearen goialdean kokatuko litzateke efektu kode bikaina lortzeko.

Angeluzko goiburu finkoa

Angeluzko Goiburua

Goiburu hau ondo finkatuta dago web orriaren goialdean desberdindu lerro diagonal horrekin erabiltzailearen ikuspegiaren horizontal osoa zeharkatzen duena. CSS sasi-elementuak atzealdeko irudiarekin goiburu finkoa sortzeko nola erabil daitezkeen erakusten du.

Goiburu okerra

Okertu

CSS eta HTML, emandako adibidean agertzen den goiburu honetarako lerro diagonal horretan zehar pantaila osoa alde batetik bestera zeharkatzen duena.

Goiburua SVG animazioarekin

Svg kurbatua

Oso goiburu sinplea, erabiltzen duen arren zeure burua bereizteko SVG animazioa horietatik zerrenda honetan ditugu. Web orrialdeen zerrenda handira sar zaitezke hemendik SVG animazioekin.

Goiburu finkoa Div

Div finkoa

Parallax irudi efektuarekin, efektu bikainagatik nabarmentzen den goiburu finkoa atzeko irudi finkoarekin lortutakoa gainerakoa saguarekin korritzen dugun bitartean korritzen ari den bitartean.

Parallax geruza anitzeko ilustrazioa

Geruza anitzekoa

Buruz buruko goiburua Geruza anitzeko HTML, CSS eta JavaScript eta hori primeran erabil daiteke bideojokoen munduarekin lotutako webgune baterako. Akabera bikaina zehar.

Mezuaren goiburu finkoa

Mezu finkoa

Goiburu finkoa HTML, CSS eta Javascript-en egindako mezu bakoitzerako. Jaisten garen unean, goiburua minimizatzen da eta goialdean finkatuta.

Pantaila osoko goiburua animazioarekin

Uhin animatuak

Animazio bat ematen duen goiburua lateralki mugitzen da eta horrek efektu lasaigarria sortzen dio ikusleari.

Pantaila osoko Hero irudia

Heroiaren irudia

With zoom efektuahau goiburua pantaila osoan originaltasun handiko bat dela agerian dago. Ezin hobea bisitariak korritzeen erabilera handia egingo duen webgune baterako mugitzeko.

Flexbox botoiarekin 

Flexbox botoiarekin

Botoi bat bistaratzeko pantailaren zabalera osoa hartzen duen goiburua. Ezin hobea lurreratze orrietarako CSS flexbox-ekin.

Flexbox Hero goiburua

Flexbox heroia

Efektua duen goiburua paralaxa eta flexbox nahiko erraza batez ere bere diseinuaren dotoreziagatik nabarmentzen da.

Goiburu itsaskorra korritzean

Goiburu itsaskorra

Bere izenak dioen bezala, goiburu finkoa noiz saguarekin korritzen dugu mugitzerakoan gainerako web orria ikusteko.

Erantzunezko korritze itsaskorra

Erantzunezko korritua

Menua orriaren goialdera iristen denean efektu handiko beste goiburu finko bat da, zergatiketa une horretan finko jarraitzen du eta gunea korritzen jarrai dezakegu.

Korritu goiburua

Korritu goiburua

Gainerakoengandik desberdintzen da animazio egokia eta delikatua mugitzen garen heinean. Haren amaieran, oheburua goialdean finkatuta geratzen da.

Erantzunezko korritze goiburua

Erantzunezko korritze goiburua

Beste animazio bikaina goiburu hau gainerakoetatik bereiztu HTML, CSS eta JavaScript-ekin.

Goiburua Sartu / atera

animatu goiburua

Efektuak bereizten duen goiburua Korritu ondoren sartu / atera eta horrek errebotearen sentsazioa sortzen du.

Goiburua desagertzen da

Goiburua desagertzen da

Beste animazio efektu bat bitxia eta oso dotorea HTML, CSS eta Javascript-en.

Ezkutatuta dagoen goiburua

Auto ezkutatu

Honen arabera ezkutatzean goiburu ezberdina korritze bat animazio batekin erabiltzen dugu hori oharkabean pasatzen da baina kalitate handikoa.

Paralax orri-oina

Paralax orri-oina

Oinarri finkoa edo finkoa HTML, CSS eta Javascript-ekin. Of kalitate bikaina itzalarekin indarrean.

Orri-oina edukiaren eskalarekin

Orri-oinaren eskala

Kalitate handiko eta jatorrizko oin-orri bat harritu bisitaria web espazio hau erakusteko modu dotoreagatik.

Sare sozialen orri-oina

social media

Nabarmentzen den orri bat sare sozialetara eramaten duten botoiak ezagunena. Saguaren erakuslea sare sozial bakoitzaren gainean uztean gertatzen den animazioa nabarmentzen da.

Mugikorreko orri-oineko menu animatua

Oin-orri mugikor animatua

Oin-orri hau ikusteko web arakatzailearen leihoa murriztuz gero, ahal izango duzu aurkitu 2-3 atalak erabiltzaileak gailu mugikorrean aurki dezakeena. 767px-tan bistaratzen da.

Oinarri finko sinplea

Sinplea finkoa

HTML eta CSSn egindakoa da oin-orri sinplea, zalaparta handirik gabe.

Erreakzionatu bideoaren goiburua

Erreakzionatu bideoaren goiburua

Goiburua bideo sinplea React.js.

Bideoaren goiburua

Bideoaren goiburua

Beste goiburua bideo sinple batekin eta kalitate handikoa.

Pantaila osoko bideoaren goiburua Mix-Blend-ekin

Pantaila osoa

Erakutsi a pantaila osoko bideoa nahasketa modua erabiliz geruzan testua duena.

Bideo Goiburuko animazioa

Bideo goiburuko animazioa

Animazioa zen Adobe After Effects-ekin pertsonalizatua arakatzaile guztiekin bateragarria izateko. Ez du mugikorrean funtzionatzen.

Bideo goiburu sentikorra gradientearekin

Sentikorrena

El gradientea da nabarmentzen dena gainerako bideo goiburu honetara.


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

2 iruzkin, utzi zurea

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.

  1.   Technokua esan zuen

    Guztiek konbentzitu ninduten. Eskerrik asko

    1.    Manuel Ramirez esan zuen

      Ongi etorri!