cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

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.

            
              <body>
    <div id='canvas' class='canvas'>
        <div id='canvas-bg-winter' class='canvas-bg' ></div>
        <div id='canvas-bg-autum' class='canvas-bg' ></div>
        <div id='canvas-bg-summer' class='canvas-bg' ></div>

        <div class='canvas-content'>
            <div class='b5 c4'></div>
            <div class='b6 c1'></div>
            <div class='b7 c32'></div>
            <div class='b3 c2'></div>
            <div class='b4 c4'></div>
            <div class='b12 c3'></div>
            <div class='b11 c4'></div>
            <div class='b10 c7'></div>
            <div class='b13 c5'></div>
            <div class='b14 c1'></div>
            <div class='b2 c4'></div>
            <div class='b15 c2'></div>
            <div class='b16 c4'></div>
            <div class='b17 c7'></div>
            <div class='b8 c2'></div>
            <div class='b9 c3'></div>
            <div class='b18 c6'></div>
            <div class='b19 c5'></div>
            <div class='b20 c4'></div>
            <div class='b21 c2'></div>
            <div class='b1 c1'></div>
            <div class='b22 c4'></div>
            <div class='b23 c4'></div>
            <div class='b24 c7'></div>
            <div class='b25 ct4'></div>
            <div class='b26 ct3'></div>
            <div class='b28 ct4'></div>
            <div class='b29 ct2'></div>
            <div class='b30 ct3'></div>
            <div class='b27 ct4'></div>
            <div class='b31 ct4'></div>
            <div class='b33 ct1'></div>
            <div class='b32 ct2'></div>
            <div class='b34 ct2'></div>
            <div class='b35 ct4'></div>
            <div class='b36 ct4'></div>
            <div class='b37 ct4'></div>
            <div class='cloud cloud-1'></div>
            <div class='cloud cloud-2'></div>
        </div>
    </div>
    <div class='buttons'>
        <p class='bt' id='winter'>winter</p>
        <p class='bt' id='autum'>autum</p>
        <p class='bt' id='summer'>summer</p>
    </div>
</body>

            
          
!
            
              /* http://www.colorzilla.com/gradient-editor/ */
html{
  font-family: helvetica, arial;
}
html, body{
  margin: 0;
}
body{
  position: absolute;
  width: 100%;
  height: 100%;
}

/*CANVAS*/
.canvas{
  position: absolute;
  width: 100%;
  height: 100%;
}
.canvas-bg{
  /*background-image: url('https://d13yacurqjgara.cloudfront.net/users/707385/screenshots/2437286/75.jpg');*/
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 100%;
  transition: .55s all;
  opacity: 0;
}
#canvas-bg-winter{
  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(192,236,235,0) 54%,rgba(163,227,226,0.54) 79%,rgba(163,227,226,1) 100%);
}
#canvas-bg-autum{
    background: radial-gradient(ellipse at center, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
}
#canvas-bg-summer{
    background: radial-gradient(ellipse at center, rgba(254,252,234,1) 0%,rgba(44,160,197,0.69) 100%);
}


