Hi Guys,
Let’s do some fun here. I just wanna create simple article about how I did to make my girlfriend happy. She just want to me to make a heart symbol in browser. So I did.
Let’s do some code here.
We will write love.css :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.content { position: absolute; color: #eee; z-index: 99; top: 40%; left: 50%; transform: translate(-50%, -50%); } #heart { position: relative; width: 205px; height: 150px; } #heart:before, #heart:after { position: absolute; content: ""; left: 100px; top: 0; width: 100px; height: 160px; background: red; -moz-border-radius: 100px 100px 0 0; border-radius: 100px 100px 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; -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%; } |
And absolutely html file for rendering css.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <title>Heart for Someone You Love</title> <link rel="stylesheet" type="text/css" href="love.css" /> </head> <body> <div id="heart"> <div class="content">Your Lovers</div> </div> </body> </html> |
And the result will be like this :
Love
It’s so easy right?
Do it and share your love…