Un outil pour générer des effets de soulignement sur des liens (via https://blog.shevarezo.fr/post/2021/10/27/underline-generator-generateur-effets-soulignements-liens )
Tout est dans le titre
Tout est dans le titre... Toutes les techniques présentées ici sont indépendantes du fait que le site soit du Next.js
Celle retenue par l'auteur :
.fancy-button {
--_color: var(--color, black);
border: .1em solid var(--_color);
background: transparent;
color: var(--_color);
}
.fancy-button:hover {
background: var(--_color);
color: white;
}
L'avantage c'est qu'il est possible de définir --color ailleurs... et on est certain qu'il y aura une couleur par défaut.
Tout est dans le titre
Comment créer / utiliser des formes circulaires en CSS : arrière-plan, rogner, faire qu'un texte suive une forme circulaire, etc.
Un ensemble de ressources sir mes CSS modernes
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre.
Tout est dans le titre
Le sélecteur :focus-visible est actif uniquement lors de la navigation clavier. À utiliser notamment pour mettre outline: none sur :focus et rendre la navigation au clavier accessible
Tout est dans le titre
Tout est dans le titre
Un ensemble de techniques utilisant des propriétés CSS récentes (clip-path, gradient, mix-blend, etc.), et permettant de ne pas utiliser de pseudo éléments - ce qui résout pas mal de pb (z-index, éléments peu flexibles, etc.)
Tout est dans le titre
Quelques pièges avec les Custom Properties en CSS
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre... sauf que ça utilise les grilles (grid-layout)