80s Typography

80s-Typography.markdown

80s Typography

I've successfully combined 4 things I absolutely love, Typography, Design, Web Development and 80s style bravado. Super happy with the results. All done in CSS.

A Pen by David Parker on CodePen.

License.

index.html

<div id="wrapper">
  <h1 class="chrome">CHROME</h1>
  <h3 class="dreams">Dreams</h3>
  <h1 class="vectro"><span class="vectro-body">VECTRO</span><span class="vectro-red">I</span><span class="vectro-green">I</span><span class="vectro-blue">I</span></h1>
  <div class="street-machine">
  <h1 class="street">STREET</h1>
  <h3 class="machine">Machine</h3>
  </div>
  <h1 class="victory"><span class="victory-v">V</span>ictory</h1>
  <div class="future-cop">
  <h3 class="future">Future</h3>
  <h1 class="cop">COP</h1>
  </div>
</div>

script.js

if ( navigator.platform.indexOf('Win') != -1 ) {
  window.document.getElementById("wrapper").setAttribute("class", "windows");
} else if ( navigator.platform.indexOf('Mac') != -1 ) {
  window.document.getElementById("wrapper").setAttribute("class", "mac");
}

style.css

@import url(http://fonts.googleapis.com/css?family=Mr+Dafoe);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900);
@import url(http://fonts.googleapis.com/css?family=Righteous);
@import url(http://fonts.googleapis.com/css?family=Candal);

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);

@import url(http://fonts.googleapis.com/css?family=Monoton);


body { background: #000; color: #fff; position: relative;}

.chrome {
  position: relative;
  background-image: -webkit-linear-gradient(#378DBC 0%, #B6E8F1 46%, #ffffff 50%, #32120E 54%, #FFC488 58%, #582C11 90%, #EC9B4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px #f5f5f5;
  font-size: 200px;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
  margin: 0;
  line-height: 1;
}

.chrome:before {
  content: 'CHROME';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  background-image: -webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position:-680px 0;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0;
  padding-right: 300px;
  -webkit-animation-name: chrome_effect;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

.dreams {
  position: absolute;
  margin: 0px;
  font-family: 'Mr Dafoe', cursive;
  font-size: 160px;
  color: #F975F7 ;
  transform:rotate(-15deg);
  -ms-transform:rotate(-15deg); /* IE 9 */
  -webkit-transform:rotate(-15deg); /* Safari and Chrome */
  margin-left: 400px;
  margin-top: -120px;
  -webkit-text-stroke: 1px #f008b7;
  -webkit-filter: drop-shadow(2px 2px 20px #f008b7);
  z-index: 20;
}

.windows .dreams {
  -webkit-text-stroke: 4px #f008b7;
}

.vectro {
  position: relative;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.1px #f1f1f1;
  font-family: 'Righteous', cursive;
  font-size: 160px;
  margin: 150px 0 50px 0;
}

.vectro:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*-webkit-animation:vectro_effect 0.067s infinite;*/
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 2px);
}



.windows .vectro {
  -webkit-text-stroke: 4px #f1f1f1;
}

.vectro-body {
  -webkit-background-clip: text;
  background-image: -webkit-linear-gradient(#C3BFB4 0%, #FDFCFA 50%, #E8E7E5 51%, #757172 52%, #E8E9DB 100%);
  -webkit-filter: drop-shadow(2px 2px 15px #3F59F4);
}

.vectro-red {
  color: #F10C20;
  -webkit-text-fill-color: #F10C20;
  -webkit-text-stroke: 0;
  -webkit-filter: drop-shadow(2px 2px 15px #F10C20);
  font-style: italic;
  padding-right: 20px;
}

.windows .vectro-red {
  padding-right: 30px;
}

.vectro-green {
  color: #6BFF2B;
  -webkit-text-fill-color: #6BFF2B;
  -webkit-filter: drop-shadow(2px 2px 15px #6BFF2B);
  -webkit-text-stroke: 0;
  font-style: italic;
  padding-right: 20px;
  margin-left: -20px;
}

.windows .vectro-green {
  padding-right: 30px;
  margin-left: -30px;
}

.vectro-blue {
  color: #3F59F4;
  -webkit-text-fill-color: #3F59F4;
  -webkit-filter: drop-shadow(2px 2px 15px #3F59F4);
  -webkit-text-stroke: 0;
  font-style: italic;
  padding-right: 20px;
  margin-left: -20px;
}

.windows .vectro-blue {
  padding-right: 30px;
  margin-left: -30px;
}

.street-machine {
  position: relative;
}

.street {
  position: relative;
  font-family: 'Candal', sans-serif;
  font-size: 180px;
  font-style: italic;
  -webkit-text-stroke: 0.1px #ed2121;
  color: #fff;
  text-shadow: -10px 10px 0px #ed2121;
  margin: 0;
}

.windows .street {
  -webkit-text-stroke: 4px #ed2121;
}

.street:before {
  content: '';
  position: absolute;
  height: 4px;
  width: 665px;
  top: 83px;
  left: 48px;
  background: #ed2121;
  box-shadow: -8px 13px #ed2121;
}

.windows .street:before {
  left: 55px;
  width: 659px;
}

.street:after {
  content: '';
  position: absolute;
  height: 4px;
  width: 639px;
  top: 109px;
  left: 36px;
  background: #ed2121;
  box-shadow: -4px 13px #ed2121;
}

.machine {
  position: absolute;
  left: 50px;
  top: 350px;
  font-family: 'Mr Dafoe', cursive;
  font-size: 130px;
  transform:rotate(-15deg);
  -ms-transform:rotate(-15deg); /* IE 9 */
  -webkit-transform:rotate(-15deg); /* Safari and Chrome */
  color: #ed2121;
  margin: 0;
  margin-top: -160px;
  padding-left: 430px;
  text-shadow: 1px 2px 0px #F9D2D2;
}

.windows .machine {
  margin-top: -200px;
}

.victory {
  position: relative;
  font-family: 'Permanent Marker', cursive;
  font-variant:small-caps;
  font-size: 180px;
  -webkit-transform: skew(-15deg,-15deg);
  padding-left: 80px;
  background-image: -webkit-linear-gradient(#FF0FF8 0%,  #F9F9F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  -webkit-filter: drop-shadow(2px 2px 20px #f008b7);
}

.victory:before {
  content: '-';
  position: absolute;
  bottom: -98px;
  left: 254px;
  background-image: -webkit-linear-gradient(#F3C8F3 0%, #F3C8F3 100%);
  -webkit-background-clip: text;
  text-shadow: 70px -7px #F3C8F3;
}

.victory:after {
  content: '-';
  position: absolute;
  bottom: -85px;
  left: 395px;
  background-image: -webkit-linear-gradient(#F3C8F3 0%, #F3C8F3 100%);
  -webkit-background-clip: text;
  text-shadow: 70px -5px #F3C8F3;
}

.victory-v {
  position: relative;
  background-image: -webkit-linear-gradient(#FF0FF8 0%,  #F9F9F7 100%);
  -webkit-background-clip: text;
  padding-right: 18px;
  margin-right: -18px;
}

.victory-v:before {
  content: '-';
  position: absolute;
  top: -71px;
  left: -71px;
  background-image: -webkit-linear-gradient(#FF0FF8 0%,  #FC96FC 100%);
  -webkit-background-clip: text;
}

.victory-v:after {
  content: '-';
  position: absolute;
  top: -72px;
  left: 103px;
  background-image: -webkit-linear-gradient(#FF0FF8 0%,  #FC96FC 100%);
  -webkit-background-clip: text;
}

.future-cop {
  position: relative;
  margin-top: 500px;
}

.future {
  position: absolute;
  left: 0;
  top: -310px;
  font-family: 'Mr Dafoe', cursive;
  font-size: 200px;
  margin-top: 160px;
  margin-bottom: 0;
  color: #EB219B;
  -webkit-text-fill-color: rgba(253, 90, 250, 1);
  text-shadow: -2px -2px 0 #FFBAF2;
  -webkit-filter: drop-shadow(3px 3px 1px #441F62);
  -webkit-transform: skew(-5deg,-5deg);
  font-weight: normal;
  z-index: 2;
  margin-left: 60px;
  padding-left: 50px;
  padding-right: 70px;
}

.cop {
  position: relative;
  font-family: 'Monoton', cursive;
  font-size: 200px;
  line-height: 1;
  margin: 0;
  margin-top: -95px; 
  padding-left: 80px;
  /* font-weight: normal; */
  background-image: -webkit-linear-gradient(#022486 0%, #0AD0FD 30%, #BDFCFC 40%, #D8FFFF 44%, #00081C 44%, #00081C 50%, #074A67 52%, #1CD8FE 60%, #7FEDFE 62%, #96F5FC 70%, #0FD8FA 73%, #0BD2FD 88%, #AFFDFF 100%); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.mac .cop {
  font-weight: 400;
}

.cop:before {
  position: absolute;
  content: '';
  left: 51px;
  top: 74px;
  width: 80px;
  height: 3px;
  background-image: -webkit-radial-gradient(#fff 0%, transparent 85%);
  z-index: 4;
  -webkit-animation-name: cop_before_effect;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

.cop:after {
  position: absolute;
  content: '';
  left: 90px;
  top: 32px;
  width: 3px;
  height: 80px;
  background-image: -webkit-radial-gradient(#fff 0%, transparent 85%);
  z-index: 4;
  -webkit-animation-name: cop_after_effect;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes chrome_effect {
  0% {background-position:-680px 0;}
  10% {background-position:420px 0;}
  100% {background-position:420px 0;}
}

@-webkit-keyframes cop_before_effect {
  0% {
    left: 51px;
    top: 74px;
    opacity: 0;}
  
  15% {
    left: 51px;
    top: 74px;
    opacity: 1;}
  
  30% {
    left: 51px;
    top: 74px;
    opacity: 0;}
  
  35% {
    left: 370px;
    top: 45px;
    opacity: 0;}
   
  50% {
    left: 370px;
    top: 45px;
    opacity: 1;}
  
  65% {
    left: 370px;
    top: 45px;
    opacity: 0;}
  
  70% {
    left: 564px;
    top: 74px;
    opacity: 0;}
   
  85% {
    left: 564px;
    top: 74px;
    opacity: 1;}
  
  100% {
    left: 564px;
    top: 74px;
    opacity: 0;}
}

@-webkit-keyframes cop_after_effect {
  0% {
    left: 90px;
    top: 32px;
    opacity: 0;}
  
  15% {
    left: 90px;
    top: 32px;
    opacity: 1;}
  
  30% {
    left: 90px;
    top: 32px;
    opacity: 0;}
  
  35% {
    left: 413px;
    top: 11px;
    opacity: 0;}
   
  50% {
    left: 413px;
    top: 11px;
    opacity: 1;}
  
  65% {
    left: 413px;
    top: 11px;
    opacity: 0;}
  
  70% {
    left: 603px;
    top: 32px;
    opacity: 0;}
   
  85% {
    left: 603px;
    top: 32px;
    opacity: 1;}
  
  100% {
    left: 603px;
    top: 32px;
    opacity: 0;}
}