counter style : demo 16

10856

Web Design

9063

Web Development

10259

Brand Building

8562

Responsive Design

HTML

                        
10856

Web Design

9063

Web Development

CSS

                        .demo{ background: #4b5f78; }
                        .counter{
                            padding: 0 20px 20px;
                            text-align: center;
                            z-index: 1;
                            position: relative;
                        }
                        .counter:after{
                            content: "";
                            width: 100%;
                            height: 75%;
                            background: linear-gradient(to right,#15bff7,#1a88da);
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            z-index: -1;
                            transition: all 0.3s ease 0s;
                        }
                        .counter:hover:after{ box-shadow: 0 0 15px rgba(255,255,255,0.6); }
                        .counter .counter-content{
                            width: 100%;
                            height: 100%;
                            background: #f1f1f1;
                            padding: 25px 0 25px;
                            margin-bottom: 15px;
                            overflow: hidden;
                            z-index: 1;
                            position: relative;
                            -webkit-clip-path: polygon(100% 0, 100% 85%, 80% 85%, 70% 100%, 60% 85%, 0 85%, 0 15%);
                            clip-path: polygon(100% 0, 100% 85%, 80% 85%, 70% 100%, 60% 85%, 0 85%, 0 15%);
                        }
                        .counter .counter-icon{
                            font-size: 40px;
                            color: #1a88da;
                            transform: rotateX(360deg);
                            transition: all 0.3s ease 0s;
                        }
                        .counter:hover .counter-icon{ transform: rotateX(0); }
                        .counter .counter-value{
                            display: block;
                            font-size: 40px;
                            font-weight: 700;
                            color: #606060;
                            margin: 0 0 60px;
                        }
                        .counter .title{
                            font-size: 19px;
                            font-weight: 600;
                            color: #fff;
                            text-transform: uppercase;
                            margin: 0;
                        }
                        .counter.green:after{ background: linear-gradient(to right,#b4d93d,#789532); }
                        .counter.green .counter-icon{ color: #789532; }
                        .counter.orange:after{ background: linear-gradient(to right,#f9b840,#f07d24); }
                        .counter.orange .counter-icon{ color: #f07d24; }
                        .counter.pink:after{ background: linear-gradient(to right,#f56a87,#ca3e57); }
                        .counter.pink .counter-icon{ color: #ca3e57; }
                        @media only screen and (max-width: 1200px){
                            .counter .title{ font-size: 16px; }
                        }
                        @media only screen and (max-width: 990px){
                            .counter{ margin-bottom: 30px; }
                        }
                    

JavaScript

(Counter depend on jQuery.)
                        

                        $(document).ready(function(){
                            $('.counter-value').each(function(){
                                $(this).prop('Counter',0).animate({
                                    Counter: $(this).text()
                                },{
                                    duration: 3500,
                                    easing: 'swing',
                                    step: function (now){
                                        $(this).text(Math.ceil(now));
                                    }
                                });
                            });
                        });
                    
License Terms