Heddas logga

Webb­utveckling

Heddas logga

Färger

Om vi vill ändra färgen på något på vår hemsida så kan vi använda oss utav CSS — Cascading Style Sheets. När vi vill lägga till CSS-kod till vår hemsida så finns det tre olika sätt:

  1. Koppla det till ett enskilt element i vår HTML-kod.
  2. Lägga till regler i början av vår HTML-kod
  3. Ladda in regler från ett annat dokument till vår HTML-kod

Har man bara något väldigt litet som ska piffas upp så räcker alternativ ett. Om man ska göra stora förändringar i utseendet på en sida så kan alternativ två vara lämplig. Om man ska ha ett liknande utseende på flera olika sidor så är alternativ tre överlägset bäst.

Idag kommer vi att använda alternativ två som fungerar så här:

<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8"/>
		<title>CSS 1 - Färger</title>
		
		<style>
			/* Här skriver man CSS-kod*/
			/* Detta är en kommentar */
		</style>

	</head>

	<body>

	</body>

</html>

Det är i elementet <style> du skriver din CSS-kod.

Hur du ändrar vad

När du ska ändra på utseendet på hemsidan så behöver du först specificera vad det är du ska ändra på. Om det till exempel är p-elementen eller om det är hela sidan.

Om det är en sorts element du vill ändra på skriver du så här: 

p{
	/* Det här påverkar alla p element */
}

body{
/* Det här påverkar allt innanför <body>-taggarna */
}

h1{
	/* Det här ändrar på h1 element */
}
h2, h3, h4, h5, h6{
	/* Det här ändrar på alla andra rubriker */
}

Textfärg

Om du vill ändra på textfärgen så anger du color: färg;. Så om du vill ändra färgen på alla stycken skriver du: 

p{
	color: blue;
}

Du kan hitta en lista på alla tillåtna färgnamn här. Om du inte är nöjd med de ca 140 färger som finns fördefinierade kan du ange färgens RGB-kod i hexadecimal form. Hexdadecimal form ser ut typ så här: #A01F99. Där du anger värdena med siffrorna 0–F. De två första siffrorna anger hur mycket rött, de två mittersta mängden grönt och de två sista mängden blått. Färgen vit har så mycket färg det bara går och har koden: #FFFFFF. Färgen svart saknar färg och har koden: #000000. Du kan också ange färg med rgb: rgb(125,255,0)

Bakgrundsfärg

Om du vill ändra på bakgrundsfärgen så använder du kommandot background-color: färg du kan ändra på färgen på hela sidan i body eller på enskilda element-typer. Till exempel bara på onumrerade listor: 

ul{
	background-color: grey;
}

HSLA

HSLA står för Hue, Saturation, Light och Alpha. Detta är ett fjärde sätt att ange färg. 

p{
	background-color: hsl(300, 100%, 100%);
}

Det här är effekten av koden ovan

Ändra på L

Om vi sänker värdet på L: 

p{
	background-color: hsl(300, 100%, 75%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 100%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 100%, 25%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 100%, 0%);
}

Det här är effekten av koden ovan

Ändra på S

Om vi förändrar värdet på S: 

p{
	background-color: hsl(300, 100%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 75%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 25%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 0%, 50%);
}

Det här är effekten av koden ovan

Ändra på H

Om vi förändrar värdet på H: 