.canvas-bg.active{
    opacity: 1;
}
.canvas-content{
    position: absolute;
    width: 500px;
    height: 425px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.canvas-content *{
  position: absolute;
  width: 0;
  height: 0;
  transition: 1.05s all;
}

.canvas-content div:nth-child(2){ transition-delay: 0.2s }
.canvas-content div:nth-child(3){ transition-delay: 0.3s }
.canvas-content div:nth-child(4){ transition-delay: 0.4s }
.canvas-content div:nth-child(5){ transition-delay: 0.5s }
.canvas-content div:nth-child(6){ transition-delay: 0.6s }
.canvas-content div:nth-child(7){ transition-delay: 0.7s }
.canvas-content div:nth-child(8){ transition-delay: 0.8s }
.canvas-content div:nth-child(9){ transition-delay: 0.9s }
.canvas-content div:nth-child(10){ transition-delay: 1.0s }
.canvas-content div:nth-child(11){ transition-delay: 1.1s }
.canvas-content div:nth-child(12){ transition-delay: 1.2s }
.canvas-content div:nth-child(13){ transition-delay: 1.3s }
.canvas-content div:nth-child(14){ transition-delay: 1.4s }
.canvas-content div:nth-child(15){ transition-delay: 1.5s }
.canvas-content div:nth-child(16){ transition-delay: 1.6s }
.canvas-content div:nth-child(17){ transition-delay: 1.7s }
.canvas-content div:nth-child(18){ transition-delay: 1.8s }
.canvas-content div:nth-child(19){ transition-delay: 1.9s }
.canvas-content div:nth-child(20){ transition-delay: 2.0s }
.canvas-content div:nth-child(21){ transition-delay: 2.1s }
.canvas-content div:nth-child(22){ transition-delay: 2.2s }
.canvas-content div:nth-child(23){ transition-delay: 2.3s }
.canvas-content div:nth-child(24){ transition-delay: 2.4s }
.canvas-content div:nth-child(25){ transition-delay: 2.5s }
.canvas-content div:nth-child(26){ transition-delay: 2.6s }
.canvas-content div:nth-child(27){ transition-delay: 2.7s }
.canvas-content div:nth-child(28){ transition-delay: 2.8s }
.canvas-content div:nth-child(29){ transition-delay: 2.9s }
.canvas-content div:nth-child(30){ transition-delay: 3.0s }
.canvas-content div:nth-child(31){ transition-delay: 3.1s }
.canvas-content div:nth-child(32){ transition-delay: 3.2s }
.canvas-content div:nth-child(33){ transition-delay: 3.3s }
.canvas-content div:nth-child(34){ transition-delay: 3.4s }
.canvas-content div:nth-child(35){ transition-delay: 3.5s }
.canvas-content div:nth-child(36){ transition-delay: 3.6s }
.canvas-content div:nth-child(37){ transition-delay: 3.7s }
/*Tree*/
.b1{
    border-left: 129px solid black;
    border-bottom: 74px solid transparent !important;
    border-top: 82px solid transparent !important;
    left: 267px;
    top: 62px;
    transform: rotate(-58deg);
}
.b2{
    border-top: 30px solid rebeccapurple;
    border-left: 63px solid transparent !important;
    border-right: 94px solid transparent !important;
    left: 211px;
    top: 192px;
    transform: rotate(32deg);
}
.b3{
    border-top: 30px solid rebeccapurple;
    border-left: 33px solid transparent !important;
    border-right: 34px solid transparent !important;
    left: 209px;
    top: 184px;
    transform: rotate(-8deg);
}
.b4{
    border-top: 30px solid red;
    border-left: 36px solid transparent !important;
    border-right: 34px solid transparent !important;
    left: 193px;
    top: 205px;
    transform: rotate(33deg);
}
.b5{
    border-left: 36px solid red;
    border-top: 38px solid transparent !important;
    border-bottom: 34px solid transparent !important;
    left: 419px;
    top: 176px;
    transform: rotate(56deg)
}
.b6{
    border-right: 11px solid green;
    border-top: 52px solid transparent !important;
    border-bottom: 34px solid transparent !important;
    left: 414px;
    top: 153px;
    transform: rotate(56deg);
}
.b7{
    width: 0;
    height: 0;
    left: 374px;
    top: 80px;
    border-right: 20px solid orange;
    border-top: 137px solid transparent !important;
    border-bottom: 14px solid transparent !important;
    background: transparent;
    transform: rotate(-21deg);
}
.b8{
    border-left: 118px solid blue;
    border-top: 30px solid transparent !important;
    border-bottom: 71px solid transparent !important;
    left: 372px;
    top: 210px;
}
.b9{
    border-left: 35px solid green;
    border-top: 94px solid transparent !important;
    left: 364px;
    top: 102px;
    height: 61px;
    transform: rotate(1deg) skewY(51deg) skewX(-3deg);
}
.b10{
    border-left: 24px solid red;
    border-bottom: 35px solid transparent !important;
    border-top: 22px solid transparent !important;
    left: 305px;
    top: 299px;
    transform: rotate(23deg);
}
.b11{
    border-left: 37px solid purple;
    border-bottom: 38px solid transparent !important;
    border-top: 43px solid transparent !important;
    left: 271px;
    top: 291px;
    transform: rotate(63deg);
}
.b12{
    border-bottom: 46px solid red;
    border-right: 60px solid transparent !important;
    border-left: 30px solid transparent !important;
    left: 234px;
    top: 272px;
    transform: rotate(-23deg);
}
.b13{
    border-top: 75px solid orange;
    border-left: 81px solid transparent !important;
    border-right: 72px solid transparent !important;
    left: 169px;
    top: 240px;
}
.b14{
    border-top: 85px solid green;
    border-left: 81px solid transparent !important;
    border-right: 72px solid transparent !important;
    left: 177px;
    top: 196px;
    transform: rotate(-30deg);
}
.b15{
    border-top: 79px solid blue;
    border-left: 1px solid transparent !important;
    border-right: 97px solid transparent !important;
    left: 254px;
    top: 221px;
    transform: rotate(15deg) skewX(-4deg) skewY(0deg);
}
.b16{
    border-right: 128px solid red;
    border-top: 53px solid transparent !important;
    border-bottom: 10px solid transparent !important;
    left: 245px;
    top: 232px;
}
.b17{
    border-left: 35px solid lightseagreen;
    border-top: 0px solid transparent !important;
    border-bottom: 19px solid transparent !important;
    top: 296px;
    left: 347px;
    height: 20px;
    transform: skewX(4deg) skewY(-21deg) rotate(-23deg);
}
.b18{
    border-top: 36px solid blue;
    border-left: 88px solid transparent !important;
    border-right: 32px solid transparent !important;
    top: 289px;
    left: 243px;
    transform: rotate(4deg);
}
.b19{
    border-bottom: 35px solid blue;
    border-right: 47px solid transparent !important;
    border-left: 8px solid transparent !important;
    top: 315px;
    left: 361px;
    transform: rotate(13deg);
}
.b20{
    border-right: 27px solid red;
    border-top: 80px solid transparent !important;
    border-bottom: 0px solid transparent !important;
    top: 294px;
    left: 379px;
    transform: rotate(-70deg) skewY(49deg);
}
.b21{
    border-top: 52px solid blue;
    border-right: 22px solid transparent !important;
    border-left: 67px solid transparent !important;
    top: 297px;
    left: 378px;
    transform: rotate(-18deg);
}
.b22{
    border-top: 21px solid red;
    border-right: 55px solid transparent !important;
    border-left: 90px solid transparent !important;
    top: 274px;
    left: 364px;
    transform: rotate(-31deg);
}
.b23{
    border-left: 20px solid red;
    border-top: 27px solid transparent !important;
    top: 246px;
    left: 372px;
}
.b24{
    border-right: 8px solid red;
    border-top: 20px solid transparent !important;
    top: 273px;
    left: 364px;
}
.b25{
    border-right: 8px solid red;
    border-top: 40px solid transparent !important;
    top: 319px;
    left: 318px;
    transform: rotate(-51deg);
}
.b26{
     border-left: 4px solid blue;
    border-top: 40px solid transparent !important;
    top: 310px;
    left: 318px;
    transform: rotate(-51deg);
}
.b27{
    border-right: 6px solid green;
    border-top: 7px solid transparent;
    border-bottom: 97px solid transparent;
    top: 308px;
    left: 331px;
    transform: rotate(5deg);
}
.b28{
    border-right: 19px solid blue;
    border-top: 32px solid transparent !important;
    top: 391px;
    left: 315px;
}
.b29{
    border-left: 10px solid red;
    border-top: 50px solid transparent !important;
    border-bottom: 49px solid transparent !important;
    top: 307px;
    left: 337px;
    transform: rotate(5deg);
}
.b30{
    height: 32px;
    top: 307px;
    left: 346px;
    border-right: 9px solid blue;
    border-bottom: 71px solid transparent;
    border-top: 5px solid transparent;
    transform: rotate(-11deg);
}
.b31{
    border-left: 10px solid green;
    border-top: 8px solid transparent !important;
    border-bottom: 61px solid transparent !important;
    top: 357px;
    left: 336px;
    transform: rotate(17deg);
}
.b32{
    border-right: 27px solid red;
    border-top: 53px solid transparent !important;
    top: 370px;
    left: 325px;
    transform: skewX(3deg);
}
.b33{
    border-left: 17px solid green;
    border-top: 50px solid transparent !important;
    top: 370px;
    left: 351px;
    border-bottom: 3px solid transparent !important;
}
.b34{
    border-top: 9px solid yellow;
    border-left: 2px solid transparent !important;
    border-right: 52px solid transparent !important;
    top: 344px;
    left: 343px;
    transform: rotate(-31deg);
}
.b35{
    border-bottom: 7px solid cyan;
    border-right: 52px solid transparent !important;
    top: 344px;
    left: 345px;
    transform: rotate(-49deg) skewX(17deg);
}
.b36{
    border-bottom: 4px solid red;
    border-left: 73px solid transparent !important;
    top: 419px;
    left: 244px;
}
.b37{
    border-bottom: 5px solid red;
    border-right: 73px solid transparent !important;
    top: 418px;
    left: 349px;
    border-left: 19px solid transparent !important;
}

/*COLOURS*/
.c1{
  border-color: #e0e8eb;
}
.c2{
  border-color: #c5ced5;
}
.c3{
  border-color: #b9c2c7;
}
.c32{
  border-color: #d5dae0;
}
.c4{
  border-color: #80878d; 
}
.c5{
  border-color: #97a0a7;
}
.c6{
  border-color: #6d7276;
}
.c7{
  border-color: #666b6f;
}

.ct1{
  border-color: #926651;
}
.ct2{
  border-color: #6a3821;
}
.ct3{
  border-color: #794e3a;
}
.ct4{
  border-color: #542a23;
}


.autum .c1{
  border-color: #e1cf35;
}
.autum .c2{
  border-color: #aaa91d;
}
.autum .c3{
  border-color: #a29208;
}
.autum .c32{
  border-color: #e2db9d;
}
.autum .c4{
  border-color: #8c854a; 
}
.autum .c5{
  border-color: #736e3e;
}
.autum .c6{
  border-color: #58552f;
}
.autum .c7{
  border-color: #484627;
}

.summer .c1{
  border-color: #bcd83e;
}
.summer .c2{
  border-color: #7eb128;
}
.summer .c3{
  border-color: #adca28;
}
.summer .c32{
  border-color: #b9d634;
}
.summer .c4{
  border-color: #879a2c; 
}
.summer .c5{
  border-color: #677523;
}
.summer .c6{
  border-color: #6b6735;
}
.summer .c7{
  border-color: #615e34;
}

.winter .ct1{
  border-color: #959698;
}
.winter .ct2{
  border-color: #696a6c;
}
.winter .ct3{
  border-color: #727375;
}
.winter .ct4{
  border-color: #585c5f;
}

/*CONTROLS*/
.buttons{
  position: fixed;
  bottom: 0;
  width: 100px;
  height: 200px;
  bottom: 0;
}
.bt{
    text-align: left;
    position: relative;
    cursor: pointer;
    color: #000;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    z-index: 1;
    transition: 0.45s;
}
.bt.active,
.bt:hover{
    padding-left: 20px;
}

.cloud{
  position: absolute;
  background: no-repeat scroll center center transparent;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.cloud-1 {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4My44MzRweCIgaGVpZ2h0PSI1MnB4IiB2aWV3Qm94PSIwIDAgODMuODM0IDUyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4My44MzQgNTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiNCREI4QUMiIHBvaW50cz0iMTAuNSw0Ny44MzQgMzEuMzMzLDI4LjUgMjUuNjY2LDUwLjMzNCAiLz48cG9seWdvbiBmaWxsPSIjOTc5NzhGIiBwb2ludHM9IjYzLjE2Niw1MiAzMS4zMzMsMjguNSAyNS42NjYsNTAuMzM0IDQxLjU2OSw1MS4wNCAiLz48cG9seWdvbiBmaWxsPSIjQTlBMTk1IiBwb2ludHM9IjAsNDUuODM0IDEwLjUsNDcuODM0IDMxLjMzMywyOC41ICIvPjxwb2x5Z29uIGZpbGw9IiNGREZBRTMiIHBvaW50cz0iNi4xNjYsMTggMzEuMzMzLDI4LjUgMCw0NS44MzQgIi8+PHBvbHlnb24gZmlsbD0iI0ZGRkVGNSIgcG9pbnRzPSI2NC42NjgsMTAuNSA0My4xNjgsMCA2LjE2NiwxOCAzMS4zMzMsMjguNSAiLz48cG9seWdvbiBmaWxsPSIjRTJENUM0IiBwb2ludHM9IjgzLjgzNCw0OC44MzQgNjMuMTY2LDUyIDMxLjMzMywyOC41IDY0LjY2OCwxMC41ICIvPjxwb2x5Z29uIGZpbGw9IiNGMkU3RDIiIHBvaW50cz0iNzEuNjY4LDE0LjI1IDgzLjgzNCw0OC44MzQgNjQuNjY4LDEwLjUgIi8+PHBvbHlsaW5lIGZpbGw9IiM4QTg1N0YiIHBvaW50cz0iNDAuMzI4LDUwLjk4NSAzMS4yMzQsMjguODgyIDYzLjE2Niw1MiAiLz48L3N2Zz4=);
    width: 100px;
    height: 72px;
    top: 30px;
    left: -10px;
}
.cloud-1.active{
    animation-name: loopCloudFirst;
    animation-duration: 8s;
}
.cloud-2 {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4Ni41cHgiIGhlaWdodD0iNTIuODMzcHgiIHZpZXdCb3g9IjAgMCA4Ni41IDUyLjgzMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODYuNSA1Mi44MzMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiNGRkY0RTEiIHBvaW50cz0iNCwxNi42NjcgMjAuMTY3LDMxLjUgMzMuODMzLDIuMzMzICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iODYuNSwzMS41IDYwLjgzNCw0LjE2NyA0NSwwIDMzLjgzMywyLjMzMyA2My42NjYsMTYuOTE3ICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZERUEiIHBvaW50cz0iNDIuNjY3LDI0LjMzMyA2My42NjYsMTYuOTE3IDMzLjgzMywyLjMzMyAyMC4xNjcsMzEuNSAiLz48cG9seWdvbiBmaWxsPSIjRjVFNUQxIiBwb2ludHM9IjU2LDUyLjgzMyA2My42NjYsMTYuOTE3IDIwLjE2NywzMS41ICIvPjxwb2x5Z29uIGZpbGw9IiM5ODk0OTAiIHBvaW50cz0iMCw1MiAyMC4xNjcsMzEuNSA1Niw1Mi44MzMgIi8+PHBvbHlnb24gZmlsbD0iIzdDN0E3RiIgcG9pbnRzPSI1LjgzMyw0Mi4xNjcgNCwxNi42NjcgMjAuMTY3LDMxLjUgNi4yODQsNDUuNjEyICIvPjxwb2x5Z29uIGZpbGw9IiNGQ0YxREMiIHBvaW50cz0iODYuNSwzNy44MzMgODYuNSwzMS41IDYzLjY2NiwxNi45MTcgNTYsNTIuODMzICIvPjxwb2x5Z29uIGZpbGw9IiNFOUREQ0QiIHBvaW50cz0iNzgsNTAuNjY3IDg2LjUsMzcuODMzIDU2LDUyLjgzMyAiLz48L3N2Zz4=);
    width: 100px;
    height: 60px;
    top: 40px;
    left: 300px;
}
.cloud-2.active{
    animation-name: loopCloudLast;
    animation-duration: 35s; 

}

@keyframes loopCloudFirst {
    0% {left: -10px;}
    50% {left: 50px;}
    100% {left: -10px;}
}
@keyframes loopCloudLast {
    0% {left: 300px;}
    50% {left: 550px;}
    100% {left: 300px;}
}

            
          
!
            
              function removeSeasons(){
  $('#canvas').removeClass( 'winter' );
  $('#canvas').removeClass( 'autum' );
  $('#canvas').removeClass( 'summer' );
  $('.canvas-bg').removeClass( 'active' );
  $('#winter, #autum, #summer').removeClass( 'active' );
}

function addSeason(season){
  console.log(season);
  removeSeasons();
  $( '#canvas' ).addClass( season );
  $( '#canvas-bg-' + season ).addClass( 'active' );
  $( '#' + season ).addClass( 'active' )
  $( '.cloud' ).addClass( 'active' );
}


$('.bt').on('click', function(){
  addSeason( $(this).attr( 'id' ) );
});
            
          
!
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