Category Archives: Senza categoria

10 Dic

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;
}
.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;

Link Utili

http://www.css3.info/