Draw a circle with four segments

Draw a circle with four segments - javascript

So, this question was posted for Androids, but I couldn't find anything relating to HTML/CSS/Javascript. How can I draw a circle with four different segments to interact with?
The level of interaction I'm looking for is simple enough - just something to accept hover and click commands. I've done a lot of looking and I can't come up with anything. I know how to create a circle, but not one with four different areas I can interact with. Can anyone help?

html:
<a id="s1"></a>
<a id="s2"></a>
<a id="s3"></a>
<a id="s4"></a>
css:
a{
display:inline-block;
width:50px;
height:50px;
background:green;
}
a:hover{
background:blue;
}
#s1{
position:absolute;
top:0px;
left:0px;
border-top-left-radius:50px;
}
#s2{
position:absolute;
top:0px;
left:50px;
border-top-right-radius:50px;
}
#s3{
position:absolute;
top:50px;
left:0px;
border-bottom-left-radius:50px;
}
#s4{
position:absolute;
top:50px;
left:50px;
border-bottom-right-radius:50px;
}
demo

Do you mean something like this , the concept is pretty easy.
.quarter-circle {
background-color:#c06;
height:150px;
width: 150px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
}
just stick 4 quarters in 1 wrap div like this
HTML:
<div id="wrap">
<p class="quarter-circle"></p>
<p class="quarter-circle fliph"></p>
<p class="quarter-circle flipv"></p>
<p class="quarter-circle fliphv"></p>
</div>
CSS:
#wrap
{
width:300px;
height:300px;
}
.fliph
{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.flipv
{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.fliphv
{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1) scaleX(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.quarter-circle {
margin:0px;
background-color:#c06;
height:150px;
width: 150px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
position:relative;
display:inline-block;
float:left;
}

.c {
height: 20px;
width: 20px;
background-color: black;
position: absolute;
}
.c:hover {
background-color: red;
}
.tl {
top: 0;
left: 0;
border-top-left-radius: 20px;
}
.tr {
top: 0;
left: 20px;
border-top-right-radius: 20px;
}
.bl {
top: 20px;
left: 0;
border-bottom-left-radius: 20px;
}
.br {
top: 20px;
left: 20px;
border-bottom-right-radius: 20px;
}
<div class="c tl"></div><div class="c tr"></div><div class="c bl"></div><div class="c br"></div>

Related

css position pseudo elements stacking

Hello I use before & after in my element and it's work well, but the problem that when I set background-color for section the before & after will be disappear I know that this problem appear because of z-index: -1and I know that we can't stacking child element (before & after) above the parent element so what is the solution, I don't need to create any new elements to do this trick:
It's what I need:
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
}
.box-shadow-1{
height:200px;
background-color:#e8e8e8;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #777;
-webkit-box-shadow: 0 20px 20px #777;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

You need to give the box-shadow-1's parent a z-index, like this
.col-lg-11.col-lg-offset-1 {
position:relative;
z-index: 0;
}
I also adjusted your pseudo elements a little, so you get the shadow like the posted image
Stack snippet
section{
height:400px;
padding:30px 0;
background-color:#e8e8e8;
}
.col-lg-11.col-lg-offset-1 { /* added rule */
position:relative;
z-index: 0;
}
.box-shadow-1{
height:150px;
background-color:#00fb8f;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
height: 20px;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 30px 20px #777;
-webkit-box-shadow: 0 30px 20px #777;
box-shadow: 0 30px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

Is this what you are looking for?
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
}
.box-shadow-1{
height:200px;
position:relative;
}
.box-shadow-1 > div {
background-color:#e8e8e8;
height: 100%;
position: relative;
z-index: 10;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: 1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #777;
-webkit-box-shadow: 0 20px 20px #777;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
<div>Hello World</div>
</div>
</div>
</div>
</div>
</section>

I think the only way to achieve this is to send the <section> to the back and then bring the parent of .box-shadow1 forward like this,
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
z-index: -2;
}
.col-lg-11 {
z-index: 1;
}
As you can see below you achieve what you are looking for.
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
z-index: -2;
}
.col-lg-11 {
z-index: 1;
}
.box-shadow-1{
height:200px;
background-color:#e8e8e8;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #000;
-webkit-box-shadow: 0 20px 20px #000;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

Set a z-index value for the parent of box-shadow-1.
section{
height:400px;
padding:50px 0;
background-color:#00fb8f;
}
.box-shadow-1-parent {
position: relative;
z-index: 0;
}
.box-shadow-1 {
height:200px;
background-color:#e8e8e8;
position:relative;
}
.box-shadow-1:before,
.box-shadow-1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background-color:#ff0000;
-moz-box-shadow: 0 20px 20px #777;
-webkit-box-shadow: 0 20px 20px #777;
box-shadow: 0 20px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box-shadow-1:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-lg-11 col-lg-offset-1 box-shadow-1-parent">
<div class="box-shadow-1">
Hello World
</div>
</div>
</div>
</div>
</section>

jQuery Content slider blocks responsive menu drawer

The content slider blocks the menu items of my responsive site
I have used the following css to accomplish this
/* http://www.menucool.com */
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:920px;
margin:0 auto; /*center-aligned*/
padding:20px;
box-shadow: 0 0 5px #BBB;
border:1px solid #CCC;
background-color:#FFF;
}
#slider, #slider .sliderInner {
width:680px;height:306px;/* Must be the same size as the slider images */
border-radius:0px;
}
#slider {
background-color:white;
float:left;
position:relative;
transform: translate3d(0,0,0);
}
/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider .mc-caption {
position:absolute;
width:400px;
height:auto;
padding:10px 0;/* 10px will increase height.*/
left:120px;
bottom:10px;
overflow:hidden;
font:bold 13px/16px Arial;
color:#069;
text-align:center;
background:rgba(255,255,255,0.2);
border:1px solid rgba(255,255,255,0.3);
border-radius: 5px;
}
#slider .mc-caption a {
color:#060;
}
/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
display:none;
}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
/* -- thumbnails -- */
#thumbs
{
float:left;
margin-left:10px;
width:230px;
font:normal 11px/13px Arial;
border-top:1px solid #CCC;
color:#666;
}
#thumbs .thumb
{
border:1px solid #CCC;
border-top:1px solid #FFF;
padding:11px 8px;
background:#EEE;
cursor:pointer;
}
#thumbs .thumb-on
{
background:#FFF;
}
#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}
#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}
/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}
And the following html for the slider
<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
<div id="slider">
<img src="img/3.jpg" alt="Caption for slide 1" />
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
<img src="slide-3.jpg" alt="Header File" />
<img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
<img src="img/3.jpg" alt="Caption for slide 4"/>
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
</div>
</div>
here is the html for the menu drawer
<header role="banner">
<div id="cd-logo"><img src="img/cd-logo.svg" alt="logo" onClick="#"></div>
<nav class="main-nav">
<ul><!-- insert more links here -->
<li><a class="cd-signin" href="#0">Sign in</a></li>
<li><a class="cd-signup" href="#0">Sign up</a></li>
</ul>
</nav>
</header>
and its corresponding CSS
/* --------------------------------
Main components
-------------------------------- */
header[role=banner] {
position: relative;
height: 50px;
background: #343642;
}
header[role=banner] #cd-logo {
float: left;
margin: 4px 0 0 5%;
/* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
header[role=banner] #cd-logo img {
display: block;
}
header[role=banner]::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
#media only screen and (min-width: 768px) {
header[role=banner] {
height: 80px;
}
header[role=banner] #cd-logo {
margin: 20px 0 0 5%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
z-index:inherit;
}
}
.main-nav {
float: right;
margin-right: 5%;
width: 44px;
height: 100%;
background: url("../img/cd-icon-menu.svg") no-repeat center center;
cursor: pointer;
}
.main-nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.main-nav ul.is-visible {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.main-nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
background: #292a34;
border-top: 1px solid #3b3d4b;
color: #FFF;
}
#media only screen and (min-width: 768px) {
.main-nav {
width: auto;
height: auto;
background: none;
cursor: auto;
}
.main-nav ul {
position: static;
width: auto;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
line-height: 80px;
}
.main-nav ul.is-visible {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.main-nav li {
display: inline-block;
margin-left: 1em;
}
.main-nav li:nth-last-child(2) {
margin-left: 2em;
}
.main-nav a {
display: inline-block;
height: auto;
line-height: normal;
background: transparent;
}
.main-nav a.cd-signin, .main-nav a.cd-signup {
padding: .6em 1em;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50em;
}
.main-nav a.cd-signup {
background: #2f889a;
border: none;
}
}
Can Anyone help me???

The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value:
.header {
...
z-index: 10;
}
For more information on stacking context there is an excellent article on mdn.

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>

Need help adding more photo to my parallax site

Before I start I will like to say thank you to Keith Clark for parallax code.
So am trying to create a parallax site with about 50 photo but every time I added more than six images, the images doesn't show only four show. I even tried put up online links of photo, but it still does not seem to work, I have tried adding different types of photo but it still does not work. Any ideas how to fix this?
<!DOCTYPE html>
<html>
<head>
<script src="myScript.js"></script>
<title> Loose Fit </title>
<style>
#import url(http://www.1001fonts.com/code-predators-font.html);
html {
height: 100%;
overflow: hidden;
}
.logo {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/8e/d5/8d/8ed58d031c960b6fa4e14ae965d6aed0.jpg");
position: absolute;
top: 0;
left: 0;
}
body {
margin:0;
padding:0;
perspective: 1px;
-webkit-perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
h3 {
font-size: 200%
}
h3 {
font-size: 150%
}
h4{
font-size: 100%
}
h5{
font-size: 50%
}
p {
font-size: 140%;
font-color:6699FF
line-height: 150%;
color:6699FF;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
-webkit-transform-style: inherit;
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
-webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
-webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("11.jpg");
background-attachment: fixed;
}
#slide1: {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2: {
background-image: url("https://download.unsplash.com/photo-1422207134147-65fb81f59e38");
background-attachment: fixed;
}
#slide3: {
background-image: url("https://download.unsplash.com/photo-1428976343495-f2c66e701b2b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4: {
background-image: url("https://download.unsplash.com/photo-1428677361686-f9d23be145c9");
background-attachment: fixed;
}
#slide5: {
background-image: url("https://download.unsplash.com/photo-1425141750113-187b6a13e28c");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide6: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide7: {
background-image: url("https://download.unsplash.com/photo-1423439793616-f2aa4356b37e");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide8: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide9: {
background-image: url("https://download.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>Loose Fit Studio</h1>
<h4>Loose Fit is a hand-picked directory of the best high quality stock photography, deveryed to you.</h4>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>pic 1</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p></p>
</div>
<img src="https://download.unsplash.com/photo-1422433555807-2559a27433bd">
<img src="https://download.unsplash.com/photo-1418479631014-8cbf89db3431">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p></p>
</div>
</div>
<div id="slide4" class="slide header">
<div class="title">
</div>
</body>

I think this is just a case of poor coding (sounds like you've been staring at it for too long... happens to all of us)
In the HTML you posted you dont have a closing tag for the #slide4.
<div id="slide4" class="slide">
<div class="title">
<h1>Slide 4</h1>
<p></p>
</div>
</div>
Also in your CSS just for your Slide IDs 1-8 you have an extra colon : in the code.
#slide8: { <--remove colon
...
}
Should look like this
#slide8 {
...
}
Lastly the transform tag seemed to prevent the parallex from working correctly so i removed it.
#slide1 {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
Once that was cleaned up your code seemed to work well. You can see your code in action here.

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.

We Keep Coding

JavaScript is the programming language of the Web.

Draw a circle with four segments - javascript

Related

css position pseudo elements stacking

jQuery Content slider blocks responsive menu drawer

How to draw heart with text in middle?

Need help adding more photo to my parallax site

Webkit rendering box-shadows

Categories

Resources