Bazen blog yazılarımızda önemli olan kelimeleri cümleleri belirtmek isteyebiliriz , bu eklentimizde efekt uyguladığımız kelime yada cümle hoş bir görüntüye bürünüyor.
Demo için BURAYA tıklayabilirsiniz.
Blogunuzda ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
fatte {
animation: glitch 3s steps(100) infinite;
color: #151515;
font-size: 3em;
text-align: center;
}
@media (min-width: 480px) {
fatte {
font-size: 6em;
}
}
@keyframes glitch {
0% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
1% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
2% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
3% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
4% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
5% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
6% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
7% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
8% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
9% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
10% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
11% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
12% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
13% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
14% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
15% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
16% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
17% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
18% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
19% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
20% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
21% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
22% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
23% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
24% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
25% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
26% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
27% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
28% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
29% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
30% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
31% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
32% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
33% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
34% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
35% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
36% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
37% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
38% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
39% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
40% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
41% { text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime; filter: blur(0);}
42% { text-shadow: 0 0 0 #0c33f5, 0 0 0 lime; filter: blur(0);}
43% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
44% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
45% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
46% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
47% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
48% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
49% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
50% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
51% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
52% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
53% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
54% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
55% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0.5px);}
56% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
57% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
58% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
59% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
60% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; filter: blur(0);}
62% { text-shadow: 0 0 0 red, 0 0 0 lime; filter: blur(0);}
63% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
64% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
65% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
66% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0.5px);}
67% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
68% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
69% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
70% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
71% { text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5; filter: blur(0);}
72% { text-shadow: 0 0 0 red, 0 0 0 #0c33f5; filter: blur(0);}
73% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
74% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
75% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
76% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
77% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
78% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
79% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
80% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
81% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
82% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
83% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
84% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
85% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
86% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
87% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
88% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
89% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
90% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
91% { text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5; filter: blur(0);}
92% { text-shadow: 0 0 0 lime, 0 0 0 #0c33f5; filter: blur(0);}
92% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
93% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
94% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
95% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
96% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
97% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
98% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} }
Şablonunuzu kaydedin işlem bu kadar
Artık blog sayfanızda yeni yayın oluştururken efekt vermek istediğiniz yazıyı <fatte></fatte> içine alınız.
Örnek
<fatte>Yazı Bu Alana Yazılacak</fatte>
SHARE US →