Created
July 19, 2013 12:45
-
-
Save anonymous/6038862 to your computer and use it in GitHub Desktop.
A CodePen by Bennett Feely. CSS Google Now - Google Now is coming to Chrome sometime in the future. Can't wait... Make sure you focus on the input field. That's about it right now.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<main> | |
<input placeholder="Search, or say Google" x-webkit-speech autocomplete="off" /> | |
<header></header> | |
<section class="card"> | |
<h1><strong>32 minutes</strong> to Consol Energy Center</h1> | |
<h2>McKnight Road</h2> | |
<div class="map"></div> | |
</section> | |
<section class="card"> | |
<h1>View nearby events</h1> | |
<h2>Justin Bieber - Nicki Minaj - other crappy singers...</h2> | |
</section> | |
</main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic); | |
* { font-family: 'Roboto', sans-serif; line-height:1.2; vertical-align:middle; } | |
body { background:#222; } | |
main { | |
display:block; | |
position:relative; | |
width:30rem; | |
margin:3vh auto; | |
padding:1.5rem 0 0; | |
background:#d5d5d5; | |
outline | |
border-radius:.25rem; | |
overflow:hidden; | |
transform:scale(.75); | |
transform-origin:center 3rem; | |
transition:transform .3s; | |
} | |
body:hover main { | |
transform:scale(1); | |
} | |
header { | |
position:absolute; | |
z-index:0; | |
top:0; left:0; right:0; | |
height:10rem; | |
transition:transform .5s, opacity .3s; | |
background:url(http://www.droid-life.com/wp-content/uploads/2013/01/googlenownewyork.png) center center; | |
background-size:cover; | |
} | |
input, .card { | |
position:relative; | |
z-index:2; | |
} | |
input { | |
display:block; | |
width:26rem; | |
margin:4.5rem 1rem 2rem; | |
border:0; | |
font-size:1.2rem; | |
padding:.75rem 1rem; | |
border-radius:3px; | |
box-shadow:0 1px 2px #aaa; | |
transition:.5s, margin-bottom .15s; | |
} | |
input:focus { | |
margin:0 1rem 1rem; | |
outline:0; | |
} | |
input:focus + header { | |
transform:translate3d(0,-10rem,0); | |
opacity:0; | |
} | |
.card { | |
padding:1.5rem; | |
box-shadow:0 1px 2px #aaa; | |
background:white; | |
margin:0 1rem 1rem; | |
border-radius:3px; | |
user-select:none; | |
animation:fly-in-from-left .5s 1s ease both; | |
transform-origin:top left; | |
} | |
.card:nth-child(even){ | |
animation-name:fly-in-from-right; | |
animation-delay:1.1s; | |
transform-origin:top right; | |
} | |
@keyframes fly-in-from-left { | |
from { | |
transform:translateY(15rem) rotate(15deg); | |
opacity:0; | |
} | |
} | |
@keyframes fly-in-from-right { | |
from { | |
transform:translateY(15rem) rotate(-15deg); | |
opacity:0; | |
} | |
} | |
.card:after { | |
position:absolute; | |
font-size:.9rem; | |
top:1.5rem; | |
right:1rem; | |
content:"i"; | |
border:thin solid gray; | |
color:gray; | |
width:1rem; | |
line-height:1rem; | |
text-align:center; | |
border-radius:50%; | |
pointer-events:none; | |
} | |
h1 { | |
font-size:2rem; | |
font-weight:200; | |
} | |
strong { | |
font-weight:300; | |
color:#539D00; | |
} | |
h2 { | |
font-size:.9rem; | |
line-height:2.5; | |
color:gray; | |
font-weight:400; | |
} | |
.map { | |
height:12rem; | |
background:whitesmoke; | |
margin:.5rem 0 0 -1.5rem; | |
width:28rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment