Skip to content

Instantly share code, notes, and snippets.

@timnew
Created November 13, 2012 11:09
Show Gist options
  • Save timnew/4065249 to your computer and use it in GitHub Desktop.
Save timnew/4065249 to your computer and use it in GitHub Desktop.
Untitled
body {
position: relative;
width:500px;
height:200px;
}
.notification {
width: 360px;
height: 142px;
overflow: hidden;
border: 1px solid blue;
}
.background {
-webkit-border-radius: 20px;
padding: 20px;
border: 1px solid #eee;
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
box-shadow: 2px 2px 5px #ccc; //h-shadow v-shadow blur spread color inset
}
.overlay {
border: 1px solid purple;
-webkit-border-radius: 20px;
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 40%);
}
h1 {
margin: 0;
font-size: 28px;
}
p {
margin:0;
}
img {
position: absolute;
right: 0;
top: 0;
height: 80px;
width: 80px;
margin: 10px;
}
<div class="notification">
<div class="background">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis pulvinar bibendum.</p>
</div>
<div class="overlay"></div>
</div>
<img src="http://growl.info/images/growlicons/Growl_128x128.png">
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment