Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                %head
%body
  %div.wrap
    %header
      %h1
        %a 
          Styled 3D Text Insets in CSS
      %h1
        %div#wheel
          %a ⚙
        %p hover for effect
  %div.wrap
    %div 
    %p
  %div.wrap   
    %div.gridl
      -(i=5,4,3,2,1).each do |i|
        <h#{i}>
        %a.tooltip{href: "##{i}", arialabel: "this is a h#{i} tag"} h#{i}
        </h#{i}>
    %div.gridm
      %h0
        %a.tooltip{href: "#", arialabel: "this is a jumbo H0 tag"} ⚜ h0 ⚜
    %div.gridr
      -(i=1,2,3,4,5).each do |i|
        <h#{i}>
        %a.tooltip{href: "##{i}", arialabel: "this is a h#{i} tag"} h#{i}
        </h#{i}>
  %div.wrap
    .gridm    
      %h1
        %p 
          %a.tooltip{href: "https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fcodepen.io%2F&ref_src=twsrc%5Etfw&region=follow_link&screen_name=raymondkooyenga&tw_p=followbutton", rel:"noopener", target:"_blank", title:"Follow @raymondkooyenga on Twitter"} Follow me on Twitter
      %h0
        .spin
          %a.tooltip{href: "https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fcodepen.io%2F&ref_src=twsrc%5Etfw&region=follow_link&screen_name=raymondkooyenga&tw_p=followbutton", arialabel: "follow me on twitter", rel:"noopener", target:"_blank", title:"Follow @raymondkooyenga"} 🦃 
  %div.wrap
    %div.faq
      %div.q
        %summary H0 tags?
        %details I know there's no H0 tag, I just made it up :) it's less confusing than an unusually large H5
      %div.q
        %summary Why is it in H-AML 
        %details This is a test for another project, once satisfactory I found an odd compulsion to do the HTML over with in H-AML and be able to loop the H elements. I don't know actually know H-aml at all so it consisted of banging my head against the wall until it worked, it's not a joke I've hit "run" 50x easy, but alas it works. Notable that a warning is displayed from Codepen for the very word "H-AML". Though it does pique my curiosity, nearly everything does I don't have time for that one.
      %div.q
        %summary fear and loathing with h-aml
        %details Beginning very simple I was initially a fan of the idea of playing with H-aml and excited to have a new tool in my arsenal for items such as the main two loops here 4-0 and 1 through 0 or 4 through 1 employing each, down to, and up to which have existed through the course of writing this, in endless variations. Some simple and sleek, and even clever, but finally cluttered and far from elegant. This has included upon initial difficulty counting down in a loop, down to's such as "4.downto(0) do |i|" "0.upto(5) do |i|" finally for testing reasons and the relatively small number of iterations necessary, I settled on each loops specifically calling each step as in "(1,2,3,4).each" which although feels like cheating and fails to take full advantage of the control structures purpose for existing, alas is the most straightforward. And although it looks far more verbose than the original sub 10 line concept, it was a worthwhile process and I feel the next time I set out to use H-aml for any reason I will be coming from a very familiar place and likely not bang my head against the wall or even have to research anything. The bulk of the structure is a combination of balancing the obstacle of my own design, that for the effect to be applied an a href tag must exist on the h1 through 5 or 0 tags. In H-aml this means given the 1 element per line rule, that all such cases doubles line usage among other complications. %h3 %a for instance is not legal
      %div.q
        %summary H-aml tempered enthusiasm
        %details Seeking a marriage of aesthetic appeal and the opportunity for iterative functions in abbreviated form with H-AML I concede it is in fact useful and powerful but that not significantly so. in most cases I'm saving for many sacrifices, 50% of code/markup. That sounds significant but its not. By "code" I mean tags the content which is 90% us unchanged iterative structures notwithstanding. "%p hello world" I'm saving 4 characters per paragraph. It's appreciated, but where can I use it? Support is not widespread, to be frank Codepen is the first and last place I've seen it referenced in 4 years. Markdown has many advantages over my own made up markup languages over the years. Support is phenomenal and growing rapidly this offsets many of it's limitations. In this case it would be more familiar, more readable, more cross platform useable, to in retrospect have done this in the ubiquitous javascript. It is no surprise to learn H-aml is born of Ruby. I have all the same complaints with Ruby almost uniquely so, and though I rely when in chromeos, quite heavily on ruby, I have failed consistently to appreciate the love affair many in the mac community, or at Github for instance have with this not so straightforward platform.
      %div.q
        %summary on Flexbox 
        %details In my effort to stretch further from the scope and purpose of the original test of a font effect, I ventured into H-aml. I can say two things I don't like it, its more trouble than it is worth and that documentation, and implementation are almost equally lacking and inconsistent. I decided flex-box is worth experimentation its built for gridding, and I understand it does this well. So phase two was to experiment with that implementation this has proved to be a disappointment as well. My own observation is that margins, padding, content, border are properties which though in more skilled and knowledgeable hands are likely sufficiently powerful, I am not of the opinion that these technologies are at a point where they achieve successfully what they set out to in any hands but the most knowledgeable. In other words I cannot think of any circumstance where dramatically transforms the way I would do something, nor the time involved. In fact its just more to learn. I am optimistic though because I respect the people like Chris Coyier who are excited about it. Between it being young and likewise my familiarity cursory, in time it can be all its hyped to be and more. Until then a bit of a disappointment, I feel the time I devoted to it has left me with no better skill set for solving these particular problems than existed in the 90's. I have a separate test container I used that I run on jsbin.com and w3schools. I'll post it here to just to have it handy.
      %div.q
        %summary The tool tip hover effect
        %details I've included this effect to dress up the hover on the h tags, similar to the effect I  have on one of my websites where a paragraph is illuminated from the background upon a timed hover in css by delayed transition, this was from the authoritative pen example on tool tips in css. You'll note that aria-label has no dash. That's a hack to get the H-aml parser to accept it. The dash though proper for aria or data tags, because the label suffix is not recognized results only in error and failure to compile to HTMl. 
      %div.q
        %summary animations and stylesheets
        %details for fun and experiment yes I am toying with spinning the graphic UTF-8 text and employing fonts from Medium for no particular reason.
              
            
