Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="structure__view flex-vertical">
  
  <!-- item -->
  <div class="align-vertical">
    <!-- planet -->
    <div class="planet">
      <span class="texture"></span>
    </div>
    <!-- sun -->
    <div class="sun"></div>
    <!-- informations -->
    <div class="info__container">
      <div class="info__wrapper">
        <span class="title">planet</span>
        <p>Mars</p>
        <span class="title">populations</span>
        <p class="numberCount" data-number="37822">0</p>
      </div>
    </div>
  </div>
  
</div>
              
            
!

CSS

              
                /*
  CSS Light & shadow on round object :  m a r s
  - 2017, 4 december
*/

// CLASS ADD ============================  
.align-vertical
  position relative
  width 100%
  
[class*="flex-"]
  display flex
  &[class$="-vertical"]
    align-items center

// COMONS ============================== 
body
  background-color #1b1b1b

// THEME ===============================
.structure__view
  height 100vh
  width 100%

// PLANET ---------------  
.planet
  width 300px
  height 300px
  position relative
  margin auto
  overflow hidden
  border-radius 50%
  transform translate3d(0px,0px,0px)
  box-sizing border-box
  animation fade_in 3s ease
  
  // Light/Shadow
  &::after
    position absolute
    content ""
    top 0
    bottom 0
    left 0
    right 0
    box-shadow -20px -20px 150px 2px rgba(17,8,1,1) inset, 5px 10px 30px 3px rgba(255,255,255,1) inset
    border-radius 50%
    animation shadow 3s both
  
  // Sun reflect
  &::before
    content ""
    position absolute
    width 150px
    height 150px
    background-color #FFEDB5
    z-index 2
    top -50px
    left -50px
    border-radius 100%
    filter blur(10px)
    box-shadow 0 0 100px #FFEDB5
    opacity .5
  
  // Texture
  & > .texture
    display inline-block
    width 200%
    height 100%
    animation texture 30s linear alternate infinite
    background url(http://files.abovetopsecret.com/files/img/ft51bed815.jpg)
    background-size cover

// SUN ---------------    
.sun
  content ""
  position absolute
  width 150px
  height 150px
  background-color #FFEDB5
  z-index -1
  top 0
  left calc( 50% - 150px )
  border-radius 100%
  filter blur(10px)
  box-shadow 0 0 100px #FFEDB5
  animation sun 5s ease

// INFOS ===============================    
.info__container
  position absolute
  right calc( 50% - 280px )
  top calc( 50% )
  z-index 1
  transform-style preserve-3d
  transform-origin 50% 50% 0px
  perspective 200px
  perspective-origin 300% 48%
  &::before
    content ""
    height 1px
    width 30px
    background-color rgba(255,255,255,.2)
    position absolute
    left -44px
    top 24px
    animation fade_in 1s 1s both
  .info__wrapper
    position relative
    transform-style preserve-3d
    transform-origin 50% 50% 0px
    perspective 200px
  .title
    display inline-block
    font-size 10px
    font-weight 600
    color rgba(255,255,255,.4)
    text-transform uppercase
    margin-top 20px
    margin-bottom 4px
    animation fade_in 1s 1s both
  p
    position relative
    color #fff
    font-size 14px
    text-transform uppercase
    letter-spacing 3px
    margin 0
    overflow hidden
    animation fade_in 1s 1.3s both
    &::before
      content ""
      background-color #fff
      position absolute
      width 100%
      height 100%
      animation paragraphe .3s 1.3s both
  
// KEYFRAMES ===============================  
@keyframes texture
  to { transform: translateX(-50%); }

@keyframes fade_in
  from { opacity: 0 }
  to { opacity: 1 } 
    
@keyframes shadow
  0% { box-shadow: 20px 20px 150px 2px rgba(17,8,1,1) inset, -5px -10px 30px 3px rgba(255,255,255,1) inset; }
  100% { box-shadow: -20px -20px 150px 2px rgba(17,8,1,1) inset, 5px 10px 30px 3px rgba(255,255,255,1) inset; }
  
@keyframes sun
  from { opacity: 0; left: calc( 50% - 100px ) }
  to { opacity: 1 ; left: calc( 50% - 150px )}     
  
@keyframes paragraphe
  0% { transform: translateX(-101%) }
  100% { transform: translateX(101%) }
              
            
!

JS

              
                function numberAnimate() {
  
  var numberCount = $('.numberCount').attr('data-number');

  $({
      countNum: $('.numberCount').text()
  }).animate({
      countNum: numberCount
  }, {
      duration: 3000,
      easing: 'swing',
      step: function () {
          $('.numberCount').text(Math.ceil(this.countNum));
      },
      complete: function () {
          $('.numberCount').text(numberCount);
      }
  });

}

numberAnimate();
              
            
!
999px

Console