Links and Buttons Flashcards
Hvordan legger du til understreking i CSS?
text-decoration: underline
Hva er prinsipper for link-styling?
- Linkenes utseende bør ikke brukes på noe annet enn linker
- Linkene bør enkelt kunne skilles fra teksten rundt seg.
- Linken bør beskrive hva den går til.
hvordan vil title-attributtet oppføre seg på en link?
På de fleste nettlesere, vil den vise teksten når man går med musa over linken
hvordan spesifisere type link ved mouseover?
a:hover {
}
hvordan endre til musepeker ved mouseover?
a:hover {
cursor:pointer;
}
hvilke fire tilstander har en link?
normal, hover (aktiv), klikket og besøkt
:link, :hover, :active, :visited
hva er rekkefølgen på pseudo-selektorene for en link?
link, visited, hover, active
hvis du har klassen “question-link”, hvordan skal du forme hvordan farge den viser på hva du har besøkt?
.question-link:visited {
}
Hva er skeuomorfisme?
Et UI-element som imiterer noe som eksisterer på ordentlig. F.eks. en fysisk knapp.
Hvilke CSS-attributter må minst til for å få til skeuomorfisme?
text-shadow: 0 -2px fargekode; box-shadow: .... border-radius: 5px; margin padding
Hva bør skje når man klikker på en skeuomorfisk knapp?
Skyggen (box-shadow) fjernes. margin-top reduseres med 5px.
hvordan fungerer box-shadow: 0px 4px; ?
legger til 0px skygge som offset x (til høyre side), og 4px skygge under knappen
Hva er affordances?
måter et objekt kan brukes på? En stol kan ofte brukes for å sitte på. Den kan også brukes for å kastes, selv om dette kanskje ikke er tiltenkt. Begge handlinger er “affordances”.
Hva er signifiers?
Signalisering om at man har en affordance. F.eks. et håndtak på en kaffekopp kan signalisere at man kan holde den for å drikke av den. Selv om man ikke nødvendigvis holder koppen med håndtaket.
Hva er eksempel på signifier i en nettleser?
At man får forskjellig musepekeren når man tar den over en link.
Hvordan fungerer CSS-transition?
F.eks. hvis du vil at noe skal gjøres glidende mellom vanlig link og hover, så spesifiserer du f.eks. “transition: margin 1s”
Gi et eksempel på CSS-transisjoner
.activity:hover {
background-color: #fff;
color: #5495ff;
transition: color .1s ease-in, background-color .1s ease-in;
}
Hva er primær navigasjon?
de viktigste knappene og linkene
hva er sekundær navigasjon?
Linkene som handler om hvordan man endte opp på den gitte siden. Et vanlig eksempel på sekundær navigasjon er breadcrumb
Hvorfor heter det “breadcrumb”?
På grunn av historien om Hans og Grete hvor de la igjen brødsmuler på veien for å finne veien tilbake igjen
hva er fordeler ved å bruke brødsmuler?
fordeler ved breadcrumbs:
- Selv om man går inn på en tilfeldig side, vet man hvor man er
- Brødsmulene sier noe om hvilke kategoriseringer som finnes på siden
- Man kan enkelt hoppe tilbake
hvordan er en brødsmule normalt strukturert?
som en li/ul med display-property: inline
Hva gjør følgende selektor
.breadcrumb li+li::before {
content: “/”;
}
lager skråstreker for en breadcrumb-klasse!
“before” sier at vi skal legge innhold før et valgt element
“li+li” sier at den velger to li-elementer som er ved siden av hverandre
hvordan ser komplett CSS for breadcrumb ut?
.breadcrumb > li {
display: inline;
}
.breadcrumb li+li::before {
padding: 10px; content: ">";
}
.breadcrumb a {
text-decoration: none;
}
.breadcrumb a:hover {
color: red;
}
Hva ble lagt til av funksjonalitet for breadcrumb?
- Hver side fikk samme ul/li-liste hvor ul var klassen breadcrumb
- Sider man var på ble uthevet
- linken til sider man allerede er på, går til href=”#”
hvordan ser CSS-selektoren ut når den kombinerer elementer for å lage breadcrumb?
.breadcrumb li+li::before
Hvordan lager vi breadcrumb som ser ut som pil med CSS?
/* Lag en tykk grense. Gjør venstre grense gjennomsiktig */
.breadcrumb li a::before, .breadcrumb li a::after {
content: "";
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}
.breadcrumb li a::before {
left: -10px;
border-left-color: transparent;
}
Hvilke tre typer brødsmule har man?
lokasjon, attributt og sti (location, border, path)
Det er vanlig å skille disse med styling (forskjellige farger, uthevelse, etc..). Separator mellom sti/lokasjon, men ikke mellom attributt
Hva er lokasjonsbaserte brødsmuler?
De sier hvor du befinner deg på siden. f.eks. shopping-mote-sko
Hva er attributtbaserte brødsmuler?
De sier noe om attributtene du ser etter. Feks. brune sko.
Hvordan ser selektoren som kombinerer li-elementer for brødsmuler ut hvis vi skal gjøre det for klassen “location” ?
.breadcrumb li.location+li.location::before {
color: gray;
content: “/”;
}
Hvordan legge til en “x” for å lukke noe etter en tekst som ligger inne i a-elementet for klasssen “attribute”?
.attribute a::after {
content: " x";
font-size: 8px;
vertical-align: super;
}Hva er fallgruver ved å bruke brødsmuler?
Brukere kan bli forvirret hvis det gjøres litt feil. De forventer at de oppfører seg på en helt bestemt måte.
Følg generelt prinsippet om å ikke bruke dem, med mindre siden har en komplisert navigasjonsstruktur
hva er forskjellen på path og location based breadcrumb?
location based har “home” helt på starten
