Let's Look at 50+ Interesting CSS Properties & Values | CSS-Tricks

Quelques trucs que je retiens pour moi :

counters

body {
  counter-reset: heading; /* init the counter for headings (you can give it any other name) */
}
h2 {
  counter-increment: heading; /* increments the counter on every <h1> tag */
  counter-reset: subheading;  /* here we init or reset the subheading */
  /* so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 */
}
h2:before {
  content: counter(heading) " - "; /* using :before selector and counter() function we can add the index to the heading */
}
h3 {
  counter-increment: subheading; /* increment the subheading counter on every <h2> tag */
}
h3:before {
  content: counter(heading) "." counter(subheading) " - ";
}

currentColor

.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}

image-rendering

.pixelated {
  -webkit-image-rendering: pixelated;
  image-rendering: pixelated;
}

img {
  width: 200px;
  height: 200px;
}

shape-outside

  • Keyword values: none, margin-box, padding-box, border-box, padding-box
  • Function values: circle(), ellipse(), inset(), polygon()
.-shape-outside {
  shape-outside: circle(50%);
  float: left;
}

.circle {
  width: 160px;
  height: 160px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 24px;
  overflow: hidden;
  border: 1px solid #eee;
  img {
    width: 100%;
    height: 100%;
  }
}

div {
  text-align: justify;
}

html, body {
  height: auto;
}

@supports

@supports (display: grid) {
  .container {
    display: grid;
  }
}            

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {

}

var()

:root {
  --primary-color: #cccccc;
}
body {
  color: var(--primary-color, #cccccc);/* le second est le fallback */
}

vh, vw, vmin, vmax

These values are used for sizing things relative to the viewport size. While width is alwasys relative to the parent container, vh or vw always use viewport size as a basis.

  • vh: 1 vh is equal to 1/100 of viewport height
  • vw: 1 vw is equal to 1/100 of viewport width
  • vmin: it is the least value of vh and vw
  • vmax: is the largest value of those two

For a browser window that has a viewport 1280x655px, 1vh is equal to 6.55 pixels, 1vw is equal to 12.8pixels, vmin is 6.55 pixels (smallest of the two values), and vmax is 12.8 pixels (largest of the two values).

writing-mode


.vertical-rl {
  writing-mode: vertical-rl;
}
.vertical-lr {
  writing-mode: vertical-lr;
}
```<div class="img_source"><a href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT9AE-gH-YzrjroQjQxh76bQIs_W94nTXX8C45nGCToFe9Dxz3S">Source image</a></div>

10 principles for smooth web animations – Gyroscope

Traduction rapide pour mémoire de ces 10 principes pour des animations fluides...

  1. Ne change jamais d'autres propriétés que opacity ou transform ! (même si ça a l'air chouette, ne le fais pas !)
  2. Cache les objets avec opacity:0 et pointer-events: none pour éviter les rendus inutiles
  3. N'anime pas tout en même temps (à la place fais des chorégraphies: déclenche une série d'animations par l'ajout d'une classe, chaque animation ayant son propre transition-delay).
  4. Augmente les transition-delay pour créer un effet de chorégraphie.
  5. Utilise un modificateur de délai global pour créer tes animations en slow motion puis accélérer ensuite
  6. Filme tes animations pour avoir une perspective à la troisième personne.
  7. L'activité réseau peut ralentir les animations: pense au preload or temporise les grosses requêtes HTTP
  8. N'attache pas d'animations au défilement de page et évite de créer tes propres scrollbars
  9. Teste sur mobile tôt et souvent.
  10. Teste sur des appareils différents.
Via Kalvn's links


Fil RSS des articles de ce mot clé