Selektorer er den delen av CSS-syntaksen som definerer hva som skal stilsettes. Det kan være en viss type element, elementer med visse klasser, id-er og mye mer. Her følger en oversikt over noen av de mer eller mindre avanserte selektorene i CSS (t.o.m. CSS3), hva de gjør, og hvordan de brukes. For en fullstendig liste … Continue reading Avanserte CSS-selektorer
Tag: CSS
Pixel snapping på CSS-animasjoner i Firefox
Fenomen som skjer på et element som animeres med f.eks. transform; underveis i animasjonen legges det på “blur” på elementet for å få en smooth animasjon, men når animasjonen er ferdig vises et hopp som skjer når effekten fjernes og elementets innhold snapper til nærmeste piksler. Det vises som hakking eller et lite hopp. Kan … Continue reading Pixel snapping på CSS-animasjoner i Firefox
Fontvekter i CSS
Huskeliste for font-vekter i CSS. Merk at det kan være variasjoner i fonter, og at mange fonter ikke støtter alle vekter. Men denne listen gir en pekepinn på hvilke tallverdier som normalt tilsvarer hvilken vekt. Se for øvrig http://www.w3.org/TR/css-fonts-3/#font-weight-prop 100 – Thin 200 – Extra Light (Ultra Light) 300 – Light 400 – Normal 500 … Continue reading Fontvekter i CSS
CSS Transition
Transition animerer en overgang mellom to stilverdier. Det er en nyttig måte å gi animasjon til elementer på, uten at man må bruke animation/keyframes eller JavaScript-animasjon. Har du først angitt transition på noe, vil det animeres hver gang elementet med den gitte egenskapen endres. I tillegg sendes et event når overgangen er ferdig, som gir … Continue reading CSS Transition
CSS background
shorthand syntax: background: color, image, repeat, attachment, position; Properties: background-attachment beskriver om bakgrunnen skal scrolle med innholdet eller ikke. Med verdien fixed er bildet låst i forhold til viewporten, og når man scroller vil dermed resten av innholdet flytte seg, men ikke bakgrunnen. scroll er default verdi, og en ny verdi, local, setter bakgrunnen fixed … Continue reading CSS background
CSS box-shadow
Box-shadow i CSS brukes for å legge skygge på elementer. Merk at den gjelder for hele elementet, og ikke f.eks. enkeltbokstaver i en tekst. Legger du det på et p-element, er det hele p-elementet som får en firkantet skygge bak hele elementet. Eksempel: Dette avsnittet har box-shadow, med følgende CSS: box-shadow: 5px 5px 10px rgba(0,0,0,0.5). … Continue reading CSS box-shadow
Prioritering i CSS
Cascading CSS står for cascading style sheets, og delen cascading kan oversettes til fossefall på norsk. Hvis man ser for seg en foss som deler seg og faller over flere nivåer nedover, er tanken at noe som bestemmes lenger opp i fossen også er gjeldende i utspring nedenfor, helt til det blir bestemt noe annet. … Continue reading Prioritering i CSS