Wow ! Trop bien ça ! Les colonnes se réorganisent automatiquement en lignes ... Merci copain !

Hop, dans mon snippetvamp !

Clamp permet de spécifier trois valeurs pour une propriété : la valeur minimale, la valeur préférée et la valeur maximale.

Glopglop N°1

Ainsi, on pourra donner des tailles fixes comme minimum et maximum et une taille variable (pourcentages ou valeur de viewport) comme valeur préférée: la valeur variable sera utilisée, mais bornée au minimum et au maximum. ex: clamp(20px, 5vw, 54px)

Glopglop N°2

On peut faire des calculs directement dans clamp() : font-size: clamp(20px, 16px + 5vw, 54px);

Glopglop N°3

Clamp peut être utilisé sur les paddings, les margins etc... Tout ce qui a une valeur numérique (length, number, percentage...)

Sympa ! Une feuille css permettant de donner un style doodle à la main aux éléments de formulaire HTML en ajoutant une classe au body .

Bon, ya un appel vers google fonts mais rien que goofi ne saurait arranger...

Le Zip fait environ 277ko

EDIT

Merci à vinc[E] qui me signale une alternative très réussie : PaperCSS - 54ko

Il y a encore un appel à Google Fonts mais plus besoin du recours à un SVG pour les bordures...

Superbe et pas si compliqué... Merci !

EDIT: Comme la page est bourrée de trackers, je copie colle ici et sur mon snippetvamp

CSS

 .tree {
  --spacing: 1.5rem;
  --radius: 10px;
  --marker-bg-default: #ddd;
  --marker-bg-haschild: #6b9abb;
  line-height: 2rem;
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.tree ul li {
  border-left: 2px solid #ddd;
}
.tree ul li:last-child {
  border-color: transparent;
}
.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.tree summary {
  display: block;
  cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary:focus {
  outline: none;
}
.tree summary:focus-visible {
  outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius) + 2px);
  left: calc(var(--spacing) - var(--radius) - 2px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: var(--marker-bg-default);
}
.tree summary::before {
  content: "+";
  z-index: 1;
  background: var(--marker-bg-haschild);
  color: #fff;
  line-height: calc(2 * var(--radius));
  text-align: center;
}
.tree details[open] > summary::before {
  content: "−";
}

HTML

<ul class="tree">
  <li>
    <details open>
      <summary>Informatique</summary>
      <ul>
        <li>
          <details>
            <summary>Périphériques</summary>
            <ul>
              <li>Clavier</li>
              <li>Souris</li>
              <li>Ecran</li>
            </ul>
          </details>
        </li>
        <li>
          <details open>
            <summary>Stockage</summary>
            <ul>
              <li>Disque dur</li>
              <li>SSD</li>
              <li>Clé USB</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>Carte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
</code></pre> codeCarte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>

De côté pour plus tard: en particulier les usages exotiques de CSS.

• https://neumorphism.io/#e0e0e0 pour faire des refliefs à la mode à base de box-shadow
• https://9elements.github.io/fancy-border-radius/ pour faire des formes non homogènes à base de border-radius
• https://cssbud.com/css-generator/css-glow-generator/ pour faire des halos
• https://onotakehiko.dev/clothoid/ pour faire des border-radius plus ... organiques ?!
• https://hype4.academy/tools/glassmorphism-generator pour faire du verre
• https://cssgrid-generator.netlify.app/ pour faire des GRID un peu exotiques facilement
• https://layout.bradwoods.io/ pour avoir des layouts GRID tout prêts
  Via https://links.kalvn.net/shaare/Jsk-mg

Créer une impression de hasard (dans les formes, couleurs ou tout ce qui peut être stylé en css) en utilisant :nth-of-*() pour changer des variables css.

En utilisant assez de variables et en utilisant des nombres premiers pour nth-of, on donne l'illusion de la randomisation. Intéressant.

Plusieurs applications dans l'article.

Un bookmarklet permettant de ne rafraîchir que le css ? Lea Verou nous en fournit un...

RefreshCSS

Chouettes astuces d'effet Hover sur du texte à base de CSS. Très bonne idée en effet !

Une appli qui permet de générer le CSS pour styler les input range... C'est joli en plus ! Hop, coudifié !

Un truc que je teste sur ma page de générateur de comics pour masquer le chargement de la page...

Minimaliste...

/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}
/* balise body */
<body onload="document.body.style.opacity=1" >

Je suis fan de ces astuces minimalistes...

• filter:drop-shadow(2px 4px 8px #585858); pour faire une ombre sur des images à fond transparent.
• scroll-behavior: smooth; pour activer le smooth scroll
• .center { display: flex; align-items: center; justify-content: center; } pour centrer horizontalement et verticalement
• white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pour tronquer un texte
• caret-color:red pour changer la couleur du curseur de texte

Ou encore la fenêtre modale SANS javascript:

/* If you like this, be sure to ❤️ it. */
.wrapper {
  height: 100vh;
  /* This part is important for centering the content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* End center */
  background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
  background: linear-gradient(to right, #834d9b, #d04ed6);
}

.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
  font-family: 'Roboto', sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.modal__footer {
  text-align: right;
  a {
    color: #585858;
  }
  i {
    color: #d02d2c;
  }
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

Wow... la propriété CSS Fliter, qui permet d'appliquer des filtres sur un élément (blur, grayscale etc) permet apparemment l'utilisation de filtres SVG inline... le truc de fou.

C'est tricky, pas élégant, un peu sale mais apparemment assez puissant puisqu'on peut même appliquer des filtres de déformation...

img {
  filter: url('data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg">
      <filter id="waves" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="1" seed="1" stitchTiles="noStitch" result="turbulence" />
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="G" yChannelSelector="A" result="displacementMap" />
      </filter>
    </svg>#waves')
  ;
}

Intéressant et astucieux

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.first-day {
  grid-column-start: 3;
}

<div class="calendar-wrapper">
  <h1>Decemeber</h1>
  <ul class="calendar">
    <li class="weekday">Sun</li>
    <li class="weekday">Mon</li>
    <li class="weekday">Tue</li>
    <li class="weekday">Wed</li>
    <li class="weekday">Thu</li>
    <li class="weekday">Fri</li>
    <li class="weekday">Sat</li>

    <li class="first-day">1</li>
    <li>2</li>
    <li>3</li>
    <!-- ... -->
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>
</div>

Sinon, il y a Fontello ( http://fontello.com/ ) qui permet de choisir ses icônes dans plusieurs bibliothèques de webfonts (font awesome, Entypo, Typicon, Iconic, Modern Pictogram, Meteocons, MFG labs, Maki, Zocial, Brandico, Elusive, Linecons, Web symbols)

On fait son marché et on récupère un zip contenant la webfont et les css tout prêts...

De rien !

Les animations dans canvas avec un projet «simple»: un solitaire. Un jour, j'aurai le temps de regarder... un jour