CSS3 tips
Responsive viewport units (vw, vh, and vmin)
article > section { column-width: 22rem; column-gap: 2.6rem; height: 80vh; width: 80vw; overflow: scroll; }
object-fit: cover
img {
width: 200px;
height: 400px;
object-fit: cover;
}
backface-visibility
img {
position: absolute;
animation: turn 2s infinite;
animation: turn 2s infinite;
}
.donut-front {
z-index: 5;
backface-visibility: hidden;
}
@keyframes turn {
to {
transform: rotateY(360deg);
}
}
REM VS EM
| rem | Relative to font-size of the root element |
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
:nth-child
p:nth-child(odd) {
background: red;
}
p:nth-child(even) {
background: blue;
}
p:nth-child(3n+0) {
background: red;
}
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
Specifying two sizes in CSS font property
font: 14px/60px=
font-size: 14px;
line-height: 60px;