cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              -@options = [{:id => '1',:key => 'Active Users',:value => '2,343',:checked => 'checked',:keyicon => 'person'},{:id => '2',:key => 'Data Useage',:checked => 'no',:keyicon => 'ios-analytics'},{:id => '3',:key => 'Posts Made',:checked => 'no',:keyicon => 'compose'},{:id => '4',:key => 'Video Count',:checked => 'no',:keyicon => 'ios-videocam'}]

-@stat1 = [{:stat => '233,231',:description => 'Github',:icon => 'social-octocat'},{:stat => '129,123',:description => 'Whatsapp',:icon => 'social-whatsapp'},{:stat => '123,938',:description => 'Skype',:icon => 'social-skype'},{:stat => '382,238',:description => 'Youtube',:icon => 'social-youtube'}]

-@stat2 = [{:stat => '24,382 Gb',:description => 'Github',:icon => 'social-octocat'},{:stat => '89,293 Gb',:description => 'Whatsapp',:icon => 'social-whatsapp'},{:stat => '293,382 Gb',:description => 'Skype',:icon => 'social-skype'},{:stat => '38,273 Gb',:description => 'Youtube',:icon => 'social-youtube'}]

-@stat3 = [{:stat => '1,232,453',:description => 'Github',:icon => 'social-octocat'},{:stat => '9,293,341',:description => 'Whatsapp',:icon => 'social-whatsapp'},{:stat => '98,298,231',:description => 'Skype',:icon => 'social-skype'},{:stat => '88,823,281',:description => 'Youtube',:icon => 'social-youtube'}]

-@stat4 = [{:stat => '12,324,565',:description => 'Github',:icon => 'social-octocat'},{:stat => '15,533,425',:description => 'Whatsapp',:icon => 'social-whatsapp'},{:stat => '19,293,204',:description => 'Skype',:icon => 'social-skype'},{:stat => '22,132,425',:description => 'Youtube',:icon => 'social-youtube'}]

.charts
    .charts_inner
        .title
            %h1 3D Stat Bars
            %h2 Using CSS only
        .charts_inner__options
            - @options.each do |option|
                %input{:type => 'radio',:name => 'option', :id => "c-#{option[:id]}","#{option[:checked]}" => "#{option[:checked]}"}
                %label{:for => "c-#{option[:id]}"}
                    %i{:class => "ion-#{option[:keyicon]}"}
                    #{option[:key]}
            .chart
                - @options.each do |option|
                    .chart_item{:class => "c-#{option[:id]}"}
                        .cube
                            .cube_inner
                                .cube_front
                                .cube_back
                                .cube_left
                                .cube_right
                                .cube_top
                                .cube_bottom
                            .cube_shadow
                .stat_block
                    - @stat1.each do |stat|
                        .cube_details#one
                            .cube_details__icon
                                %i{:class => "ion-#{stat[:icon]}"}
                            .cube_details__stat
                                %h2 #{stat[:description]}
                                %span #{stat[:stat]}
                .stat_block
                    - @stat2.each do |stat|
                        .cube_details#two
                            .cube_details__icon
                                %i{:class => "ion-#{stat[:icon]}"}
                            .cube_details__stat
                                %h2 #{stat[:description]}
                                %span #{stat[:stat]}
                .stat_block
                    - @stat3.each do |stat|
                        .cube_details#three
                            .cube_details__icon
                                %i{:class => "ion-#{stat[:icon]}"}
                            .cube_details__stat
                                %h2 #{stat[:description]}
                                %span #{stat[:stat]}
                .stat_block
                    - @stat4.each do |stat|
                        .cube_details#four
                            .cube_details__icon
                                %i{:class => "ion-#{stat[:icon]}"}
                            .cube_details__stat
                                %h2 #{stat[:description]}
                                %span #{stat[:stat]}
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300italic,300,500,700);
// Mixins
// Jcoulterdesign make cube mixin ( Used in a lot of my other 3D pens )
@mixin make-cube($size, $color, $animate) {
    width: $size;
    transition: all .45s cubic-bezier(0.360, 1.640, 0.290, 0.880);
    transform-style: preserve-3d;
    transform: rotate(180deg);
    position: absolute;
    bottom: 0;
    @if $animate==true {
        animation: spin 3s infinite;
    }
    div {
        position: absolute;
        width: $size;
        height: $size;
        background: $color;
        transform-origin: 50% 50%;
    }
    div.cube_front {
        transform: translateZ($size / 2);
        background-image: linear-gradient(to bottom, rgb(220, 237, 255) 0%, rgba(29, 88, 136, 0) 100%);
    }
    div.cube_back {
        transform: translateZ(- $size / 2);
    }
    div.cube_left {
        transform: rotateY(90deg) translateZ(- $size / 2);
        background-color: darken($color, 2);
        background-image: linear-gradient(to bottom, rgb(196, 215, 234) 0%, rgba(29, 88, 136, 0) 100%);
    }
    div.cube_right {
        transform: rotateY(90deg) translateZ($size / 2);
        background-color: darken($color, 2);
        background-image: linear-gradient(to bottom, rgb(196, 215, 234) 0%, rgba(29, 88, 136, 0) 100%);
    }
    div.cube_top {
        transform: rotateX(90deg) translateZ($size / 2);
        background-color: darken($color, 4);
        background-image: linear-gradient(to bottom, rgb(220, 237, 255) 0%, rgba(29, 88, 136, 0) 100%);
    }
    div.cube_bottom {
        transform: rotateX(90deg) translateZ(- $size / 2);
        background-color: darken($color, 4);
        background-image: linear-gradient(to bottom, rgb(220, 237, 255) 0%, rgba(29, 88, 136, 0) 100%);
    }
}

