CSS text effect style : demo 23

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Lobster)
                        .text-effect{
                            color: #e74c3c;
                            font-size: 10em;
                            font-family: 'Lobster', cursive;
                            text-align: center;
                            text-shadow: 1px 2px 6px #efefef , 1px 0 0 rgba(136,136,136,0.7);
                            margin: 0 auto;
                            transform: rotate(0) skew(0);
                            position: relative;
                        }
                        .text-effect:before {
                            content: attr(data-tip);
                            color: rgba(0,0,0,0.2);
                            width: 100%;
                            transform: translateX(-50%) skew(0);
                            position: absolute;
                            left: 50%;
                            z-index: -1;
                            animation: animate 2s alternate infinite;
                        }
                        @keyframes animate{
                            0%{ transform: translateX(-50%) skew(0); }
                            30%{  transform: translateX(-50%) skew(39deg); }
                            70%{ transform: translateX(-50%) skew(-39deg); }
                            100%{ transform: translateX(-50%) skew(0); }
                        }
                        @media only screen and (max-width: 990px){
                            .text-effect{ font-size: 80px; }
                        }
                        @media only screen and (max-width: 767px){
                            .text-effect{ font-size: 55px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 40px; }
                        }
                        @media only screen and (max-width: 359px){
                            .text-effect{ font-size: 35px; }
                        }
                    
License Terms