Skip to content

Instantly share code, notes, and snippets.

@UtaVile

UtaVile/80s-typography.markdown

Created February 16, 2022 08:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save UtaVile/25e5d0a1f68f82b9b314123d4e70c818 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save UtaVile/25e5d0a1f68f82b9b314123d4e70c818 to your computer and use it in GitHub Desktop.
Download ZIP
80s Typography
Raw
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.

Raw
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>
Raw
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");
}
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Mr+Dafoe);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:900);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url(https://fonts.googleapis.com/css?family=Candal);
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
@import url(https://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;}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Mr+Dafoe" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment