Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="logo">
- <div id="heart-container">
- </div>
- <div id="heart">
- </div>
- </div>
- #logo {
- width: 50%;
- height: 50%;
- }
- #heart {
- display: block;
- position: absolute;
- top: 70px;
- left: 30px;
- z-index: 1;
- width: 70%;
- height: 70%;
- }
- #heart-container {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- /*bottom:0;
- right:0;*/
- z-index: 1;
- width: 70%;
- height: 70%;
- }
- #heart-container {
- border-radius: 50%;
- behavior: url(PIE.htc);
- width: 220px;
- height: 220px;
- padding: 8px;
- background: #fff;
- border: 2px solid #666;
- color: #666;
- text-align: center;
- font: 32px Arial, sans-serif;
- }
- #heart:before,
- #heart:after {
- position: absolute;
- content: "";
- left: 90px;
- top: 0;
- width: 90px;
- height: 130px;
- background: red;
- -moz-border-radius: 50px 50px 0 0;
- border-radius: 50px 50px 0 0;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- transform: rotate(-45deg);
- -webkit-transform-origin: 0 100%;
- -moz-transform-origin: 0 100%;
- -ms-transform-origin: 0 100%;
- -o-transform-origin: 0 100%;
- transform-origin: 0 100%;
- }
- #heart:after {
- left: 0;
- box-shadow: 10px 10px 100px #6d0019;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- -webkit-transform-origin: 100% 100%;
- -moz-transform-origin: 100% 100%;
- -ms-transform-origin: 100% 100%;
- -o-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement