Skip to content

Instantly share code, notes, and snippets.

Created September 22, 2013 07:08
Show Gist options
  • Save anonymous/6657476 to your computer and use it in GitHub Desktop.
Save anonymous/6657476 to your computer and use it in GitHub Desktop.
A Pen 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.

A Pen by Bennett Feely on CodePen.

License.

<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>
@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