CSS text effect style : demo 80

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : New Rocker)
                        .text-effect{
                            color: #d1d1d1;
                            font-family: 'New Rocker', cursive;
                            font-size: 100px;
                            font-weight: bold;
                            text-align: center;
                            letter-spacing: 2px;
                            text-transform: uppercase;
                        }
                        .text-effect span{
                            text-shadow: 1px 1px 0 #808080, 1px 2px 0 #808080, 1px 3px 0 #808080,
                                        1px 4px 0 #808080,1px 5px 0 #808080, 1px 6px 0 #808080,
                                        1px 7px 0 #808080, 1px 8px 0 #808080,1px 9px 0 #808080,
                                        1px 10px 0 #808080,5px 13px 15px rgba(0,0,0,0.5);
                            display: inline-block;
                            animation: 1s animate alternate infinite;
                        }
                        @keyframes animate{
                            100%{
                                transform: scale(1.1);
                                text-shadow: 1px -1px 0 #808080, 1px -2px 0 #808080, 1px -3px 0 #808080,
                                            1px -4px 0 #808080,1px -5px 0 #808080, 1px -6px 0 #808080,
                                            1px -7px 0 #808080, 1px -8px 0 #808080,1px -9px 0 #808080,
                                            1px -10px 0 #808080,5px -13px 15px rgba(0,0,0,0.5);
                            }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 65px; }
                        }
                        @media only screen and (max-width: 576px){
                            .text-effect{ font-size: 45px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 30px; }
                        }
                    
License Terms