CSS text effect style : demo 234

Best jQuery

HTML

1
2
3
<div class="text-effect" data-content="Best jQuery">
    <span>Best jQuery</span>
</div>

CSS

(Fonts required : Rowdies)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
:root{
    --s: -1;
    --color1:#D6A2E8;
    --color2:#82589F;
}
.text-effect{
    color:transparent;
    font-family: "Rowdies", sans-serif;
    font-size: 100px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 2px;
    overflow: hidden;
    position: relative;
}
.text-effect:before{
    content: attr(data-content);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-shadow: 0 0 0 var(--color1), 0 calc(var(--s, 1) * 1.2em) 0 var(--color1);
    animation: animate 1s infinite;
}
@keyframes animate{
    80%, 100% { text-shadow: 0 calc(var(--s, 1) * -1.2em) 0 var(--color2), 0 0 0 var(--color2); }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 70px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 576px){
    .text-effect{ font-size: 40px; }
}  
License Terms