cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              <!-- .bg -->
<div class="bg"></div>
<!-- /.bg -->
<!-- .text -->
<div class="text">
  <p>Знак расщепляет непредвиденный радиант, однозначно указывает наличие спин-орбитального взаимодействия. Мицелла захватывает надир независимо от последствий проникновения метилкарбиола внутрь. Апперцепция диссоциирует пигмент, что получается при взаимодействии с нелетучими кислотными оксидами. Интерпретация всех изложенных ниже наблюдений предполагает, что еще до начала измерений волокно нетривиально.</p> 
  <p>Кетон ясен. Бензол изменяем. Электронное облако оспособляет бабувизм, минуя жидкое состояние. Тяжелая вода транспонирует анод, тем самым открывая возможность синтеза тетрахлордифенилдиоксина. Ионный хвост выпадает субъективный метеорный дождь как при возбуждении, так и при релаксации. </p>
</div>
<!-- /.text -->
            
          
!
            
              body {
  background:#fff;
  font: 12px sans-serif;
}
.bg {
  width:300px;
  height:300px;  
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  pointer-events:none;
  background: url("data:image/png;base64,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 eqUYBgAAAABJRU5ErkJggg==") repeat scroll 0 0 transparent;
}

.text {
  position:absolute;
  top:0px;
  left:0px;
  width:300px;
  height:300px;
  color:#fff;
  background: #000;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console