CSS text effect style : demo 29

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Lobster)
                        .text-effect {
                            color: #555;
                            font-family: 'Lobster', cursive;
                            font-size: 100px;
                            text-transform: capitalize;
                            letter-spacing: 15px;
                            position: relative;
                            text-align: center;
                            transform: skew(15deg);
                            animation: animate 1.5s linear alternate infinite;
                        }
                        @keyframes animate{
                            100%{
                                 text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff,
                                            1px 1px #fff, -5px -5px #3498db, -6px -6px #fff,
                                            -4px -4px #fff, -6px -4px #fff, -4px -6px #fff,
                                            -10px -10px #2ecc71, -11px -11px #fff, -9px -9px #fff,
                                            -11px -9px #fff, -9px -11px #fff, -15px -15px #f1c40f,
                                            -16px -16px #fff, -14px -14px #fff, -16px -14px #fff,
                                            -14px -16px #fff, -20px -20px #e056fd, -21px -21px #fff,
                                            -19px -19px #fff, -21px -19px #fff, -19px -21px #fff,
                                            9px 0px #e7e7e7, 8px 1px #e7e7e7, 7px 2px #e7e7e7,
                                            7px 3px #e7e7e7, 6px 4px #e7e7e7, -6px 2px #e7e7e7,
                                            6px 6px #e7e7e7, 0px 6px #e7e7e7, -6px 6px #e7e7e7,
                                            -6px 0px #e7e7e7, -10px -10px #e7e7e7, -12px -23px #e7e7e7,
                                            -9px -20px #e7e7e7, -6px -18px #e7e7e7, -2px -14px #e7e7e7,
                                            2px -10px #e7e7e7, 5px -7px #e7e7e7, 7px -3px #e7e7e7,
                                            -20px -14px #e7e7e7, -2px -14px #e7e7e7, -17px -26px #e7e7e7,
                                            -20px -26px #e7e7e7, -12px -20px #e7e7e7, -27px -23px #e7e7e7,
                                            -26px -20px #e7e7e7, -25px -18px #e7e7e7, -24px -17px #e7e7e7,
                                            -24px -15px #e7e7e7, -22px -13px #e7e7e7, -20px -10px #e7e7e7,
                                            -18px -8px #e7e7e7, -16px -7px #e7e7e7, -15px -3px #e7e7e7,
                                            2px 2px 22px #fff, -22px -22px 22px #fff, -18px -12px 22px #fff,
                                            -5px -15px 22px #fff;
                            }
                        }
                        @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