![[ CSS ] Ajouter un effet glitch !](https://archive.djerfy.com/wp-content/uploads/bfi_thumb/dummy-transparent-nifek5r9c2wuknzl5yd8zkpgdvze38l1s92v6oroy2.png "[ CSS ] Ajouter un effet glitch !")
[ CSS ] Ajouter un effet glitch !
Hello les geek !
La semaine dernière je suis tombé sur un site ou l’effet glitch était utilisé via un CSS et j’ai trouvé le sujet plutôt cool. J’ai fouillé un peu dans le code pour reproduire la même chose (l’effet se trouve sur mon pseudo dans le footer du site, à côté de la version du blog). C’pas mal vous trouvez pas ?
Il faut savoir qu’un glitch est une défaillance électronique (ou électrique) qui correspond à une fluctuation dans les circuits électroniques (ou à une coupure de courant), ce qui entraîne un dysfonctionnement du matériel informatique (hardware) et occasionne à son tour des répercussions sur les logiciels (software). Je vous invite à consulter la page wikipédia si vous souhaitez avoir plus d’info sur ce terme 🙂
Pour l’affichage de cet effet, il faudra lui associer la classe « glitch » (enfin c’est le nom que je lui ai donné, libre a vous de mettre ce que vous souhaitez…). Pour que cette classe soit disponible il faut rajouter quelques lignes dans votre fichier CSS :
.glitch { position: relative; animation: glitch 2s steps(100) infinite; }
@keyframes glitch {
0% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
1% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
2% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
3% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
4% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
5% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
6% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
7% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
8% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
9% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
10% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
11% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
12% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
13% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
14% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
15% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
16% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
17% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
18% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
19% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
20% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
21% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
22% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
23% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
24% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
25% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
26% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
27% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
28% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
29% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
30% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
31% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
32% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
33% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
34% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
35% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
36% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
37% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
38% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
39% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
40% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
41% { text-shadow: 50px 0 0 blue, -50px 0 0 lime; }
42% { text-shadow: 0 0 0 blue, 0 0 0 lime; }
43% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
44% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
45% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
46% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
47% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
48% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
49% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
50% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
51% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
52% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
53% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
54% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
55% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
56% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
57% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
58% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
59% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
60% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; }
62% { text-shadow: 0 0 0 red, 0 0 0 lime; }
63% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
64% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
65% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
66% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue; }
67% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
68% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
69% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
70% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
71% { text-shadow: 70px 0 0 red, -70px 0 0 blue; }
72% { text-shadow: 0 0 0 red, 0 0 0 blue; }
73% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
74% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
75% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
76% { text-shadow: 1px 0 0 red, -1px 0 0 blue; }
77% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
78% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
79% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
80% { text-shadow: -1px 0 0 red, 1px 0 0 blue; }
81% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
82% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
83% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
84% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
85% { text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime; }
86% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
87% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
88% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
89% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
90% { text-shadow: -1px 0 0 red, 1px 0 0 lime; }
91% { text-shadow: 60px 0 0 lime, -60px 0 0 blue; }
92% { text-shadow: 0 0 0 lime, 0 0 0 blue; }
92% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
93% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
94% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
95% { text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime; }
96% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
97% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
98% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
99% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
100% { text-shadow: -1px 0 0 blue, 1px 0 0 lime; }
}
J’utilise WordPress avec un thème totalement personnalisé, j’ai donc rajouté les lignes dans le fichier « style.css » se trouvant à la racine de votre thème (enfin normalement). N’oubliez pas de mettre un commentaire pour ne pas oublier à quoi servent ces lignes…
Ensuite pour utiliser l’effet il faut utiliser la classe « glitch », voilà un exemple (attention avec les doubles quotes) :
<span class= »glitch »>Mon texte ici</span>
Il existe d’autres effets de ce type, voir par exemple sur ce site 🙂
Bon développement !
![[ Edito ] Blog en standby !](https://archive.djerfy.com/wp-content/uploads/bfi_thumb/dummy-transparent-ds788kexymg3vgc2pp2q0l04wfwi1wijy1iv0wv1bq6g3yrpb418uxu.png)
