SwebDev - La fonction CSS clamp()

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...)

DoodleCSS & PaperCSS

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

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

FireShot Capture 084 - Forms • PaperCSS - www.getpapercss.com.png

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

Créer une arborescence en CSS uniquement - Dév. Web - ShevArezo`Blog

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>
Via https://book.knah-tsaeb.org/

Super Useful CSS Resources 🌈 - DEV Community 👩‍💻👨‍💻

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

The Cicada Principle, revisited with CSS variables – Lea Verou

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.

ASTUCE: Body qui apparait après chargement en 2 lignes

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" >

CSS Tips - Marko Denic - Web Developer

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;
}
Via https://sebsauvage.net/links/

SVG within CSS | CSS-Tricks

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')
  ;
}

A Calendar in Three Lines of CSS

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>

Optimize Font Awesome to ridiculously low size of 10KB! | Webjeda

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 !

Fil RSS des articles