A very ugly implementation of something that looks quite pretty.
A Pen by Riley Shaw on CodePen.
A very ugly implementation of something that looks quite pretty.
A Pen by Riley Shaw on CodePen.
p#shell type here | |
input#ghost type='text' |
$ghost = $('#ghost') | |
$shell = $('#shell') | |
$ghost.click -> | |
$(this).val('') | |
$ -> | |
$ghost.val($shell.text()) | |
textCheck = -> | |
cur = $ghost.val() | |
if cur isnt oldVal | |
$shell.text($ghost.val()) | |
oldVal = cur | |
sentinel = setInterval(textCheck, .1) |
@import "compass" | |
@keyframes blinky | |
0% | |
background: transparent | |
100% | |
background: black | |
@-webkit-keyframes blinky | |
0% | |
background: transparent | |
100% | |
background: black | |
input, p | |
position: fixed | |
top: 50% | |
left: 0 | |
height: 80px | |
line-height: 80px | |
width: 100% | |
margin-top: -40px | |
vertical-align: middle | |
text-align: center | |
font-size: 60px | |
font-family: 'Roboto', sans-serif | |
input | |
color: transparent | |
background-color: transparent | |
border: 0 | |
outline: none | |
p:after, p:before | |
content: '' | |
display: inline-block | |
width: 8px | |
height: 60px | |
vertical-align: middle | |
p:after | |
position: relative | |
bottom: 8px | |
left: 8px | |
background: #000 | |
animation: blinky 1s linear infinite alternate | |
-webkit-animation: blinky 1s linear infinite alternate |