Home
article:nth-of-type(1) {
height: 75vh;
max-width: 25em;
min-width:20em;
display:flex;
flex-direction:column;
align-items:center;
background-image: url(../assets/stock-background.jpg); /* Photo by Philippe Donn: https://www.pexels.com/photo/stars-1257860/ */
background-position: center;
background-size: cover;
box-shadow:0 0 20px 20px rgba(0,0,0,.1);
border-radius:1rem;
transition:.25s;
z-index: 3;
}De nth-of-type selector wordt gebruikt om een specifiek element aan te spreken uit meerdere keuzes. De nth-of-type selector wordt gebruikt in combinatie met een nummer dat in relatie staat tot de positie van het element in de DOM. De selector is een van mijn meest gebruikte selector omdat deze makkelijk in combinatie met andere selectors gebruikt kan worden om specifieke elementen uit een hoop aan te spreken.
De hover selector wordt gebruikt om een element aan te spreken waar een muis over hangt. De selector wordt vaak gebruikt om links te stylen maar kan ook gebruikt worden om bijvoorbeeld een preview te maken.
De transform property transformeert als het ware een element door de positie, rotatie of schaal te veranderen. De transform property wordt hand in hand gebruikt met de waardes translate voor positie, rotate voor rotatie en scale voor schaal. Deze waardes kunnen gecombineerd worden met X, Y of Z om de transformatie op deze assen toe te passen.
De animation property wordt gebruikt om een animatie toe te passen op een element. De animatie property kan veel verschillende waardes aannemen om de animatie naar mate aan te stellen. De animation property maakt gebruik van de @keyframes regel om de inhoud van de animatie te regelen. De @keyframes regel kan gebruik maken van verschillende properties om binnen de opgestelde tijd met keyframes de animatie te spelen. Dit wordt gedaan door gebruik te maken van from & to en procenten om aan te geven waar in de aangegeven tijd een verandering toegepast moet worden.