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

Tu cherches une plateforme cool pour te mettre aux cryptomonnaies ? Viens découvrir BitPanda ou encore Binance.

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 !

Envie de te mettre aux cryptomonnaies ?

Tu as envie de te mettre aux cryptomonnaies mais tu ne sais pas par où commencer ni sur quelle plateforme te créer un compte ?

Il en existe beaucoup qui sont sérieuses et qui te permettront d’acheter des cryptomonnaies en toute sécurité, d’investir et faire du trading si tu le souhaites.

Mais si je ne devais en garder que deux qui sont fiables, faciles à prendre en main, fortement sécurisées et en français, ce serait :

Bitpanda et Binance


Les articles du moment