CSSi täielik tagataust

CSSi täielik tagataust

CSSi täielik tagataust (nagu nimi ütleb) on mõeldud terve veebilehe ära katmiseks.

Tegemist on ünsagi toreda asjaga. See võib muuta veebilehe palju ilusamaks ja ka interaktiivsemaks. Lisaks sellele on tegemist viimase aja ühe suurima trendiga, nii et selle ära õppimine tuleb kindlasti igati kasuks.

Aga ega ma rohkem rääkida ei tahakski. Let’s start coding 🙂 !

CSSi tagataust pildina

Tegemist on üsna lihtsa ja otsese lahendusega, mis erilist mõistust ei nõua.

Kuna tegemist on täielikku tagataustaga ehk tagataust on terve veebilehe suurune (ning lisaks ka veel responsive), siis tuleb paar omadust juurde, mis tavaliselt tagatausta lisamisel ei tule.

html, body{
      background-image: url("sinu_tagatausta_pilt"); /*Tagatausta pilt*/
      background-size: cover; /*Katab ära terve veebilehe*/
      background-repeat: no-repeat; /*Ei korda tagatausta*/
      background-position: center center; /*Tagataust keskele*/
      background-attachment: fixed; /*Tagataust käiks veebilehe kerimisega kaasas*/
}

Nagu näha on lahendus üsnagi kergesti mõistetav ja ka veebilehte lisatav.

Näite võid leida siit. Katsetage ka responsive disaini (ärge teksti tähele pange, jälgige ainult tagatausta).

Natukene rohkem informatsiooni selle võtte kohta võid leida siit.

CSSi tagataust videona

Nüüd ma natukene valetan kui ütlen, et see nõuab ainult CSSi. Tegelikult peab siin kasutama ka natukene HTMLi abi. Aga ma arvan, et see ei ole eriline segav faktor.

Kõigepealt tuleks luua siis vastav HTML.

Selleks saab väga hästi kasutada HTML5 <video> elementi.

<video class="video-background" playsinline autoplay muted loop>
    <source src="sinu_tagatausta_pilt" type="video/mp4" />
</video>

Selle HTMLi koodi mina paneks kas <body> esimeseks või viimaseks lapselemendiks.

Kõiki parameetreid saab ka muuta enda nägemuse järgi, aga praegused parameetrid seletan siin lahti.

playsinline="" – takistab videol minemast ekraanisuuruseks (ei kata ära teisi elemente)
autoplay="autoplay" – mängib video koheselt, ilma kasutaja käsuta
muted="muted" – mängib video ilma hääleta
loop="loop" – kui video lõpeb, algab video automaatselt uuesti

<video> elemendi teised parameetrid ja nende väärtused võib leida siit.

Nüüd lõpuks saame hakata CSSi kirjutama.

.video-background{
  position: fixed; /*Tagataust käiks veebilehe kerimisega kaasas ja jälgiks z-index'it*/

  /*Suurus*/
  min-width: 100%; /*Minimaalne laius 100%*/
  min-height: 100%; /*Minimaalne kõrgus 100%*/
  width: auto; /*Aspect ratio jääks õigeks*/
  height: auto; /*Aspect ratio jääks õigeks*/

  /*Paigutamine*/
  top: 50%; /*Võtame 50% ülevast äärest*/
  left: 50%; /*Võtame 50% vasakust äärest*/
  transform: translateX(-50%) translateY(-50%); /*Liigutame videot 50% võrra tagasi, et video jääks keskele (arvestab ka video laiust ja kõrgust)*/
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: -100; /*Viime video võimalikult taha, et siia saaks teised elemendid peale renderdada*/
}

Kahjuks ei saa videod korralikult mängida, kui tegemist on kas nutitelefoniga või mõne muu seadmega, millel on väike ekraan.

Et efekti mitte täielikult ära kaotada, siis peaks lisama väikeste ekraanide puhul thumbnaili videost. Seda saab teha läbi CSSi media queride.

@media only screen and (max-width: 768px){
  .video-background{
    display: none;
  }

  body{
    background-image: url("sinu_thumbnail");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
  }
}

Kogu CSS näeb välja umbes selline

.video-background{
  position: fixed; 

  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: -100;
}

@media only screen and (max-width: 768px){
  .video-background{
    display: none;
  }

  body{
    background-image: url("sinu_thumbnail");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
  }
}

Näite võid leida siit. Thumbnailiks kasutasin esimese näite tagatausta pilti. Testi ka responsivust.

Rohkem informatsiooni selle võtte kohta leiad siit.

 

Ja ongi CSSi täielik tagataust õpitud. Polnudki nii keeruline ju. Kui küsimusi tekkis, siis küsi julgelt kommentaarides 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *