Skip to content

Instantly share code, notes, and snippets.

@diessica
Last active December 28, 2015 10:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diessica/7489063 to your computer and use it in GitHub Desktop.
Save diessica/7489063 to your computer and use it in GitHub Desktop.

CSS floating labels

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment