Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Front End Engineer > CSS > Flashcards

CSS Flashcards

1
Q

Hva står CSS for?

A

Cascading Style Sheets

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Hvordan henvise til et CSS-script?

A

link href=”style.css” rel=”stylesheet”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Hvordan inkludere inline CSS?

A

style=”xxx”. f.eks. style=”color:blue;”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

hvordan ser p style=”color:blue” ut i normal CSS?

A

p {
color: blue;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Hva er en CSS-selektor?

A

The beginning of the ruleset used to target the element that will be styled.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

hva er ulempen med inline styling?

A

Da må du repetere style for hvert element hvor du skal bruke det

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

hvor plasserer du et internt stylesheet?

A

Inne i head-taggen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

hvilken tagg brukes for å linke til en ekstern CSS?

A

link-taggen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

hvilket attributt i link-taggen brukes for å si at dette er et stylesheet?

A

link rel=”stylesheet”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Hva gjør CSS-selektoren * (stjerne) ?

A

Velger absolutt alt. F.eks. setter teksten for alle elementer

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

hvordan lager du en CSS-selektor for en klasse?

A

.navn {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Hvordan kan man henvise til flere CSS-klasser fra samme class-attributt?

A

med mellomrom mellom hvert navn. F.eks. p class=”a b c”

.a {

}
.b {

}
.c {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

hvordan lager du en CSS-selektor for en id?

A

navn {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

hvordan lage en selektor for f.eks. attributtet href?

A

[href] {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Hvordan lage en CSS-selektor for alle attributter som har ordet “winter” i seg?

A

img[src*=’summer’] {
height: 100px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Hva er en CSS pseudo-klasse?

A

En klasse som referer til en handling (f.eks. mouseover). Du bruker kolon for å henvise til dem. f.eks. p:hover {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Hva er best practice for å style elementer med CSS?

A

Begynne med stylingen som har minst spesifisitet, slik at det er lettere å endre

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

hvilken CSS-selektor velges hvis det er flere i konflikt?

A

den mest spesifikke. F.eks. en id-selektor vinner over en klasse-selektor

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

hvordan henvise til H1 med klassen “special” spesifikt?

A

h1.special {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

CSS, hvordan vise til descendant fra “li” under klassen “main-list” ?

A

.main-list li {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Hvordan kan du skreddersy tekst med CSS?

A

font-family, font-size, font-weight, text-align

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Hva er font-weight?

A

Hvor tykk teksten er. f.eks. font-weight: bold

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Hva gjør denne:

.caption {

}

A

css-selektor for en klasse som heter “caption”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Hvordan styre gjennomsiktighet?

A

opacity: 0.75 (setter gjennomsiktigheten til 75 %)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

hvordan velge at en setting i en selektor skal overstyre alt annet?

A

!important. F.eks. p {
color: blue !important;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

hvordan sette størrelsen på et bilde?

A

img {
height:150px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

fargelegg alle p-elementer av klassen “time”

A

p.time {
color: red;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Hva viser styles-tabben?

A

Den viser all CSS-koden som gjelder for det valgte elementet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Hvordan kan man inspisere et element uten å klikke på linker, interaktivitet, etc..

A

Velge bildet av musepekekeren i dev-konsollen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Hvordan kan du teste javascript direkte?

A

skrive inn koden i “console” i devtools

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Hvordan finner du ubrukt kode?

A

CTRL+SHIFT+P når du er inne i devtools. skriv Coverage. Trykk på “stop recording coverage” når du er ferdig

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Hvor kan du se og manipulere cookies i devtools?

A

Gå til applications-cookies

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Hvorfor bør man bruke f.eks. VS Code og ikke bare notepad++?

A

fordi VS Code har autocompletion og egenskaper som gjør det mye raskere å utvikle kode

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Hva bør man helst gjøre hvis man skal fargelegge en farge som gjelder for et enkelt element?

A

For ryddighetens skyld - ikke bruke inline css med style=…, men legge inn en id=xxx, og henvise til den med #id { … } fra CSS-filen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

hva er negativt her? div class=article. Når behøver du å gjøre noe sånt?

A

det finnes en semantisk tagg allerede som heter article. Du behøver å gjøre dette hvis du har flere artikler på samme side med forskjellig stil.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Hva er forskjellen på semantisk og ikke-semantisk CSS?

A

Ikke-semantisk formidler ikke hva klassen egentlig beskriver F.eks. “grid row” er ikke-semantisk. “product” er semantisk.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Hvordan gjøre noe mer semantisk?

A
  • Ord istedenfor forkortelser
  • Du skal umidellbart kunne lese hva som skjer. Ikke måtte nøste opp CSS for å se det.
  • Det skal være klart hva som beskrives. F.eks. bakgrunnen til et element
  • Du bør prøve å ha enkel og kort HTML som ikke er lang på grunn av komplekse CSs-navn og sammensetninger.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

Hvorfor bruke semantisk CSS?

A

Lettere å teste med automatisk regresjonstesting, mindre vedlikehold, lettere debugging, i tråd med standarder, tilstander kan styles lettere, lettere å lese, lettere å lage en responsiv side, lettere å finne ting

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Hva sier heksadesimalen som beskriver en farge i CSS?

A

Rød + Blå + grønn

f.eks. #8FBC8F

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

hvordan kan du definere noe som RGB istedenfor hex?

A

h1 {
color: rgb(23, 45, 23);
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

hvor mange farger kan RGB representere?

A

256 * 256 * 256 = 16,777,216

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

hva er HSL?

A

hue saturation-lightness

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

gi et eksempel på hue saturation-lightness, og forklar hvordan det fungerer

A

color: hsl(120, 60%, 70%);
120 - antall grader på et fargehjul.
60 % - hvor intens fargen er
70 %: Hvor lys fargen er

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

forklar color: hsl(120, 60%, 70%);

A

120 - antall grader på et fargehjul.
60 % - hvor intens fargen er
70 %: Hvor lys fargen er

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

hvorfor bruke HSL istedenfor RGB?

A

Fordi det er lettere å justere lys og intensitet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

hvordan styre gjennomsiktigheten til hsl?

A

hsla(… , tall mellom 0 og 1)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

hva er ekvivalent til gjennomsiktig bakgrunn, eller rgba(0, 0, 0, 0)

A

color: transparent;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

rgba(0, 0, 0, x) - hva er x?

A

alpha, eller transparens. Mellom 0 og 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

Hvordan kan du gjøre en tekst på et bilde gjennomsiktig, sånn at du ser bildet i bakgrunnen litt mer?

A

f.eks. color: rgba(0,0,0,0.7) gir 70 % transparent med svart tekst.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

hva betyr f.eks. header:before eller footer:before?

A

legger til styling før elementer. Du kan også bruke after. Et eksempel er hvis du vil legge et hjerte foran alle linker: a:before { content: “heart”; }

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

Hva peker “.reds .base-color” egentlig på?

A

det som ligger under class=”reds” og class=”base-color”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

Hvilken font er blitt brukt i skriftlig materiale i årevis?

A

Serif

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

Hva er spesielt med Serif?

A

Serif er en samling med fonter med samme karakteristika.
Serif har detaljer ved begynnelsen og slutten på hver bokstav. Det har ikke sans-serif.
F.eks. en A har streker under hver linje mot neste bokstav. I sans-serif, ser du ikke disse linjene.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

Hvordan setter vi fonten i CSS?

A

font-family

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

hvordan angir du fallback font Times New Roman hvis Arial ikke er tilgjengelig?

A

font-family: ‘Arial’, ‘Times New Roman’;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

hva kan man gjøre med fallback-font hvis man skal sikre serif?

A

Legge til nøkkelordet “serif” som den siste fallback-fonten.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

gi eksempel på to serif-fonter

A

Casion, Georgia, Times New Roman

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

hvilke verdier kan font-weight ha?

A

lightest, bold, normal, lighter, bolder, boldest. Kan også ha et tall fra 1 (lightest) til 1000 (boldest). 700 er det same som bold

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

hvordan sette noe i kursiv?

A

font-style: italic;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

Hvorfor har man behov for å sette elementer i uppercase/lowercase med CSS?

A

F.eks. for nyheter hvor man vil style viss tekst til store bokstaver.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

Hvordan sette en klasse til store bokstaver?

A

.minklasse {
text-transform: uppercase;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

når trenger du word-spacing og letter-spacing?

A

Når du f.eks. skal pynte på titler, og trenger å vise mellomrom mellom ordene

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

hvordan angir du word-spacing og letter-spacing?

A

i antall pixler eller i antall enheter. word-spacing: 2px;

eller 0.3em. Det anbefalte er enheter.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
64
Q

hvorfor er em anbefalt istedenfor pixler? f.eks. word-spacing: 0.3em; ?

A

størrelsen kan settes basert på størresen på fonten

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
65
Q

Hva er text-align: justify?

A

Det betyr at du får avsnitt hvor teksten blir helt rett i kantene. Det er ikke noe tekst som blir ujevn på enkelte linjer. Den blir strukket og komprimert sånn at alle linjer er like lange. Du ser dette i vitenskapelige tekster.

66
Q

Hva kan man bruke for å inkludere en ekstern font?

A

@font-face

67
Q

gi et eksempel på @font-face hvor du har lastet ned din egen font og vil bruke den på siden din

A

@font-face {

font-family: ‘GlegooBanner’;
src: url(‘../fonts/Glegoo-Regular.woff2’) format(‘woff2’),
url(‘../fonts/Glegoo-Regular.woff’) format(‘woff’),
url(‘../fonts/Glegoo-Regular.ttf’) format(‘truetype’);

}

68
Q

gi en oppsummering av hva du kan gjøre med CSS og typografi

A

font-family for å velge font (serif vs. ikke serif),
@font-face som lar deg inkludere eksterne fonter. Du kan også med link for å ålinke til kule google-fonter.

word-spacing, letter-spacing og text-align for å styre mellomrom. F.eks. når du skal lage en tydelig tittel.
text-align, hvor text-align justify strekker og komprimerer teksten så alt passer inn

font-style som lar deg sette f.eks. tekst i kursiv. font-weight for å sette hvor bold en tekst skal være,

69
Q

de store forbokstavene du ser i forfattertekster - hvordan ble den lagt inn med CSS?

A

line-height: 0.87;

padding-right: 1.4rem;

ble satt for egen klasse for en forbokstav

70
Q

Hvordan lage en sirkel av et bilde?

A

border-radius: 60 % (viser bare 60 % av radiusen)

71
Q

hvordan lage en zoome-effekt med CSS og java-script?

A

endre på border-radius dynamisk

72
Q

Hvordan lager du en sirkel med CSS?

A 
.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  opacity: 0.5;
}
73
Q

si at du har en sirkel som har id=”red”. Hvordan setter du posisjonen på denne sirkelen?

A 
#red {
  background-color: rgb(255, 0, 0);
  position: absolute;
  left: 50px;
  top: 100px;
}
74
Q

legge 100px pustemargin foran en boks?

A

margin-left: 100px;

75
Q

Hva består boksmodellen til CSS av?

A

border, margin, padding, width og height

76
Q

Hva er padding i boksmodellen?

A

Pusterommet mellom innholdet i boksen og boksens grenser

77
Q

hva er margin i boksmodellen?

A

pusterommet mellom det som er utenfor boksen og andre elementer

78
Q

hvilke to settinger definerer “boksen” til et element?

A

height og width

79
Q

Hvilke tre ting definerer grensa til en boks? Gi et eksempel

A

bredde, tykkelse og farge. BTF

p {
border: 3px solid coral;
}

80
Q

Gi et eksempel på border-tykkelse solid

A

p {
border: 3px solid coral;
}

81
Q

hva er default border-setting?

A

border: medium none default_farge;

82
Q

hvordan lage en stiplet kantlinje rundt et p-element?

A

p {

border: 1px dotted black;

}

83
Q

hva er forskjellen på border-radius 50 % og border-radius 15 px?

A

15px vil bare lage en firkant med litt runde kanter. 50 % vil lage en perfekt sirkel

84
Q

Hvilke typer padding har du?

A

padding-top
padding-right
padding-bottom
padding-left

85
Q

Hvordan få en boks til å likne på en knapp?

A

padding: 14px; (lager pusterom mellom teksten og utkanten)

border-radius: 3px;

86
Q

hvordan kan du spesifisere padding top, right, bottom og left på samme linje?

A

p.content-header {
padding: 6px 11px 4px 9px;
}

87
Q

hva gjør følgende CSS?

p.content-header {
padding: 5px 10px 20px;
}

A

setter padding i midten (høyre og venstre) til 10. 5 på toppen, og 20 nederst

88
Q

hvordan bare sette padding for høyre og venstre?

A

p.content-header {
padding: 5px 10px;
}

89
Q

hva gjør padding: 20px 30px;

A

setter top/bottom og left/right

90
Q

hva gjør margin: 0 auto; ?

A

setter top og bottom margin til 0px, og justerer innholdet til å bli i midten automatisk

91
Q 
#img-one {
  margin-right: 20px;
}
#img-two {
  margin-left: 20px;
}

hva er totalt pusterom mellom img-one og img-two?
hva hadde skjedd hvis vi hadde hatt følgende?
#img-one {
margin-bottom: 30px;
}

#img-two {
  margin-top: 20px;
}
A

40

med margin-bottom og top til 30px vs. 20px, vil pusterommet mellom boksene være 30px, fordi det ikke fungerer likt vertikalt (det “kollapser”).

92
Q

Hva gjør overflow?

A

kontrollerer hva som skjer med det som går ut av boksen

93
Q

hvilke overflow-attributter har man?

A

hidden: skjuler det som går ut
scroll: legger til scrollbar
visible: default - vil bare gjøre at teksten går ut over boksen.

(HSV)

94
Q

hva er user agent stylesheet?

A

default stylesheet som brukes av nettleseren

95
Q

hvordan sette til user agent stylesheet for margin og padding?

A

margin: 0;

padding: 0;

96
Q

hvordan styre synlighet?

A

visibility - enten hidden, visible eller collapse

97
Q

Hva skjer med height i dette eksempelet?

h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}
A

den faktiske height er 222px (200 + padding2 + border2)

98
Q

hva er box-sizing? Hva er default box-sizing?

A

en property i CSS for å styre hvordan boksmodellen oppfører seg. Default er content-box.

99
Q

Hva er alternativet til default content-box?

A

å sette box-sizing til border-box. For eksempel sånn her:

* {
box-sizing: border-box
}
bilde: To bjørner
det vil gjøre at width og height alltid blir det samme
100
Q

Hvor kan du undersøke boksmodellen i devtools?

A

ctrl+shift+j, velg elements->computed

101
Q

hvis du sender to pixel-argumenter til margin….

A

sender du vertikalt (top og bottom) og så horisontalt (left og right). Dvs. margin 30px 40px gjør marginen 30px over og under, og 40px på høyre og venstre side

102
Q

Hvilke fem verdier kan position ha?

A

absolute, static, sticky, relative, , fixed (ASSREF)

103
Q

hvilken verdi for position er default?

A

static

104
Q

hvis man har satt position: relative, hva kan man ytterligere gjøre?

A

top: xx, left: xx, bottom: xxx, right: xxxx

105
Q

hva gjør position: absolute?

A

Alle de andre elementene på siden vil oppføre seg som om elementet ikke er der.

106
Q

la oss si at du skal lage en meldingsboks som skal ha samme posisjon alltid. Hvilken position-setting må du bruke?

A

position: absolute

vi kan bruke position: fixed hvis vi vil at meldingsboksen skal bevege seg etter brukeren når han/hun scroller

107
Q

hva er forskjellen på “fixed” og “absolute” for position?

A

“fixed” vil gjøre at elementet beveger seg når vi scroller. “absolute” vil la elementet stå et fikset sted.

108
Q

hvordan oppfører position. sticky seg?

A

når man setter et element til position: sticky, vil det stå stille, helt til man scroller ned til en annen del av siden. Da vil det gradvis glide vekk. F.eks. spørsmål viser på samme sted til vi har scrollet ned

109
Q

hva er z-indeks?

A

kan brukes for å kontrollere hvor langt fremme et element skal ligge i forhold til andre. Hvis man bruker z-indeks på et element, kan man unngå at det gjemmer seg bak andre elementer.

110
Q

er I et inline element?

A

Ja, fordi elementet som blir kursiv ligger pås amme linje med annen tekst, så det kan dele linje med andre elementer.

111
Q

hva er block-level -elementer. Gi noen eksempler

A

elementer som har en blokk rundt seg. De legges ikke direkte inn i linjen, men forholder seg til en blokk. Eksempler er h1, p og div.

112
Q

hva er display: inline-block?

A

kombinerer både inline og block. f.eks. tre diver ved siden av hverandre som både er en linje og en blokk!

113
Q

tre diver ved siden av hverandre som både er en linje og en blokk! Hva er dette?

A

display: inline-block

114
Q

hva gjør display: inline-block med et li-element?

A

Legger alle li-elementene ved siden av hverandre på samme linje

115
Q

hva gjør float right og left?

A

Flytter elementer så langt til venstre eller høyre som mulig

116
Q

Hvordan flytte elementer så langt til venstre eller høyre som mulig?

A

float: left eller float:right

117
Q

hva er det float-elementer må ha?

A

width. Ellers vil det ikke fungere. f.eks. width: 50 %

118
Q

hvordan styrer du elementer som kan bumpe inni hverandre når du bruker float?

A

clear

clear: left, right, both eller none

119
Q

forklar clear: right;

A

høyre siden av elementet, kan ikke kollidere med samme type element.

120
Q

Hva er forskjellen på inline-block og inline?

A

inline-block lar deg også sette width

121
Q 
footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: fixed;
  width: 100%;
}

footeren nekter å vise seg. forklar hva som mangler her for at footeren skal vises statisk på bunn

A

bottom: 0px;

122
Q

Hva er formålet med fargehjulet?

A

et verktøy brukt av designere for å visualisere sammenhengen mellom farger

123
Q

hvilke tre fargegrupper har fargehjulet?

A

primær, sekundær og tertiær

124
Q

Hvilke er primærfargene i fargehjulet?

A

rød, blå og gul

125
Q

hvilke tre farger former alle de andre fargene i fargehjulet?

A

rød, blå og gul

126
Q

hvordan er sekundærfarger laget?

A

ved å mikse to primærfarger

127
Q

hvordan lages tertiærfargene?

A

ved å mikse primære og sekundære farger

128
Q

Hvorfor er HSL den riktige måten å sette farger på ?

A
  • CSS sine nøkkelord gir oss bare noen få farger
  • RGB og heksadesimaler er ikke intuitive nok. For eksempel hvis du skal gjøre en farge lysere
  • HSLA er et semantisk system, og fokuserer på meningen med justeringene du gjør.
129
Q

Hva er H i HSL?

A

Hue. Er antall grader rundt fargehjulet

130
Q

Hva er S i HSL?

A

Saturation, eller metning (renhet). 0 % metning er en gråskala. 100 % metning er selve fargen.

131
Q

hva er L i HSL? Hva er 0 % L, og 100 % L?

A

Lys. 0 % L er svart. 100 % er hvitt.

132
Q

Hva er en varm farge?

A

En farge som varierer mellomm gul og rød (oransje er noe mellom). Varme farger kan kommunisere en form for aggresjon

133
Q

Hvilke grader på fargehjulet varierer varme farger mellom?

A

0 (rød) og 60 (gul)

134
Q

Hva er kalde farger?

A

farger som varierer mellom blå, lilla og grønn. Gråfarger faller også inn i denne kategorien.

135
Q

Hva kalles fenomenet som skjer når hvit brukes på en farge?

A

“tint”. Lysheten på en hue blir endret.

136
Q

hva skjer når svart tilføres en farge?

A

skygge

137
Q

desto høyere L i HSL, hva skjer da?

A

desto mer lys

138
Q

Hva er fargekontrast?

A

Farger som er lengre unna hverandre på fargehjulet, har større kontrast enn farger som er nærme hverandre på fargehjulet.

139
Q

Hvorfor ønsker du høy kontrast?

A

Tekst er lettere å lese

140
Q

hvilke color schemes har du?

A

monokromatisk, triadisk, analoge og komplementære

komplementær: Motsatte sider av fargehjulet - hvis man trekker en rett linje gjennom. F.eks. oransje og blå.

triadisk: tre farger som består av en 45 graders trekant i fargehjulet.
monokromatisk: Ulike variasjoner av samme farge
analogt: Farger som ligger ved hverandre på fargehjulet.

141
Q

hva er viktig for et monokromatisk fargescheme?

A

det er viktig å velge mye lysere og mørkere skygge av hovedfargen, slik at du får høy kontrast.

142
Q

Ulike variasjoner av samme farge. Hvilket color scheme er dette?

A

monokromatisk

143
Q

hva er harmoni i fargeteori?

A

Å være konsistent på hvilke farger vi bruker

144
Q

Hvilke farger bør vi tildele ulike seksjoner av innholdet?

A

ulike farger, sånn at vi ser hvordan de er grupper.

145
Q

Hvor er komplementære farger normale å bruke?

A

I logoer og drakter. F.eks. Minnesota Vikings er gule og lilla. Hvis det er en seksjon du ønsker at brukeren skal fokusere på, bør du bruke komplementære farger

146
Q

hva er best practices for fargelegging?

A
  • vær sparsom på neon
  • unngå vibrerende farger - to komplementære farger som har høy metning. Det ser du f.eks. når du ser rød og grønn på
    julekort. For å unngå er det normalt å legge et hvitt kort i mellom.
  • unngå kombinasjoner som ikke har kontrasst (f.eks. noe veldig lyst på toppen av noe veldig lyst)
147
Q

hvilke tilstander farger du for en knkapp?

A

mouseover og når knappen er skrudd av

148
Q

hvilke farger brukes for sletting og når noe går galt?

A

rødt

149
Q

hva er ulempen med svart tekst på hvit bakgrunn?

A

kontrasten kan bli så stor at øynene blir slitne av å konsentrere seg. Prøv noe annet, f.eks. hvit tekst på svart bakgrunn, eller gråere tekst på hvit bakgrunn

150
Q

Hva er nøytrale farger?

A

Farger med lav lysstyrke og metning

151
Q

hvordan benytter google seg av whitespace?

A

de lager masse rom mellom alt, sånn at alt fokuset er på søkeboksen

152
Q

hvordan kan du innføre mer whitespace?

A

ved å innføre mer padding

153
Q

hva slags fargeblindhet kan man oppleve?

A

rød/grønn, blå/gul, monokromatisk (kan ikke se farger i det hele tatt)

154
Q

hvordan håndterer du rød/grønn for fargeblinde?

A

hvis brukt for feilmelding, bruk symbolet “x”, og et sjekkmerke for suksess istednefor grønn

155
Q

Hva oppdaget du at du måtte gjøre når ekstern CSS ikke refreshet seg i jinja-prosjekt?

A

bruke ctrl+shift+r for hard refresh i nettleseren.

156
Q

Hva er anbefalingene for UI-design?

A

Select a dominant brand color and supporting accent colors
Use contrast to define sections and differentiate actions
Use semantic colors for error and success messages
Incorporate default colors for text and backgrounds where needed
Neutral colors can provide good contrast
Keep users in mind when selecting color

157
Q

hva slags bakgrunn er anbefalt på en webside?

A

en nøytral bakgrunn

158
Q

hvordan skiller man mellom primære og sekundære knapper i fargelegging?

A

de sekundære fargene har farge-themen (f.eks. nyanser av oransje), mens de primære gjerne har lysegrønn - noe som skiller dem ut fra alt andre og forteller at dette er distinkte ting man bør ha fokus på.

159
Q

hvilken side kan hjelpe deg med valg av fargetheme?

A

cloud.cloudfare.design

160
Q

gi et eksempel på hvordan plassere tekst midt på et bilde

A

lag to nøstede diver, hvor den ytterste peker på klassen “locationcontainer”, og de innerste itemene peker på klassen “location” (kan være flere av dem).

.location-container {

position:relative;

}

.location {

top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
background-color: black;

}

Front End Engineer (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions