We Keep Coding

<div> figures in search rendering issue

SO I have some code where jQuery and CSS are made to create a close icon after clicking the search icon. It uses the same div elements since it is supposed to animate itself (it doesn't in our case). As I was working (without affecting anything that has to do with the following search icon), I realized one of the divs height is out of place. If you view the CSS, you see that there are two divs with class of 'search2' and one of them is at an improper height or scale. I tried resizing the window and it does not go away.
enter image description here
So I have a search icon with this code:
function toggleSearch(){
$('.mobile-search-button').toggleClass('expand');
}
.mobile-search-button {
position: absolute;
top: 5px;
right: 15px;
width: 50px;
height: 50px;
border: none;
overflow: hidden;
}
.mobile-search-button * {
position: relative;
bottom: 4px;
left: 1px;
}
.search1 {
width: 12px;
height: 12px;
border: 2px solid black;
border-radius: 100px;
}
.search2 {
width: 10px;
height: 2px;
background: black;
-webkit-transform: rotate(45deg) translate(5px,-5px);
-ms-transform: rotate(45deg) translate(5px,-5px);
transform: rotate(45deg) translate(5px,-5px);
}
.search3 {
opacity: 0;
}
.mobile-search-button .search1 {
-webkit-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
-ms-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
transform: rotate(45deg) translate(5px,-5px) scale(1.75);
}
.mobile-search-button .search2 {
-webkit-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
-ms-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
transform: rotate(45deg) translate(19px,-9px) scale(1.75);
}
.mobile-search-button.expand .search1 {
-webkit-transform: rotate(45deg) translate(9px,-10px) scale(5);
-ms-transform: rotate(45deg) translate(9px,-10px) scale(5);
transform: rotate(45deg) translate(9px,-10px) scale(5);
opacity: 0;
}
.mobile-search-button.expand .search2 {
-webkit-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
-ms-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
}
.mobile-search-button.expand .search3 {
-webkit-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
-ms-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
<div class="search1"></div>
<div class="search2"></div>
<div class="search2 search3"></div>
</button>
UPDATE: I changed the height of div.search2 from 2px to 1.75px and it seems to work

I think the CSS could be done simpler.
function toggleSearch() {
$('.mobile-search-button').toggleClass('expand');
}
.mobile-search-button {
position: absolute;
top: 5px;
right: 15px;
width: 50px;
height: 50px;
border: none;
}
.search1,
.search2 {
background: black;
height: 36px;
left: 50%;
margin: -18px 0 0 -2px;
position: absolute;
transition: 200ms;
top: 50%;
width: 4px;
}
.search1 {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search2 {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.expand .search2 {
background: #dddddd;
border: 4px solid black;
border-radius: 100%;
height: 20px;
left: 7px;
margin: 0;
top: 6px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
<div class="search1"></div>
<div class="search2"></div>
</button>

I want to fill multi colors in progress bar as per value increases

Currently in semi-arc progress bar static colors are filled, but I want to fill it with multi colors as per value increases.
Meter point i.e circle is not coming completely on arc while rotation which i want completely on arc.
Thanks in advance.
var dial = $(".dial .inner");
var gauge_value = $(".gauge .value");
function rotateDial()
{
var deg = 0;
var value = Math.round(Math.random()*100);
deg = (value * 177.5) / 100;
gauge_value.html(value + "%");
dial.css({'transform': 'rotate('+deg+'deg)'});
dial.css({'-ms-transform': 'rotate('+deg+'deg)'});
dial.css({'-moz-transform': 'rotate('+deg+'deg)'});
dial.css({'-o-transform': 'rotate('+deg+'deg)'});
dial.css({'-webkit-transform': 'rotate('+deg+'deg)'});
}
setInterval(rotateDial, 2000);
html,
body {
padding: 0;
margin: 0;
}
body,
.dial {
background-color: #000;
overflow: hidden;
}
.gauge {
position: absolute;
width: 500px;
height: 500px;
top: 30px;
left: 50%;
margin-left: -250px;
border-radius: 100%;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
z-index: 9999;
}
.meter {
margin: 0;
padding: 0;
}
.meter > li {
width: 250px;
height: 250px;
list-style-type: none;
position: absolute;
border-top-left-radius: 250px;
border-top-right-radius: 0px;
transform-origin: 100% 100%;
;
-webkit-transform-origin: 100% 100%;
;
-ms-transform-origin: 100% 100%;
;
transition-property: -webkit-transform;
pointer-events: none;
}
.meter .low {
transform: rotate(0deg);
/* W3C */
-webkit-transform: rotate(0deg);
/* Safari & Chrome */
-moz-transform: rotate(0deg);
/* Firefox */
-ms-transform: rotate(0deg);
/* Internet Explorer */
-o-transform: rotate(0deg);
/* Opera */
z-index: 8;
background-color: #09B84F;
}
.meter .normal {
transform: rotate(47deg);
/* W3C */
-webkit-transform: rotate(47deg);
/* Safari & Chrome */
-moz-transform: rotate(47deg);
/* Firefox */
-ms-transform: rotate(47deg);
/* Internet Explorer */
-o-transform: rotate(47deg);
/* Opera */
z-index: 7;
background-color: #FEE62A;
}
.meter .high {
transform: rotate(90deg);
/* W3C */
-webkit-transform: rotate(90deg);
/* Safari & Chrome */
-moz-transform: rotate(90deg);
/* Firefox */
-ms-transform: rotate(90deg);
/* Internet Explorer */
-o-transform: rotate(90deg);
/* Opera */
z-index: 6;
background-color: #FA0E1C;
}
.dial,
.dial .inner {
width: 470px;
height: 470px;
position: fixed;
top: 10px;
left: 5px;
border-radius: 100%;
border-color: purple;
z-index: 10;
transition-property: -webkit-transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transform: rotate(0deg);
/* W3C */
-webkit-transform: rotate(0deg);
/* Safari & Chrome */
-moz-transform: rotate(0deg);
/* Firefox */
-ms-transform: rotate(0deg);
/* Internet Explorer */
-o-transform: rotate(0deg);
/* Opera */
}
.dial .arrow {
width: 35px;
height: 35px;
position: absolute;
top: 225px;
left: -1px;
/* Safari & Chrome */
/* Firefox */
/* Internet Explorer */
/* Opera */
background: #fff;
border-radius: 100%;
z-index: 1000;
margin-left: -29px;
}
.gauge .value {
font-family: 'Josefin Slab', serif;
font-size: 50px;
color: #ffffff;
position: absolute;
top: 142px;
left: 45%;
z-index: 11;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="gauge">
<ul class="meter">
<li class="low"></li>
<li class="normal"></li>
<li class="high"></li>
</ul>
<div class="dial">
<div class="inner">
<div class="arrow">
</div>
</div>
</div>
<div class="value">
0%
</div>
</div>

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>

How to draw heart with text in middle?

I found this answer "css: how to draw circle with text in middle?" , but I need the same, but with a heart shape. I found a lot of heart shape figures online, but none of this with text inside. At the same time, I need the heart only with borders, and when click, filled the background.
My code until now:
.heart {
width: 100px;
height: 90px;
font-size: 50px;
color: #fff;
line-height: 100px;
text-align: center;
}
.heart:before,
.heart: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%;
}
.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%;
}
<div class="heart">Heart</div>

In order to get text to appear on the heart, you need to set the heart container as relative and the text inside of it as absolute as shown below.
I set the border of the :before and :after to give the heart a border.
The toggling of the fill uses functionality from YouMightNotNeedJQuery.com.
function toggleFill(heart, className) {
if (!hasClass(heart, className)) {
addClass(heart, className);
} else {
removeClass(heart, className);
}
}
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
function removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(
new RegExp('(^|\\b)' + className.split(' ').join('|') +
'(\\b|$)', 'gi'), ' ');
}
}
function hasClass(el, className) {
if (el.classList) {
return el.classList.contains(className);
} else {
return new RegExp('(^| )' + className +
'( |$)', 'gi').test(el.className);
}
}
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.filled:before,
.filled:after {
background: red !important;
}
#wrapper {
width: 300px;
height: 180px;
background: #444;
}
.heart {
position: relative;
top: calc(50% - 45px); /* 1/2 height of wrapper - 1/2 height of heart */
left: calc(50% - 50px); /* 1/2 width of wrapper - 1/2 width of heart */
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
top: 0px;
width: 50px;
height: 80px;
background: inherit;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
}
.heart:before {
left: 50px;
-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%;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart:after {
left: 0px;
-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%;
border-right: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart-text {
position: absolute;
top: 0;
left: calc(50px - 30px); /* 1/2 width of heart - 1/2 width of text */
z-index: 100;
line-height: 66px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #FFF;
}
<div id="wrapper">
<div class="heart" onclick="toggleFill(this, 'filled')">
<div class="heart-text unselectable">
Heart
</div>
</div>
</div>

A quick search and there is a good article about creating shapes with CSS over # css-tricks.com that can be seen here.
If we take the example of how to create a heart and extend upon it a little we can get the following snippet that gives you a heart that starts out simply as a border;
(function(){
var heart = document.querySelector('#heart');
heart.addEventListener('click', function(e) {
this.className += ' is--filled'
});
}());
#heart {
position: relative;
width: 100px;
height: 90px;
text-align: center;
font-size: 16px;
position: relative;
}
#heart span {
width: 100%;
display: block;
top: 50%;
margin-top: -16px;
line-height: 16px;
left: 0;
right: 0;
position: absolute;
z-index: 1;
}
#heart.is--filled:before,
#heart.is--filled:after {
background-color: red;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
border: 1px solid red;
transition: background-color .25s ease 0s;
-webkit-transition: background-color .25s ease 0s;
-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;
-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%;
}
#heart:before {
border-right: none;
border-bottom: none;
}
#heart:after {
border-left: none;
border-bottom: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id='heart'>
<span>Hey</span>
</div>
</body>
</html>
However, as someone else has mentioned in the comments it may be an easier approach to use images or the canvas element. I say this purely because it may prove difficult to get just the heart border you desire before clicking the heart (easier to see if you run the snippet). You could opt for much softer opaque background color before you click and then transition to red maybe?
Hope this helps you out!

Use pseudo elements of css3.
.text {
position: absolute;
color: #eee;
z-index: 99;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart: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%;
}
#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%;
}
<div id="heart">
<div class="text">ABC</div>
</div>

Use this
HTML
$('#change').click(function() {
var className = $(this).attr('class');
if(className == "heart"){
$(this).removeClass('heart');
$(this).addClass('heart1');
}
else{
$(this).removeClass('heart1');
$(this).addClass('heart');
}
});
.txt{
z-index:1;
font-size: 20px;
color: #000;
position:relative;
text-align:center;
top:15px;
right:5px;
}
.heart {
width: 100px;
height: 90px;
}
.heart1 {
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: yellow;
-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%;
}
.heart1:before,
.heart1: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%;
}
.heart1: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%;
}
.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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change" class="heart"><div class="txt">Heart</div></div>

Webkit rendering box-shadows

I can't figure out how these are happening:
http://d.pr/i/PHJF
Has anyone experienced these types of box shadows being rendered? It appears to happen when I use JavaScript/jQuery to append some elements to the DOM.
Any insight would be great!

try this
<div class="box effect2">
box
</div>
css
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

Fixed it! For anyone that runs into issues like this:
http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
Specifically used the backface-visibility and perspective to fix my issue.