!

CSS

              
                @charset "UTF-8";
//@import url('https://cdn-static-1.medium.com/_/fp/css/main-branding-base.KaG5owo1xJGIHfGeaAmI2A.css');
@import url('https://glyph.medium.com/css/e/sr/latin/e/ssr/latin/e/ssb/latin/m.css');
//@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400|Playfair+Display|Roboto+Slab|PT+Sans|Raleway');
@import url('https://fonts.googleapis.com/css?family=Adamina:400|Droid+Serif:400|Playfair+Display:700,900|PT+Serif:400,700');
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  overflow:none;
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:radial-gradient(ellipse farthest-corner at center center, rgba(0,0,0,0.01) 20%, rgba(0,0,0,0.05) 100%) repeat scroll 0% 0%;transition:2200ms;
}
html,body {
  text-align:left;
  //font-family: 'medium-content-sans-serif-font', sans-serif;
 font-family:400 20px/36px 'Adamina', sans-serif!important;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  color: #474747;
  background:url('https://d39dlwgeopmdw0.cloudfront.net/apps/news/subtle_grunge.png') repeat;
  background-image:url('https://d39dlwgeopmdw0.cloudfront.net/apps/news/subtle_grunge.png') repeat;
  background-color:transparent;
  background-color: #f9f7f1;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

}

header{
  text-align:center;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2;
  margin-bottom: 10px;
}

