cloud_off
Vous êtes hors ligne. Reconnectez-vous pour continuer à naviguer.
data_object
Bibliothèque d’extraits
Des extraits testés, prêts à copier, en Python, Flask, JavaScript, SQL, HTML, CSS et Bash. Ouvrez-les dans le playground.
Afficher seulement les snippets enregistrés dans ce navigateur
6 extraits
css
star
bookmark_border
Cards wrap to as many columns as fit, with a sensible minimum width.
.grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
beginner
#grid #layout #responsive
css
bookmark_border
Define colours once, switch them with a data attribute.
:root {
--bg: #07080b; --surface: #101318; --text: #eceef3; --muted: #a7aebc; --accent: #2f6bff;
color-scheme: dark;
}
:root[data-theme="light"] {
intermediate
#theming #dark-mode #variables
css
bookmark_border
Turn animations off for people who asked their system for less motion.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
beginner
#accessibility #animation
css
bookmark_border
Keep the footer at the bottom of the window on short pages.
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
beginner
#layout #flexbox #footer
css
bookmark_border
Show an ellipsis after three lines.
.excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
beginner
#typography #text
css
bookmark_border
Show a clear focus ring for keyboard users without showing it on mouse clicks.
:where(a, button, input, select, textarea):focus { outline: none; }
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid #2f6bff;
outline-offset: 2px;
border-radius: 6px;
beginner
#accessibility #focus
bookmark_border Aucun snippet enregistré sur cette page. Utilisez le bouton signet pour en enregistrer un.
groups
Rejoindre PandaDev
Vous apprenez avec nous ? Développeurs et designers peuvent postuler pour travailler avec l’équipe sur de vrais projets clients.
person_add Postuler