* {
    box-sizing: border-box;
}

// Placeholders
%active {
    h2,
    span {
        opacity: 1;
        top: 0px;
    }
    i {
        opacity: 1;
        left: 0px;
        //top:40px;
        transition: all .2s .4s;
    }
    h2 {
        transition: all .2s .5s;
    }
    span {
        transition: all .2s .6s;
    }
}

// Styles
body {
    font-family: 'Fira Sans', sans-serif;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gridz.png"), -webkit-radial-gradient(center, ellipse cover, transparent 0%, rgba(0, 0, 0, .9) 100%), linear-gradient(to bottom, #98336B 0%, #A0072E 100%);
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gridz.png"), -moz-radial-gradient(center, ellipse cover, transparent 0%, rgba(0, 0, 0, .9) 100%), linear-gradient(to bottom, #98336B 0%, #A0072E 100%);
    height: 100vh;
    overflow: hidden;
    .title {}
    .charts {
        &_inner {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 50%;
            text-align: center;
            transform: translateY(-50%);
            h1 {
                color: white;
                font-weight: 100;
            }
            h2 {
                color: white;
                font-weight: 100;
                font-size: 16px;
                margin: -10px 0px 60px 0px;
                color: #d04760;
            }
            &__options {
                input[type="radio"] {
                    display: none;
                }
                label {
                    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.04), 0px -1px 0px 0px #90285D inset, 0px -2px 0px 0px rgba(255, 255, 255, 0.14) inset;
                    transition: all .2s, box-shadow .01s;
                    cursor: pointer;
                    display: inline-block;
                    background-image: linear-gradient(to bottom, #CD455E 0%, #8C275D 100%);
                    color: white;
                    font-weight: 200;
                    padding: 14px 30px;
                    font-size: 14px;
                    margin: 0 -4px;
                    &:nth-of-type(4) {
                        border-top-right-radius: 40px;
                        border-bottom-right-radius: 40px;
                    }
                    &:nth-of-type(1) {
                        border-top-left-radius: 40px;
                        border-bottom-left-radius: 40px;
                    }
                    i {
                        margin-right: 10px;
                        transition: all .2s;
                        position: relative;
                        top: 0px;
                        transform: scale(1);
                    }
                    &:hover {
                        color: white;
                        transition: all .2s, box-shadow .1s;
                        background-image: linear-gradient(to bottom, #91295D 0%, #751B44 100%);
                        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
                        z-index: -1;
                    }
                }
                // Labels
                input[type="radio"]:checked + label {
                    color: white;
                    transition: all .2s, box-shadow .1s;
                    background-image: linear-gradient(to bottom, #91295D 0%, #751B44 100%);
                    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
                    z-index: -1;
                    i {
                        transform: scale(1.2);
                        color: #EF376C;
                    }
                    z-index:-1;
                }
                // Input checks
                input[type="radio"]#c-4:checked + label + .chart {
                    @for $i from 1 through 4 {
                        .c-#{$i} .cube .cube_inner {
                            transform: rotate(180deg) scaleY(random(3)/(random(3) + 1));
                        }
                        #four {
                            @extend %active;
                        }
                    }
                }
                input[type="radio"]#c-3:checked + label + input + label + .chart {
                    @for $i from 1 through 4 {
                        .c-#{$i} .cube .cube_inner {
                            transform: rotate(180deg) scaleY(random(3)/(random(3) + 1));
                        }
                        #three {
                            @extend %active;
                        }
                    }
                }
                input[type="radio"]#c-2:checked + label + input + label + input + label + .chart {
                    @for $i from 1 through 4 {
                        .c-#{$i} .cube .cube_inner {
                            transform: rotate(180deg) scaleY(random(3)/(random(12) + 1));
                        }
                        #two {
                            @extend %active;
                        }
                    }
                }
                input[type="radio"]#c-1:checked + label + input + label + input + label + input + label + .chart {
                    @for $i from 1 through 4 {
                        .c-#{$i} .cube .cube_inner {
                            transform: rotate(180deg) scaleY(random(3)/(random(3) + 1));
                        }
                        #one {
                            @extend %active;
                        }
                    }
                }
                margin:0 auto;
                width: 740px;
                text-align: center;
                .chart {
                    clear: both;
                    padding: 60px 0px 120px 0px;
                    transform-style: preserve-3d;
                    perspective: 800px;
                    overflow: hidden;
                    position:relative;
                    .stat_block{
                        position:absolute;
                        width:100%;
                        bottom:80px;
                    }
                    .cube_details {
                        position: relative;
                        bottom: -40px;
                        left: 0;
                        right: 0;
                        margin: auto;
                        width: 180px;
                        float: left;
                        text-align: center;
                        color: white;
                        text-align: left;
                        font-size: 20px;
                        
                        h2 {
                            color: #d04760;
                            font-weight: 100;
                            font-size: 13px;
                            text-align: left;
                            margin: 0;
                            position: relative;
                            top: 4px;
                            opacity: 0;
                            transition: all .2s .1s;
                        }
                        span {
                            position: relative;
                            top: 4px;
                            opacity: 0;
                            transition: all .2s .2s;
                        }
                        &__icon {
                            float: left;
                            font-size: 32px;
                            margin-right: 14px;
                            margin-left: 18px;
                            i {
                                position: relative;
                                transition: all .2s .1s;
                                left: -4px;
                                opacity: 0;
                                top:4px;
                            }
                        }
                        &__stat {
                            float: left;
                        }
                    }
                    &_item {
                        width: 180px;
                        padding: 30px;
                        height: 200px;
                        float: left;
                        position: relative;
                        .cube {
                            &_inner {
                                @include make-cube(100px,
                                white,
                                false);
                            }
                            div.cube_shadow {
                                background-color: rgba(0, 0, 0, 0.36);
                                position: absolute;
                                box-shadow: 0px 0px 50px 24px rgba(0, 0, 0, 0.36);
                                bottom: 0px;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 40px;
                                z-index: -1;
                            }
                        }
                    }
                }
            }
        }
    }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console