Animez en HTML / CSS vos dépôts Github
Vous êtes développeur, vous mettez du code sur Github et vous trouvez que ça manque un peu de joie, de pep’s, de design ?
Pas de souci, vous allez pouvoir remplir de joie votre readme.md affiché par défaut sur votre projet Github.
Alors comment ?
Et bien, vous pouvez tout simplement coder votre petite animation en HTML + CSS et l’encapsuler dans une balise <foreignObject/> à l’intérieur d’un fichier SVG.
<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg"> <foreignObject width="100%" height="100%"> <div xmlns="http://www.w3.org/1999/xhtml"> <style> @keyframes rotate { 0% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } } @keyframes gradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeIn { 0% { opacity: 0; } 66% { opacity: 0; } 100% { opacity: 1; } } .container { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; width: 100%; height: 400px; background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7); background-size: 600% 400%; animation: gradientBackground 10s ease infinite; border-radius: 10px; color: white; text-align: center; } h1 { font-size: 50px; line-height: 1.3; letter-spacing: 5px; text-transform: uppercase; text-shadow: 0 1px 0 #efefef, 0 2px 0 #efefef, 0 3px 0 #efefef, 0 4px 0 #efefef, 0 12px 5px rgba(0, 0, 0, 0.1); animation: rotate ease-in-out 1s infinite alternate; } p { font-size: 20px; text-shadow: 0 1px 0 #efefef; animation: 5s ease 0s normal forwards 1 fadeIn; } </style> <div class="container"> <h1>Made with HTML & CSS<br/>not an animated GIF</h1> <p>Click to see the source</p> </div> </div> </foreignObject> </svg>
Ensuite, y’a plus qu’à appeler votre fichier SVG custom avec une balise HTML.
Ce qui donne ceci :
Merci à Sindre Sohrus pour l’astuce !
Développeurs, découvrez l'hébergement taillé pour vos projets
Vous êtes développeur web ? Alors vous allez adorer l'Offre Unique de o2switch, conçue spécialement pour vous !
Profitez d'une puissance inégalée avec 12 threads CPU et 48 Go de RAM pour des performances à couper le souffle. Déployez vos projets en quelques clics grâce à Softaculous et ses + de 300 scripts prêts à l'emploi.
La vitesse, vous aimez ? Eux aussi ! C'est pour ça qu'ils vous font fait profiter de la technologie NVMe dernière génération et de puissants caches comme Varnish et LiteSpeed. Tout ça avec la sérénité d'un hébergement français sécurisé par un WAF sur-mesure et un support technique toujours à vos côtés.
Et vous savez quoi ? Tout ça est à vous pour seulement 4,2 € HT/mois. Foncez, c'est le moment de coder sans limites et de donner vie à vos projets les plus fous grâce à o2switch !