h0,h1{
  font: 900 96px/1.0 'Playfair Display', 'PT Sans', 'Nato Sans', 'Lato', Helvetica, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: #969595;
  text-shadow: 0px 3px 0px #5e5e5e, 0px 5px 0px #4d4d4d, 0px 7px 0px #3c3c3c, 0px 9px 0px #2b2b2b, 3px 8px 15px rgba(0,0,0,0.1), 3px 8px 5px rgba(0,0,0,0.3);
}
h2,h3{
   font-family:400 36px/48px 'PT Serif', sans-serif!important;
    //   font-family:400 20px/72px 'PT Serif', sans-serif!important;
  font-style: normal;
  color: #969595;
 // text-shadow: 0px 3px 0px #5e5e5e, 0px 5px 0px #4d4d4d, 0px 7px 0px #3c3c3c, 0px 9px 0px #2b2b2b, 3px 8px 15px rgba(0,0,0,0.1), 3px 8px 5px rgba(0,0,0,0.3);
}
h4,h5{
  //   font-family:400 20px/72px 'PT Serif', sans-serif!important;
 //font-family:400 20px/72px 'medium-content-sans-serif-font', sans-serif!important;
 font-family:400 20px/36px 'Adamina', sans-serif!important;
}
h0{font-size:96px;}
h1{font-size:72px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:18px;}
h1 a,h2 a,h3 a,h4 a,h5 a,h0 a{
   /*color: rgb(47,47,47)!important; */
 /*    text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15)opacity:.98;*/
  text-decoration: none;
  font: normal 72px/normal;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  color: #404040!important;
   -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
 // color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 
    0.005em 0em 0    #4e4e4e,
    0.005em 0.010em 0    #4e4e4e,
    0.005em 0.023em 0    #5a5a5a,
    0.005em 0.033em 0    #5a5a5a,
     0.005em 0.05em 0 #5a5a5a,
    0.005em 0.06291em 0 #505050,
    .08em 0.063em 0.08em rgba(0,0,0,0.7);
  -webkit-transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a.link:hover,a:hover{
   color: rgba(47,47,47, 0.5)!important;    
  text-shadow: 1px 4px 6px rgb(249, 247, 241), 0 0 0 #000, 1px 4px 6px rgb(249, 247, 241);
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
 -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
}
summary,details {
  text-align:left;
  text-transform: uppercase;
  font-size:24px;
}
details{padding-left:30px;}
p {
  text-align:left;
  text-transform: none;
  font-size:24px;
}
header p {
  text-align:center;
  font-size:38px;
  margin: 20px 4px 20px;
  color: rgba(255, 90, 0, 0.5)!important;
}
p,summary,details{
  margin: 20px 0 20px 0;
  color: rgba(255, 90, 0, 0.5)!important;
  text-shadow: 1px 4px 6px rgb(249, 247, 241), 0 0 0 #000, 1px 4px 6px rgb(249, 247, 241);
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
 -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
}
//body { margin: 1em 2em 3em 2em} 
/* top=1em, right=2em, bottom=3em, left=2em */

div.wrap,div.grid,header{
max-width:930px;
}
div.wrap,header{
min-width:320px;
}

div.wrap {
  width: 83%;
  left: 0px;
  top: 0px;
  right:0px;
  float: none;  
  margin-left: 8%;
  display: flex;
  flex-direction: row;
  align-content: center;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: .31rem;
  flex-wrap: nowrap;
}

.tilt a {
  transform: translateZ(-2954px) translateX(-2745px) rotateY(-76deg);
}

div.wrap header {
  width: 50%;
  left: 0%;
  top: 0%;
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: center;
  flex: 50%;
  align-items: center;
  box-sizing: border-box;
  display: flex;
}
div.wrap{    
 
width:80%;flex-flow:row wrap;
justify-content: space-evenly;
}

div.gridl {
  order: 1;
  float: left;text-align:right;
  flex: 0 0 40%;
  z-index: 2;
 overflow:clip;text-overflow:ellipses;

}

div.gridm {
  order: 2;
  float: none;text-align:left;
  flex: 0 0 8%;
  z-index: 1;
  padding:0 0 0 .4rem;
}

div.gridr {
  order: 3;
  float: right;text-align:left;
  flex: 0 0 40%;
  z-index: 2;
  overflow:clip;
  text-overflow:ellipses;
}

div.gridl, div.gridm, div.gridr {
  justify-content: center;
  //padding:-.5rem;
  left: 0px;
  top: 0px;
  right:0px;
  margin-left: 0%;
  margin-top:9vh;
  align-items: center;
  box-sizing: content-box;
  display: flex;
}
.faq,.q{width:100%;}

.tooltip {
  cursor: pointer;
  position: relative;

  &::before {
    position: absolute;
    top: -6em;
    left: -30px;//50%
    bottom:8em;
    background-color: transparent;
    border-radius: 5px;
    color: #474747;
    content: attr(arialabel); 
    padding: 2em;
    text-transform: none;
    transition: all 2.0s ease;
    width: 120%;
  }

  &::after {
  position: relative;
  padding: 10px;
  top: 42px;
  left: -10px;//50%
  content: " ";
  font-size: 0;
  line-height: 0;
  margin-left: 3px;
  width: 0;
  }
  
  &::before,
  &::after {
    opacity: 0;
    pointer-events: none;
    text-align: center;  
    line-height:20px;
    letter-spacing:1;
    font-size:24px;
    margin: 50px 0 40px 5px;  margin: 30px -10px 30px 5px;
 margin: 10px -1px 10px 5px;
    padding:10px;
    color: rgba(255, 90, 0, 0.5)!important;
    text-transform: none;
    text-shadow: 1px 4px 6px rgb(249, 247, 241), 0 0 0 #000, 1px 4px 6px rgb(249, 247, 241);
   -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
   -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
   -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
   -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
  }
  &:focus::before,
  &:focus::after,
  &:hover::before,
  &:hover::after {
    opacity: .99;
    transition: all 2.75s ease;
  }
}

 .spin:hover,div#wheel:hover,div.gridm:hover{
  -webkit-animation-play-state:running;
  animation-play-state:running;
}
.spin{
   -webkit-animation:spinnity  6s linear 6s 1;
  animation:spinnit  6s linear 6s 1;
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}
div#wheel{
  -webkit-animation:spinnity 2s infinite linear forwards;
  animation:spinnit 2s infinite linear forwards;
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}
div.gridm{
  -webkit-animation:spinnit 4s ease-in-out 2s;
  animation:spinnit 4s ease-in-out 2s;
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}
@-webkit-keyframes spinnit{      
  0%, 50%, 90%, 100% { 
   text-shadow: #b0b0b0 0 0 1px; 
  }
        15% {
          -webkit-transform:scale(1.1); transform:scale(1.1);
  }
        60%, 80%,90% {
          text-shadow: #b0b0b0 0 0 2px;
          -webkit-transform:rotate(180deg);transform:rotate(180deg);

          }
        55%  {
          -webkit-transform:rotate(-90deg);transform:rotate(-90deg);
          }
        70% { 
          text-shadow: #b0b0b0 0 0 8px;
          -webkit-transform:scale(1.3); transform:scale(1.3); 
  }
        100%{
          -webkit-transform:scale(1.0); transform:scale(1.0);
  }
// to{-webkit-transform:rotate(360deg);transform:rotate(360deg);
}