p{
	background-color: hsl(0, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(50, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(100, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(150, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(200, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(250, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(300, 50%, 50%);
}

Det här är effekten av koden ovan 

p{
	background-color: hsl(350, 50%, 50%);
}

Det här är effekten av koden ovan

Genomskinlighet

Om du vill göra din färg genomskinlig så finns det ett par olika sätt:

  1. RGBA
  2. HSLA
  3. Opacity

A i RGBA och HSLA står för alpha. Alpha-kanalen i en färg anger opaciteten som betyder hur genomskinlig den är. Oftast går värdet på A från 0–1 

p{
	background-color: rgba(255,255,255,1); /* Vitt med opacitet 1 */
}

Det här är effekten av koden ovan 

p{
	background-color: rgba(255,255,255,0.5); /* Vitt med opacitet 0.5 */
}

Det här är effekten av koden ovan

Här ser man hur färgen bakom texten lyser igenom. 

p{
	background-color: hsla(0,0%,100%,1); /* Vitt med opacitet 1 */
}

Det här är effekten av koden ovan 

p{
	background-color: hsla(0,0%,100%,0.5); /* Vitt med opacitet 0.5 */
}

Det här är effekten av koden ovan 

p{
	background-color: white; /* Vitt med opacitet 1 */
	opacity: 1
}

Det här är effekten av koden ovan 

p{
	background-color: white; /* Vitt med opacitet 0.5 */
	opacity: 0.5
}

Det här är effekten av koden ovan

Här märker vi att med det sista alternativet så sätter vi opaciteten på HELA text-stycket. Inklusive själva texten.

Färgval

Estetik anses ofta vara subjektivt och individuellt. Det jag tycker är vackert kan du tycka är gräsligt. Men det finns vissa saker som är ganska universiellt och som ökar tillgängligheten på sidan.

RGB vs. CMY

Red Green Blue

Tre överlappande färgcirklar i RGB-modellen

Skärmar består av flera ljuspunkter som grupperade kallas för pixlar och består av färgerna röd, grön och blå. Beroende på hur starkt varje lampa lyser så får man olika färger.

Cyan Magenta Yellow

Tre överlappande färgcirklar i CMY-modellen

Den här färgmodellen används när man trycker saker på papper. Den fungerar omvänt mot RGB, där istället för att man lyser med dem färger man vill ha absorberar dem färgar man inte vill ha och reflekterar dem färger som man vill ha.

När du målar med färger IRL så fungerar det så här.

Kontraster

När du använder färg på din sida så ska du tänka på hur färgerna kontrasterar mot varandra. Har du en ljus bakgrund så vill du använda dig av en mörk färg i förgrunden på det som är viktigt och ska synas. Om du har en mörk bakgrund bör du använda dig utav en ljus färg i förgrunden.

Färgblindhet

Det finns tre olika typer av färgblindhet och det är något man bör tänka på när man designar en hemsida. Om man väljer "fel" färger så kan information missas av somliga.

Texten som kommer är saxad från Vårdguiden.

Röd-grön

Den vanligaste formen av färgblindhet innebär att du har svårt att skilja på rött och grönt.

Då har du svårt att se skillnaden mellan färger som har delar av rött och grönt i sig. Du kan till exempel ha svårt att se skillnaden mellan blått och lila. Det beror på att lila är en blandning av blått och rött. Du kan också ha svårt att se skillnad mellan grönt och brunt eftersom brunt är en blandning av grönt och rött.

Röd-grön färgblindhet innebär alltså inte att du ser gräsmattan som röd eller stoppsignalen som grön. Utan det innebär att du har svårt att se skillnaden mellan rött och grönt.

En bild på färgpennor och hur normalseende respektive färgblinda ser dem

Gul-blå

Blå-gul färgblindhet är mer ovanlig. Men det innebär inte att du har svårt att skilja på färgerna blå och gul. Det heter blå-gul färgblindhet eftersom du har svårt att se skillnad mellan färger som befinner sig mellan blå och gul på färgskalan.

En bild på färgpennor och hur normalseende respektive färgblinda ser dem

Blå-gul färgblindhet innebär att du har svårt att se skillnaden mellan blå och grön och skillnaden mellan gul och rosa.

Det kan också vara svårt att till exempel skilja mellan olika nyanser av lila som uppfattas som blå. Andra färger kan också uppfattas lite annorlunda.

Total

Den typ av färgblindhet som gör att en person inte ser några färger alls utan ser världen i gråskala är mycket ovanligt.

Lösning

Eftersom totalfärgblindhet är ytterst ovanlig är det sällan man behöver tänka på det. Liknande med gul-blå färgblindhet. Istället är det bäst att fokusera på röd-grön blindhet.

Det vanligaste tipset är att undvika att ha rött och grönt tillsammans. Och att då istället försöka använda någon annan färg. En annan lösning är att istället jobba med mörk och ljus färg, eftersom de allra flesta ser skillnaden på mörk röd och ljus grön — oavsett vilken sorts färgblindhet. Det finns mycket info online om man är intresserad av att läsa mer.

Övningar

  1. Gör en hemsida för en påhittad förening, exempelvis: "Föreningen Gatstens Fantasterna (FGF)"
  2. På hemsidan ska all text ha en ljus färg.
  3. Bakgrundsfärgen på sidan ska vara mörk.
  4. Du ska ha en text på sidan som beskriver vad föreningen gör.
  5. Hemsidan ska ha en stor och prydlig rubrik
  6. Rubriken ska ha en annan färg än all annan text
  7. Föreningen ska ha en logotyp som visas under rubriken