Hier is een lijst van onze top 5 CSS tricks die je als designer moet kennen:
1. Text selectie Je kan ook tekstmarkering opmaken. Gebruik het pseudo-element ::selection om de geselecteerde tekst op te maken.
Voorbeeld:
Selecteer mij!
//CSS
.example__highlight::selection {
background-color: red;
color: yellow;
}
2. Hover effect Je kan een zweefeffect aan een HTML-element toevoegen met behulp van de :hover selector
Voorbeeld:
Zweef over mij! // CSS
.example__hover:hover {
background-color: #2b2b2b;
color: #fff;
border-bottom: 3px solid #000;
}
3. Tekst afkappen Je kan overlopende tekst afkappen met een weglatingsteken (...) met behulp van de text-overflow CSS-eigenschap.
Voorbeeld:
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
// CSS
.example__text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
4. Schaduw effect Je kan CSS-schaduweffecten toevoegen aan elementen met respectievelijk de CSS-eigenschappen box-shadow. De eigenschap box-shadow wordt gebruikt om een schaduw toe te passen op HTML-elementen.
Voorbeeld:
Waar komt die zonlicht toch vandaan?
// CSS
.example__box-shadow {
box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 15px;
}
5. Centeren Je kan content binnen een HTML element centeren doormiddel van flex, align-items, justify-content.
Voorbeeld:
Centreer mij
Ik ook graag
En ik dan?
// CSS
.example__flex {
display: flex;
align-items: center;
justify-content: center;
}
