Text Effects:

<p>
<div class="box igray"> <!-- mostly works on gray backgrounds -->
  <div class="inset-text-effect">Inset Text Effect
  </div>
</div>
</p>
  
<div class="box itan">
<h3> <span>Harder</span> <span>Better</span> <span>Faster</span><span>Stronger</span></h3>
</div>
<p></p>

<div class="box elegant">
<div class="eH3">
  Elegant Shadow
</div>
</div>  

<p></p>

<div class="box igray threeD">
  <h1 > 3D Text Example </h1>
</div>

<div>  
  <p>
    <ul>CSS Text Resources:
      <li>Myriad of CSS Button or Text effects Demo! <a href="https://www.minimamente.com/example/magic_animations/" target="_blank">https://www.minimamente.com/example/magic_animations/</a>
      <li>Another amazing demo of CSS animation effects (mostly for buttons or graphics): <a href="https://ianlunn.github.io/Hover/" target="_blank">https://ianlunn.github.io/Hover/</a>
      <li>More animations - this using something called saffron: <a href="https://colindresj.github.io/saffron/" target="_blank">https://colindresj.github.io/saffron/</a>
      <li><a href="http://freefrontend.com/css-text-effects/" target="_blank">http://freefrontend.com/css-text-effects/</a>              <li><a href="http://1stwebdesigner.com/css3-text-effects-typography/" target="_blank"> http://1stwebdesigner.com/css3-text-effects-typography/</a>
      <li>Effect CSS Generator: <a href="https://css3gen.com/css3-text-effects/" target="_blank">https://css3gen.com/css3-text-effects/</a>
      <li>Hover Effects for images and boxes:<a href="https://designshack.net/articles/css/joshuajohnson-2/" target="_blank">  https://designshack.net/articles/css/joshuajohnson-2/</a>
      <li>inset type: <a href="http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/" target="_blank">http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/</a>
      <li>Web Text Gradiant: <a href="http://webdesignerwall.com/tutorials/css-gradient-text-effect" target="_blank"> http://webdesignerwall.com/tutorials/css-gradient-text-effect</a>
      <li>Another Gradiant: <a href="https://code.tutsplus.com/tutorials/quick-tip-pure-css-text-gradients--net-11997" target="_blank">https://code.tutsplus.com/tutorials/quick-tip-pure-css-text-gradients--net-11997</a>
      <li>CSS Stroke to Text: <a href="https://css-tricks.com/adding-stroke-to-web-text/" target="_blank">https://css-tricks.com/adding-stroke-to-web-text/</a>
      <li>More CSS Text Effects: <a href="http://bashooka.com/coding/14-amazing-css3-typographic-animation-effects/" target="_blank">http://bashooka.com/coding/14-amazing-css3-typographic-animation-effects/</a>
      <li>Shake Stuff: <a href="https://elrumordelaluz.github.io/reshake/" target="_blank">https://elrumordelaluz.github.io/reshake/</a>
      <li>typebase.css - seems important, currently beyond my comprehension: <a href="https://devinhunt.github.io/typebase.css/" target="_blank">https://devinhunt.github.io/typebase.css/</a>
      <li>Font Awesome: <a href="http://www.w3resource.com/icon/font-awesome/brand-icons/codepen.php" target="_blank">http://www.w3resource.com/icon/font-awesome/brand-icons/codepen.php</a>
     <li>Font Awesome 2: <a href="http://www.w3resource.com/icon/font-awesome/brand-icons/codepen.php" target="_blank">http://www.w3resource.com/icon/font-awesome/brand-icons/codepen.php</a>  
       <li><i class="fa fa-instagram" aria-hidden="true"></i>
  <i class="fa fa-codepen"></i>
         <i class="fa fa-free-code-camp" aria-hidden="true"></i> Font Awesome Cheat Sheet: <a href="http://fontawesome.io/cheatsheet/" target="_blank">http://fontawesome.io/cheatsheet/</a>
         
    </ul>
</p>
<p>
  <ul><li>Punch List
    <li>Center Text Vertical
    <li>Smaller box widths
    <li>button settings change
</div>

/* Google Social Fonts and */
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
/* END Google Social */

.inset-text-effect {
  display: inline-block;
  box-sizing: content-box;
  border: none;
  font: normal 70px/1 "Aladin", Helvetica, sans-serif;
  color: rgba(48,48,48,1);
  text-align: center;
  text-transform: normal;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 1px 1px 0 rgba(140,140,140,0.6) , -1px -1px 1px rgba(0,0,0,0.67) ;
}

.box {
  border-color: black;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
  text-align: center;
}

.igray {
  background: rgb(100,100,100);
}


.itan {
  background-color: #ece5da;
}

h3 {
  /* margin: 20px; */
  font-family: "Paytone One", Helvetica, sans-serif;
  color: #202020;
  text-transform: uppercase;
  letter-spacing: -2px;  
}

h3 span {
  display: block;
  margin: 11px 0 17px 0;
  font-size: 80px;
  line-height: 80px;
  color: #f1ebe5;
  text-shadow: 0 13.36px 8.896px #c4b59d,0 -2px 1px #fff;
  letter-spacing: -4px;
}
.eH3{
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 92px;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}
.elegant {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
}

.threeD { /* From http://markdotto.com/2011/01/05/3d-text-using-just-css/ */
  font-size: 40px;
  color: #f1ebe5;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}