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

Des réponses en css moderne à des problèmes anciens... fÔ KE JLE LISE...

C'est beau !

Utiliser et comprendre les étapes dans les animations css en faisaint une machine de Goldberg...

Faut que je regarde ça de plus près dis-donc...

Intéressant : des onglets css only... Je garde !

// boutons
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab1</label> 
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Tab2</label>

// contenus
<div class="tab content1">Tab1 Contents </div>
<div class="tab content2">Tab2 Contents </div>

// css pour cacher/montrer
input { display: none; }                /* hide radio buttons */
input + label { display: inline-block } /* show labels in line */
input ~ .tab { display: none }          /* hide contents *//* show contents only for selected tab */
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2 { display: block; }

// css pour styler
input + label {             /* box with rounded corner */
  border: 1px solid #999;
  background: #EEE;
  padding: 4px 12px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
}
input:checked + label {     /* white background for selected tab */
  background: #FFF;
  border-bottom: 1px solid transparent;
}
input ~ .tab {          /* grey line between tab and contents */
  border-top: 1px solid #999;
  padding: 12px;
}

Créer une galerie d'items CARRÉS et responsive... C'est beau.

Tiens, j'ai trouvé un effet sympa en css sur ce site, je l'ai récupéré et mis là... (je sais pas si j'ai tellement le droit, mais bon )

<style type="text/css">
div.tr1 img {
    -webkit-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -moz-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -ms-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -o-transform: translateX(60px) translateY(-160px) rotateX(45deg) rotateZ(-20deg);
    -webkit-transition: transform 1s;
  transition: transform 1s;
}       
div.tr1 img:hover{
    -webkit-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -moz-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -ms-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -o-transform: translateX(0) translateY(0) rotateX(0) rotateZ(0);
    -webkit-transition: transform 1s;
  transition: transform 1s;
}
div.tr1{
    width:512px;
    height:256px;
    overflow:hidden;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.2);
    background:black;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

</style>
<div class="tr1">
    <img src="https://www.pdfannotator.com/images/pdfannotator/fr/screenshot.png">
</div>

Les avantages d'utiliser input type="text" inputmode="numeric" au lieu de input type="number".

Animer width et height en css sans se prendre la tête et plus rapidement avec transform.

Les animations de propriétés provoquent un reflow de la page alors que transform et opacity ne le font pas: c'est un point en leur faveur. Problème, si on étire une boîte arrondie (transform: scale), les coins se déforment alors que si on change la taille (width/height), les coins restent arrondis.

L'auteur propose une solution qui consiste à étirer tout sauf les coins en divisant l'élément en plusieurs divs... ça me rappelle l'époque où border-radius n'existait pas et qu'on faisait les coins arrondis en multipliant les divs avec des fonds... #teamVieux

Styler les inputs radio/checkboxes de façon sémantique, accessible, moderne, customisable et vanilla, c'est possible !

Avec un mélange de variables css et appearance.

Superbe, simple, ergonomique...

Bon article sur la façon d'afficher les citations en HTML.

Je retiens une façon de mettre l'apostrophe en retrait

/* Fallback */
blockquote {
  text-indent: -0.45em;
}
/ If there's support, erase the indent and use the property instead /
@supports ( hanging-punctuation: first) {
blockquote {
text-indent: 0;
hanging-punctuation: first;
}
}

Quelques idées d'effets de focus simples...

Classe ! Du masonry en full css.
Glop glop.

Une réflexion intéressante que je garderai en mémoire: ne réserver les classes css que pour styler, pas pour cibler en js.
Donc en résumé, au lieu de

<article class="article"><br />
</article><br />
<br />
et <br />
<br />
$(".article") <br />
```<br />
<br />
Préférer:<br />
<br />
```<br />
<article class="article" data-hoverable><br />
</article><br />
<br />
et <br />
<br />
$("[data-hoverable]")<br />
```<br />
<br />
On sépare ainsi les classes (styling) des attributs data-* (scripting js)<br />
<br />
<br/><br/><div class="img_source"><a href="https://www.inetsolutions.org/wp-content/uploads/2016/03/JavaScript-And-CSS-Includes-Do-Overload-Googles-Fetch-And-Mobile-Testing-Tools-1030x644.jpg">Source image</a></div>

C'est juste... beau.

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}