Heart shape created with a DIV tag and CSS properties (without image file).
Code:
<style type="text/css">
#heartsp {
position: relative;
width: 100px;
height: 90px;
}
#heartsp:before, #heartsp:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
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%;
}
#heartsp: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%;
}
</style>
<div id="heartsp"></div>
Demo:
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article><nav><ul>
<li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
<li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float.some_class {
width: 30%;
float: left;
}Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)var num = 12.34567;
num = Math.floor(num);
alert(num); // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr; // 30