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.
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.
<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> |
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"); | |
} |
@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;} | |
} |
<link href="https://fonts.googleapis.com/css?family=Mr+Dafoe" rel="stylesheet" /> |