Just an CSS-only experiment that I wanted to share. =) I'm still improving it.
Tested on Google Chrome, Firefox and Opera.
Check out on CodePen.
Just an CSS-only experiment that I wanted to share. =) I'm still improving it.
Tested on Google Chrome, Firefox and Opera.
Check out on CodePen.
h1 Floating labels with CSS only | |
h2 ~ default ~ | |
input(id = "email") | |
label(for = "email") Your e-mail | |
h2 ~ center ~ | |
input.center(id = "live") | |
label.center(for = "live") Where do you live? |
$height: 75px | |
$color: #2c3e50 | |
input, label | |
padding: 30px 30px 10px 30px | |
input | |
/* visual */ | |
width: 100% | |
height: $height | |
opacity: 0.5 | |
background: $color | |
box-shadow: ($height / 8) ($height / 8) 0 darken($color, 8%) | |
border: 0 | |
border-radius: $height / 12 | |
transition: all 700ms ease-in | |
&:focus | |
$color: #4d346b | |
background: $color | |
box-shadow: ($height / 8) ($height / 8) 0 darken($color, 8%) | |
label | |
/* on */ | |
display: inline-block | |
position: relative | |
top: (-$height) | |
left: 0 | |
/* end state */ | |
transition: all 300ms ease 9999999s | |
/* visual */ | |
text-transform: uppercase | |
input:focus + label | |
top: (-$height - 13px) | |
/* visual */ | |
font-size: $height / 6 | |
font-weight: bold | |
/* end state */ | |
transition: all ease 300ms | |
// unnecessary style only | |
* | |
box-sizing: border-box | |
body, input | |
color: #fff | |
body | |
font-family: 'Open Sans' | |
background: url(http://i.imgur.com/D3HiN8e.jpg) | |
/* center vertically */ | |
position: absolute | |
top: 0 | |
right: 0 | |
bottom: 0 | |
left: 0 | |
width: $height * 8 | |
height: $height * 6 | |
margin: auto | |
h1, h2 | |
font-weight: normal | |
text-align: center | |
h1 | |
font-weight: bold | |
text-transform: uppercase | |
margin-bottom: 60px | |
input.center | |
text-align: center | |
label.center | |
width: $height * 8 | |
text-align: center | |
h2 | |
opacity: 0.5 | |
margin-top: -40px | |
label | |
cursor: text |