Skip to content

Instantly share code, notes, and snippets.

Created March 25, 2012 01:18
Show Gist options
  • Save girliemac/2190614 to your computer and use it in GitHub Desktop.
Save girliemac/2190614 to your computer and use it in GitHub Desktop.
Happy Valentine's Day!
* Happy Valentine's Day!
* Feb. 14th 2012
* @girlie_mac
body {
background: #f06;
.heart {
position: relative;
width: 300px;
height: 280px;
margin: 100px auto;
.heart::after {
content: "";
z-index: -1;
position: absolute;
top: 0;
background-color: maroon;
width: 150px;
height: 240px;
border-radius: 75px 75px 0 0;
.heart::before {
left: 0px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #cf9797;
box-shadow: -10px 1px 15px 0 rgba(0,0,0,0.2),
inset 20px -195px 65px 0 Maroon,
inset -2px 2px 0 rgba(255,255,255,.75),
inset -5px 20px 0px rgba(255,255,255,.35),
inset -5px 20px 10px rgba(255,255,255,.25);
.heart::after {
left: 64px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
15px 3px 25px rgba(0,0,0,0.35),
inset -25px 10px 35px rgba(0,0,0,.35);
.message {
font-family: 'Parisienne', cursive;
font-size: 42px;
font-weight: bold;
color: #861414;
text-shadow: -1px -1px 1px #cb9a9a, 1px 1px 1px #450000;
padding: 40px 0 0 5px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
.message:fisrt-child {
text-indent: 1em;
<link href='' rel='stylesheet' type='text/css'>
<div class="heart">
<div class="message"><div>Happy</div><div>Valentine's</div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment