ConnexionUn reset CSS bien argumenté qui met en lumière certaines propriétés CSS intéressantes.
— Permalink
Vue lecture
VoxCSS – Pour faire du rendu 3D façon Minecraft avec du CSS
Y'a un truc qui me rend joyeux avec le web, c'est quand des devs décident de pousser les technos dans leurs retranchements juste pour prouver que c'est possible.
Et
VoxCSS
, c'est totalement ça : une bibliothèque JavaScript qui permet de faire du rendu voxel complet en utilisant uniquement le DOM et le CSS. Alors attention, quand je dis "uniquement", je veux dire sans WebGL et sans l'élément <canvas>. Juste des éléments HTML empilés intelligemment qui tirent parti de l'accélération matérielle du navigateur pour les transformations 3D.
Pour cela, VoxCSS utilise des grilles CSS superposées sur l'axe Z pour créer un espace volumétrique. Chaque niveau de profondeur est une grille CSS classique, décalée avec des translations 3D. Les voxels eux-mêmes sont des cuboïdes HTML composés de plusieurs faces positionnées avec des rotations CSS.
Par défaut, la scène utilise une perspective de 8000px et le fameux transform-style: preserve-3d pour que la magie opère... Un pur hack de génie qui transforme votre navigateur en moteur 3D sans passer par les API habituelles !
Et le rendu n'est pas dégueu du tout puisque le moteur gère les couleurs, les textures, et même différentes formes comme des rampes, des pointes ou des coins pour sortir du simple cube de base. Pour ceux qui se demandent comment ça se passe pour les ombres, VoxCSS simule également un éclairage en jouant sur l'opacité des faces, ce qui donne ce petit relief indispensable au style voxel. Vous pouvez même choisir entre différentes projections (cubique ou dimétrique) pour donner le look que vous voulez à votre scène.
Côté performances, même si on parle de manipuler potentiellement des milliers d'éléments DOM, l'équipe de Layoutit Studio a bien bossé. Y'a un système de "culling" pour ne pas calculer les faces cachées (on n'affiche que la surface extérieure, quoi) et une option de fusion (le mergeVoxels) qui permet de regrouper les cubes adjacents pour alléger la structure HTML. C'est pas activé par défaut, mais c'est indispensable dès que votre château Minecraft commence à prendre de l'embonpoint.
L'installation se fait via
npm install @layoutit/voxcss
La lib est hyper flexible puisqu'elle propose des wrappers pour React, Vue et Svelte, tout en restant utilisable en vanilla JS.
Vous posez votre caméra (<voxcamera>) pour gérer le zoom et la rotation, vous injectez votre scène (<voxscene>), et roule ma poule. Cerise sur le gâteau pour les artistes, VoxCSS inclut un parser pour charger directement vos fichiers .vox créés dans MagicaVoxel.
Si vous voulez tâter la bête sans coder, allez faire un tour sur Layoutit Voxels, l'éditeur qui sert de démo technique. Ils ont aussi sorti Layoutit Terra qui génère des terrains entiers avec la même techno.
Franchement, pour un gros jeu en prod, OK pour du WebGL, mais pour créer des éléments interactifs stylés, des petites scènes 3D ou juste pour la beauté du geste technique, c'est un sacré bel outil.
Et puis, faire de la 3D sans toucher à un seul shader, ça a un petit côté cool je trouve.
Modifier le style par défaut des boutons radio
input[type="radio"] {
/* Disable the browser's default radio button styles */
appearance: none;
margin: 0;
/* Recreate the circle container */
border: 1px solid black;
background: white;
border-radius: 50%;
/* Center our dot in the container */
display: inline-grid;
place-content: center;
/* Use a pseudo-element to display our "dot" */
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/* And display it when the radio button is checked */
&:checked::before {
background: black;
}
}
— #permalink
/* Disable the browser's default radio button styles */
appearance: none;
margin: 0;
/* Recreate the circle container */
border: 1px solid black;
background: white;
border-radius: 50%;
/* Center our dot in the container */
display: inline-grid;
place-content: center;
/* Use a pseudo-element to display our "dot" */
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/* And display it when the radio button is checked */
&:checked::before {
background: black;
}
}
— #permalink
Introducing CSS Grid Lanes | WebKit
La spécification CSS pour les layouts de type "masonry" (blocs en quinconce) est quasiment terminée, et la preview peut être testée dans Safari. Quelques noms de propriétés vont probablement changer, mais l'article décrit très clairement comment ça fonctionne.
— Permalink
Introducing CSS Grid Lanes | WebKit
La spécification CSS pour les layouts de type "masonry" (blocs en quinconce) est quasiment terminée, et la preview peut être testée dans Safari. Quelques noms de propriétés vont probablement changer, mais l'article décrit très clairement comment ça fonctionne.
— Permalink
You no longer need JavaScript Ʊ lyra's epic blog
Perso je n'ai presque jamais eu besoin du JS, encore aujourd'hui je ne l'utilise que dans des cas bien précis où c'est réellement nécéssaire, cet article est vraiment chouette et bien conçu.
— Liens directs
GitHub Alsacréations
Tous les outils d'Alsacréations, du reset CSS aux générateurs de QR code en passant par un outil d'accessibilité. Bref des outils à picorer.
Tchao !
P.S. : Tchao, ça veut dire bye en anglais
— Permalien
Simple One-Time Passcode Inputs – Cloud Four
Comment concevoir correctement un champ OTP (One-Time Password) uniquement avec HTML et CSS.
C'est vrai que la grande majorité de ces champs est une plaie à utiliser (copier/coller qui ne marche pas, curseur qui saute d'un champ à l'autre sans raison, impossibilité d'effacer facilement l'un des numéros, etc.).
— Permalink
Simple One-Time Passcode Inputs – Cloud Four
Comment concevoir correctement un champ OTP (One-Time Password) uniquement avec HTML et CSS.
C'est vrai que la grande majorité de ces champs est une plaie à utiliser (copier/coller qui ne marche pas, curseur qui saute d'un champ à l'autre sans raison, impossibilité d'effacer facilement l'un des numéros, etc.).
— Permalink
Start implementing view transitions on your websites today - Piccalilli
L'utilisation des view transitions CSS n'est pas exactement triviale pour le moment, mais cet article en détricote quelques détails.
— Permalink
Start implementing view transitions on your websites today - Piccalilli
L'utilisation des view transitions CSS n'est pas exactement triviale pour le moment, mais cet article en détricote quelques détails.
— Permalink
