Cartes perforées
Des rangées de cartes perforées des années soixante défilent dans un lecteur pendant qu'une lumière froide traverse leurs trous.
Réglages
Code
<div class="pt-uvq16-punch-cards"><i class="lt"></i><div class="rws"><div class="rw" style="--t:34s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:48s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:62s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:41s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:55s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:34s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rw" style="--t:48s"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Arrière-plans
Voir tout : Arrière-plansOù l’utiliser
Avant les écrans, les programmes vivaient sur du carton. Ce fond empile des rangées inclinées de cartes perforées couleur manille avec un bandeau coloré et des repères imprimés, chacune découpée par un masque CSS de quarante colonnes de trous rectangulaires. Les rangées glissent en sens opposés et une bande de lumière passe derrière, visible à travers chaque trou. Uniquement en HTML et CSS.
La première couleur est le carton, la deuxième le bandeau et la troisième la lumière du lecteur. La densité rend les cartes plus petites et ajoute des rangées à l'écran. Un très bon choix pour l'histoire de l'informatique, les plateformes de données, les archives et les événements tech rétro.