Re-inspired by http://darcyclarke.me/dev/hawtcss/#landing-slide
A Pen by James Basoo on CodePen.
Re-inspired by http://darcyclarke.me/dev/hawtcss/#landing-slide
A Pen by James Basoo on CodePen.
<h1><span class="light">Funky te</span><span class="dark">CSS</span><span class="light">t</span></h1> |
@import url(http://fonts.googleapis.com/css?family=Montserrat:700); | |
::selection{background: rgba(0, 0, 0, 0.1);} | |
html{ width:100%; height: 100%; background: #9FA7B2 url(https://dl.dropbox.com/u/40671103/bgColor1.jpg) no-repeat center center; background-size: cover;} | |
h1{ | |
display: block; | |
width: 800px; | |
height: 200px; | |
line-height: 200px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin: -100px 0 0 -400px; | |
text-align:center; | |
font-family: 'Montserrat', sans-serif; | |
text-transform:uppercase; | |
font-size: 80px; | |
border-top: 4px solid white; | |
border-bottom: 4px solid white; | |
cursor:pointer; | |
user-select: none; | |
} | |
h1 span.light{ | |
color:#fefefe; | |
text-shadow: | |
0px 1px 0px #c0c0c0, | |
0px 2px 0px #b0b0b0, | |
0px 3px 0px #a0a0a0, | |
0px 4px 0px #909090, | |
0px 5px 10px rgba(0, 0, 0, 0.6) | |
; | |
} | |
h1 span.dark{ | |
color: #101010; | |
text-shadow: | |
0px 1px 0px #555555, | |
0px 2px 0px #454545, | |
0px 3px 0px #353535, | |
0px 4px 0px #252525, | |
0px 5px 10px rgba(0, 0, 0, 0.6) | |
; | |
} | |
h1:active{ | |
line-height: 205px; | |
} | |
h1:active span.light{ | |
color:#fefefe; | |
text-shadow: | |
0px 0px 0px #c0c0c0, | |
0px 0px 0px #b0b0b0, | |
0px 0px 0px #a0a0a0, | |
0px 0px 0px #909090, | |
0px 1px 3px rgba(0, 0, 0, 0.4) | |
; | |
} | |
h1:active span.dark{ | |
color: #101010; | |
text-shadow: | |
0px 0px 0px #555555, | |
0px 0px 0px #454545, | |
0px 0px 0px #353535, | |
0px 0px 0px #252525, | |
0px 1px 3px rgba(0, 0, 0, 0.4) | |
; | |
} |