OK today i created a heart image using CSS3 and HTML5
Below is the code
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.heart{
position:relative;
margin:20px;
height:170px;
width:200px;
}
.heart:before,
.heart:after {
content:"";
position:absolute;
height:160px;
top:5px;
width:100px;
background:red;
border-radius :50px 50px 0 0;
}
.heart:before{
left:100px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0% 100%;
transform-origin:0%100%;
}
.heart:after {
left:0;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
-webkit--transform-origin:100% 100%;
transform-origin:100% 100%;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
Here is the code just put it in a html extension page. Tell me what you think by leaving a comment as i have not
not still had a comment from my readers.
Also small note, i am going to be working to improve my jquery, SQL and phtoshop skills so expect more posts to be about those things.
Regards
No comments:
Post a Comment