Skip to content
Korben, roi d’internet, logo bébé avec des lunettes en mode thug life

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 &amp; 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 !


NordVPN à moins de 3€/mois

-68% 3,3€/mois durant 2 ans

Protection en un clic, fonctionnalité Kill Switch, masquage de votre adresse IP, prise en charge des partages de fichiers en p2p, protection contre les malwares et les pubs, streaming sans interruption, test de fuite DNS et même possibilité de coupler l’outil avec l’anonymat de The Onion Router … sont quelques-unes des autres options disponibles.

NordVPN a tissé une toile de serveurs dans le monde entier (plus de 5 500 dans 60 pays) permettant ainsi de se localiser dans la zone géographique de son choix. Vous avez envie d’un Anime japonais ou bien d’une exclusivité US ? Aucun problème. À vrai dire, vous pouvez même vous localiser en France en cas de déplacement à l’étranger.

En complément de cet impressionnant réseau, NordVPN a aussi développé la fonctionnalité SmartPlay qui permet d’accéder en toute sécurité aux contenus qui sont normalement inaccessibles. C’est un système de SmartDNS performant qui ne nécessite pas d’intervention complexe, vous profitez d’une connexion sécurisée et vous visionnez le contenu de votre choix en streaming sans vous prendre la tête.

Profiter de la promo



Les articles du moment