66 liens privés
Le format SVG peut paraître parfois un peu intimidant, et l'associer à des transitions ou des animations CSS semble encore plus audacieux pour bon nombre de personnes.
Cependant, dans certains cas, l'alchimie entre SVG et CSS est aussi bénéfique qu'extrêmement simple à mettre en oeuvre. Dans ce tutoriel, nous allons suivre étape par étape comment animer un bouton burger simple avec SVG et CSS.
Et voilà, dorénavant votre petite PWA est installable, et vous pouvez proposer à vos utilisateurs les plus fidèles de l'installer sur l'écran d'accueil de leur smartphone 😁.
Les PWA ne sont pas parfaites, mais elles permettent une arrivée sur mobile avec beaucoup moins de pression que de passer par les stores, évidement vu que cela reste du web les intégrations avec le système sont moins poussées, mais quand même, ça marche plutôt pas mal.
The scroll-padding-top property
The scroll-padding-top property is applied to the parent container and acts just like a CSS top padding, defining offsets from the top of the scrolling area.
scroll-padding-top: <value>;
Copy
You can use any px, em, rem, vh, %, etc. value, as well as auto, where the user agent determines the offset as 0px.
Une méthode générique et infaillible pour bâtir une palette de couleurs pour un site web
Un article de fond sur Oklch et une gestion moderne des couleurs en CSS.
I want to share with you a quick way to make illustrations on your website work in both light and dark mode:
COPY
COPY
.dark .invert-on-dark {
filter: invert(1) hue-rotate(180deg);
}
Avec :
- phpcbf
- rector
- phpstan
Faire des blocs en diagonale sans que le texte déborde
Une autre lib PHP pour extraire la couleur dominante et moyenne d'une image
Une lib PHP pour extraire la couleur dominante d'une image et la palette de cette même image.
À intégrer au plugin de SPIP de gestion des couleurs.
On peut faire de super trucs avec les CSS et des masques
reset.css
A style reset that embraces modern CSS features to give you a better base to start off with.
Features
Designed for cascade layers while still using :where to keep a low specificity for unlayered setups.
Auto dark mode using color-scheme.
system-ui font pre-applied.
Accessible, consistent focus outlines.
.visually-hidden class baked in.
Couleur is a modern PHP 8.1+ color library, intended to be compatible with CSS Color Module Level 4.
Il s’agit d’une approche globale, qui privilégie le chargement d’un seul fichier, quelque soit la page du site.
La première partie du fichier détaille les fonctions.
La seconde partie (L63) les rassemble en séquence d’exécution.
App.init() : rassemble les fonctions à lancer au chargement de la page
App.reboot() : rassemble les fonctions à relancer à la suite d’un rechargement ajax de SPIP
App.resize() : rassemble les fonctions à exécuter lorsque la fenêtre du navigateur change de taille, (avec un timer pour essayer de ne pas altérer les performances)
App.scroll() : idem concernant l’événement défilement (« scroll ») de la fenêtre.
(à vous de compléter selon vos besoins...)
Ou l'on découvre que <menu> est une liste en HTML :
Menu List
Same sorta deal as an unordered list, but more of a semantic way to list interactive items, like buttons.
Des idées à suivre pour SPIP par un pro talentueux !
Bonnes pratiques pour faire une note de bas de page accessible.
Un système de calcul de couleur qui procure la même sensation de luminosité quelle que soit la teinte.
Des CSS modernes pour adapter la taille des textes à la largeur du navigateur de manière fluide.