Webbteknik 1

Laboration 3C

Färger och bakgrund

I denna laboration ska du experimentera med färger och bakgrundsbilder.

Förberedelser

  • Öppna mappen L3 i Visual Studio Code (VSC).
  • Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server
    • Du ska arbeta vidare med den CSS-fil som du använde i föregående laboration.

Färger

  • Lägg in background-color i regeln för body. Välj först någon valfri färg och ta sedan fram färgväljaren, genom att föra muspekaren över färgen. Klicka i färgpaletten, för den färg du vill ha.

    • Se hur färgen ändras på sidan i webbläsaren, då du klickar på olika färgnyanser i färgväljaren.

  • I regeln för body lägger du också in stil för text/förgrundsfärg, color, t.ex. svart färg, för att få bra kontrast (om du valt en ljus bakgrundsfärg).

  • Lägg även in color i regeln för header med någon annan färg.

    • Färgen används inte för rubrikerna i header, eftersom du redan har en annan regel för h1, h2, h3 där färgen sätts för alla dessa rubriker på webbsidan. Ändra därför regeln för h1, h2, h3 till main h1, main h2, main h3, så den endast gäller för rubriker inom main.
    • Sedan kan du välja önskad färg för texten i header.

Bakgrundsbild

  • Lägg in en bakgrundsbild i header, som endast ska visas på första sidan.

    • Lägg in id="firstPageHeader" i header i dokumentet index.html.

    • I CSS-koden lägger du in en regel för #firstPageHeader med background-image: url(); Inom parentesen skriver du en referens till filen trees.jpg.

      • Använd en relativ adress till bilden. Obs, utgå från css-dokumentets placering.
      • Det ska inte vara några citattecken kring adressen.

  • Sätt height till 300px i regeln för #firstPageHeader.

  • Experimentera med background-size och background-position. Eventuellt får du också justera värdet för height och färgen för texten i color

  • Kontrollera att bakgrundsbilden endast visas på den första sidan.

Genomskinlig bakgrundsfärg

  • Skapa en regel för rubrikelementen inom header, dvs header h1, header h2 och lägg in en vit bakgrundsfärg.
  • Peka på färgen, så att färgpaletten dyker upp. Reglaget närmast färgrutan reglerar genomskinligheten. Dra detta nedåt för att göra bakgrundsfärgen genomskinlig.
  • Vill du inte ha något avstånd mellan bakgrunden i raderna, kan du lägga till margin: 0; i regeln. Sedan kan du lägga till padding med önskat värde, för att ändå få ett avstånd mellan textraderna.

Gradient bakgrundsfärg

  • Ändra background-color i regeln för body till vit färg.
  • Lägg in en gradient bakgrundsfärg med background-image: linear-gradient(#217692, #ffffff); Experimentera med olika färger.
    • Observera att man här använder background-image och inte background-color.
  • Begränsa bakgrundens storlek med background-size 100% 300px;
    • Det första värdet är bredd och det andra är höjd.
  • Lägg också till background-repeat: no-repeat; så att bakgrunden inte upprepas.
  • Eftersom övergången inte täcker hela ytan, bör färgen i background-color vara densamma som i den andra färgen i linear-gradient.
  • Experimentera med olika värden i background-size, t.ex. 100% 50%.
    • Ändrar du storleken, så att bredden är mindre och höjden är 100%, t.ex. 50% 100% får du också ändra riktning på övergången. Prova att lägga till to right i linear-gradient, dvs linear-gradient(to right, #217692, #ffffff)
      • I riktningen kan du använda left, right, top och bottom eller en kombination av dem, t.ex. to bottom right. En kombination ger en snett riktad övergång, men ger nog bäst effekt om bakgrunden fyller hela ytan.

Validera