@media (max-width: 700px) {
  .wrap {
    padding: 0 10%;
  }

  #error-debugging-info {
    overflow: auto;
  }
}

@media (max-height: 600px) {
  .error-code {
    margin-top: 10px;
  }
}

@media (max-width: 420px) {
  button,
  [dir='rtl'] button,
  .small-link {
    float: none;
    font-size: .825em;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    width: 100%;
  }

  #details {
    margin: 20px 0 20px 0;
  }

  #details p:not(:first-of-type) {
    margin-top: 10px;
  }

  #details-button {
    display: block;
    margin-top: 20px;
    text-align: center;
    width: 100%;
  }

  .wrap {
    padding: 0 5%;
  }

  #extended-reporting-opt-in {
    margin-top: 24px;
  }

  .nav-wrapper {
    margin-top: 30px;
  }
}

/**
 * Mobile specific styling.
 * Navigation buttons are anchored to the bottom of the screen.
 * Details message replaces the top content in its own scrollable area.
 */

@media (max-width: 420px) {
  
}

/* Fixed nav. */
@media (min-width: 240px) and (max-width: 420px) and
       (min-height: 401px),
       (min-width: 421px) and (min-height: 240px) and
       (max-height: 560px) {
  body .nav-wrapper {
    background: #f7f7f7;
    bottom: 0;
    box-shadow: 0 -22px 40px rgb(247, 247, 247);
    margin: 0;
    max-width: 736px;
    padding-left: 0px;
    padding-right: 48px;
    position: fixed;
    z-index: 2;
  }

  .wrap {
    max-width: 736px;
  }

  #details,
  #main-content {
    padding-bottom: 40px;
  }

  #details {
    padding-top: 5.5vh;
  }
}

@media (max-width: 420px) and (orientation: portrait),
       (max-height: 560px) {
  body {
    margin: 0 auto;
  }
}


@media screen and (min-width:570px),screen and (max-width: 952px) {
  html,body{
      min-width:570px!important;max-width:952px;width:100%;
      display:flex;align-items:center;justify-content:center;flex-flow:row wrap;
  }
  div.wrap{
       width:auto;height:auto;align-items:center;justify-content:center;
  }
  div.gridm{
    padding-left:10rem;padding-right:10rem;
  }
 }
@media screen and (min-width:952px),screen and (max-width: 1280px), {
  html,body{
      min-width:952px!important;max-width:1280px;width:100%;
      display:flex;align-items:center;justify-content:center;flex-flow:row wrap;
  }
  div.wrap{
       min-width:952px!important;max-width:1200px!important;width:100%!important;
       height:auto;align-items:center;justify-content:center;
  }
  div.gridm{
    padding-left:.3rem;padding-right:.1rem;
  }
 }

@media screen and (min-width:170px) and (max-width:350px) {
  html,body{
      min-width:170px!important;max-width:350px;width:100%;
      display:flex;align-items:center;justify-content:center;flex-flow:row wrap;
  }
      body{
      zoom:50%;
      }
    }
              
            
!

JS

              
                
              
            
!
999px

Console