In box1:after z-index:1; it does not work.
.box1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background-color: gray;
border-radius: 50%;
}
.box1:after {
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border: 4px solid red;
border-radius: 50%;
z-index: -1;
}
<div class="box1"></div>
Does anyone know what the solution is?
you must to get help of :before, like this:
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height:120px;
transform:translate(-50%,-50%);
}
.box1:before {
text-align: center;
line-height: 120px;
content: 'click';
position: absolute;
width: 100%;
height:100%;
background-color: gray;
border-radius: 50%;
}
.box1:after{
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border:4px solid red;
border-radius: 50%;
z-index:-1;
}
<div class="box1"></div>
Related
.seven_number {
position: absolute;
right: 147px;
top: 25px;
width: 14px;
}
.seven_number:after {
content: "";
height: 5px;
width: 20px;
position: absolute;
background: #c6c6c6;
top: 0px;
left: -2px;
}
.seven_number:before {
content: "";
height: 27px;
width: 5px;
position: absolute;
background: #c6c6c6;
top: 0px;
right: 0px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
<div class="seven_number"></div>
This code is to draw a 7 with css like this https://i.stack.imgur.com/QVBXi.png
Can anyone help me draw an 8 like that please?
You can use this style as example:
.eight_number {
position: absolute;
right: 187px;
top: 25px;
width: 14px;
}
.eight_number:after {
content: "";
height: 6px;
width: 6px;
position: absolute;
top: 0px;
border-radius: 50%;
background-color:#fff;
border:4px solid #c6c6c6;
}
.eight_number:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 10px;
left:-2px;
border-radius: 50%;
background-color:#fff;
border:4px solid #c6c6c6;
}
<div class="eight_number"></div>
See in playground: https://jsfiddle.net/denisstukalov/egv64dk7/16/#&togetherjs=ivslT1OqpI
https://codepen.io/oli-oli-oxen-free/pen/XExzQJ
.button{
position: absolute;
height:25px;
width: 40px;
top: 290px;
left: 725px;
right: -420px;
bottom: -191px;
}
I have tried messing with the padding and margins
Looks like you are aligning everything in the centre of your page but you align the button 725px from the left of your page
What you need to do is position the div holding the button and then put text-align:center on that div:
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.Box {
position: relative;
margin: auto;
display: block;
border: solid 4px skyBlue;
margin-top: 2%;
width: 600px;
height: 450px;
background: none;
z-index: -1
}
.tittle {
text-align: center;
font-family: 'courier new', Courier, monospace;
}
.speech-buble-top {
position: relative;
display: block;
border: solid 4px black;
top: -15%;
left: ;
width: 200px;
height: 100px;
background: white;
border-radius: 50%;
text-align: center
}
#h3 {
position: absolute;
text-align: center;
vertical-align: center;
width: 90%;
height: 80%;
left: 10px;
font-size: 25px;
background: none;
border: none;
border-radius: 5px;
}
.speech-buble-bottom {
position: relative;
display: triangle;
border-right: solid 4px black;
border-bottom: solid 4px black;
top: -23.5%;
left: 30%;
width: 15px;
height: 20px;
background: white;
z-index: 1;
transform: rotate(13deg);
}
.balloon-1 {
position: absolute;
top: -2%;
left: 70%;
width: 100px;
height: 110px;
background: red;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-1 {
position: absolute;
top: 22%;
left: 76%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid red;
z-inedx: 1;
}
.balloon-string-1 {
position: absolute;
top: 29.5%;
left: 69%;
width: 80px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(100deg);
z-inedx: -1;
}
.balloon-2 {
position: absolute;
top: -8%;
left: 75%;
width: 100px;
height: 110px;
background: #228B22;
border-radius: 50%;
z-index: -1;
}
.balloon-string-2 {
position: absolute;
top: 26%;
left: 69%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(115deg);
z-inedx: -1;
}
.balloon-3 {
position: absolute;
top: -4%;
left: 78%;
width: 100px;
height: 110px;
background: #9400D3;
border-radius: 50%;
z-index: -1;
}
.balloon-bottom-3 {
position: absolute;
top: 20%;
left: 84%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #9400D3;
}
.balloon-string-3 {
position: absolute;
top: 29%;
left: 71%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(120deg);
z-inedx: -1;
}
.balloon-4 {
position: absolute;
top: -2%;
left: 85%;
width: 100px;
height: 110px;
background: #FFD700;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-4 {
position: absolute;
top: 22%;
left: 91%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #FFD700;
}
.balloon-string-4 {
position: absolute;
top: 29.5%;
left: 73%;
width: 130px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(140deg);
z-inedx: -1;
}
.head {
position: absolute;
top: 5%;
left: 40%;
width: 125px;
height: 135px;
background: pink;
border-radius: 5px;
}
.l-lash-1 {
position: absolute;
top: 10%;
left: 28%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-50deg)
}
.l-lash-2 {
position: absolute;
top: 8%;
left: 30%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-30deg)
}
.l-lash-3 {
position: absolute;
top: 8%;
left: 33%;
width: 3%;
height: 6%;
background: black;
transform: rotate(-20deg)
}
.r-lash-1 {
position: absolute;
top: 10%;
left: 75%;
width: 3%;
height: 8%;
background: black;
transform: rotate(50deg)
}
.r-lash-2 {
position: absolute;
top: 8%;
left: 73%;
width: 3%;
height: 8%;
background: black;
transform: rotate(30deg)
}
.r-lash-3 {
position: absolute;
top: 8%;
left: 70%;
width: 3%;
height: 6%;
background: black;
transform: rotate(20deg)
}
.eye-left {
position: absolute;
top: 15px;
left: 35px;
width: 30px;
height: 50px;
background: white;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.eye-right {
position: absolute;
top: 15px;
left: 66px;
width: 30px;
height: 50px;
background: white;
border-radius: 5px;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.inner-eye-left {
position: absolute;
top: 15%;
left: 19%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.inner-eye-right {
position: absolute;
top: 15%;
left: 0%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.pupil-left {
position: absolute;
top: 15%;
left: 15%;
width: 42%;
height: 35%;
background: white;
border-radius: 50%;
}
.pupil-right {
position: absolute;
top: 15%;
left: 10%;
width: 35%;
height: 30%;
background: white;
border-radius: 50%;
}
.hair-left {
position: absolute;
top: -25%;
left: 45%;
width: 5%;
height: 30%;
background: pink;
transform: rotate(-30deg)
}
.hair-right {
position: absolute;
top: -18%;
left: 60%;
width: 5%;
height: 25%;
background: pink;
transform: rotate(30deg)
}
.hair-top-left {
position: absolute;
top: -30%;
left: 32%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.hair-top-right {
position: absolute;
top: -25%;
left: 65%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.mouth-top {
position: absolute;
top: 60%;
left: 29%;
width: 50%;
height: 17%;
background: pink;
border-radius: 50%;
z-index: 1;
}
.mouth {
position: absolute;
top: 61%;
left: 29%;
width: 50%;
height: 17%;
background: none;
border-radius: 50%;
border-bottom: solid 4px black;
}
.ear-bar-1 {
position: absolute;
top: 34%;
left: -9%;
width: 120%;
height: 31%;
background: lightGrey;
z-index: -1;
}
.ear-bar-2 {
position: absolute;
top: 40%;
left: -18%;
width: 140%;
height: 19%;
background: pink;
z-index: -2;
}
.ear-bar-3 {
position: absolute;
top: 45%;
left: -25%;
width: 155%;
height: 10%;
background: lightGrey;
z-index: -3;
}
.ear-left-circle {
position: absolute;
top: 41%;
left: -37%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.ear-right-circle {
position: absolute;
top: 41%;
left: 125%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.neck {
position: absolute;
top: 100%;
left: 26.5%;
width: 50%;
height: 12%;
background: lightGrey;
border-radius: 5px
}
.button-holder {
position: absolute;
height: 25px;
top: 290px;
left: 0;
width:100%;
text-align: center;
}
.upper-body {
position: absolute;
top: 110%;
left: -15%;
width: 130%;
height: 125%;
background: pink;
border-radius: 5px;
z-index: +1
}
.bullet-1 {
position: absolute;
top: 5%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-2 {
position: absolute;
top: 5%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-3 {
position: absolute;
top: 88%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-4 {
position: absolute;
top: 88%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.heart-left {
position: absolute;
top: 20%;
left: 68%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(-25deg)
}
.heart-right {
position: absolute;
top: 20%;
left: 72%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(25deg)
}
.hand-left {
position: absolute;
top: 132%;
left: -85%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(30deg);
z-index: -1;
}
.hand-right {
position: absolute;
top: 132%;
left: 100%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(-35deg);
z-index: 1;
}
.h-line-1 {
position: absolute;
top: 34%;
left: 1%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-2 {
position: absolute;
top: 34%;
left: 20%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-3 {
position: absolute;
top: 34%;
left: 40%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-4 {
position: absolute;
top: 34%;
left: 60%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.palm-left {
position: absolute;
top: 0%;
left: -30%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(90deg);
}
.palm-right {
position: absolute;
top: 0%;
left: 85%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(270deg);
}
.left-leg {
position: absolute;
top: 235%;
left: 0%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.right-leg {
position: absolute;
top: 235%;
left: 68%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.l-line-1 {
position: absolute;
top: 0%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.l-line-2 {
position: absolute;
top: 20%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.l-line-3 {
position: absolute;
top: 40%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.shoe-left {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
.shoe-right {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
<h1 class="tittle">Robot</h1>
<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>
<div class="Box">
<div class="speech-buble-top">
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
</div>
<div class="speech-buble-bottom"></div>
<div class="balloon-1"></div>
<div class="balloon-2"></div>
<div class="balloon-3"></div>
<div class="balloon-4"></div>
<div class="balloon-bottom-1"></div>
<div class="balloon-bottom-3"></div>
<div class="balloon-bottom-4"></div>
<div class="balloon-string-1"></div>
<div class="balloon-string-2"></div>
<div class="balloon-string-3"></div>
<div class="balloon-string-4"></div>
<div class="head">
<div class="eye-left">
<div class="inner-eye-left"></div>
<div class="pupil-left"></div>
</div>
<div class="eye-right">
<div class="inner-eye-right"></div>
<div class="pupil-right"></div>
</div>
<div class="l-lash-1"></div>
<div class="l-lash-2"></div>
<div class="l-lash-3"></div>
<div class="r-lash-1"></div>
<div class="r-lash-2"></div>
<div class="r-lash-3"></div>
<div class="hair-left"></div>
<div class="hair-right"></div>
<div class="hair-top-left"></div>
<div class="hair-top-right"></div>
<div class="mouth-top"></div>
<div class="mouth"></div>
<div class="ear-bar-1"></div>
<div class="ear-bar-2"></div>
<div class="ear-bar-3"></div>
<div class="ear-left-circle"></div>
<div class="ear-right-circle"></div>
<div class="neck"></div>
<div class="upper-body">
<div class="bullet-1"></div>
<div class="bullet-2"></div>
<div class="bullet-3"></div>
<div class="bullet-4"></div>
<div class="heart-left"></div>
<div class="heart-right"></div>
<div class="bullet-center"></div>
</div>
<div class="hand-left">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-left"></div>
</div>
<div class="hand-right">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-right"></div>
</div>
<div class="left-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-left"></div>
</div>
<div class="right-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-right"></div>
</div>
</div>
<!--end of head-->
</div>
In the above, I have added a class of button-holder to your div. Removed the css for button and added css for the new div
.line-8 {
width: 100px;
height: 1px;
background-color: orange;
position: relative;
left: 240px;
top: 15px;
margin-bottom: 35px;
}
How to make look like this
Try This:
.line-8 {
width: 100px;
height: 1px;
background-color: orange;
position:relative;
left: 240px;
top: 15px;
margin-bottom:35px;
}
.line-8:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
background-color: orange;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<div class="line-8"></div>
I am trying to make an arc in the right border of a div/panel , please let me know if there are any ways to do it. attached is the snapshot of mockup.
You can reach this effect in CSS. Example below.
.wrap {
position: relative;
width: 100px;
height: 400px;
background-color: pink;
overflow: hidden;
}
.wrap::before {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left:-280px;
background-color: tomato;
}
.wrap::after {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -280px;
margin-left:-290px;
background-color: white;
}
<div class="wrap">
</div>
I would like to center text as CSS3 content attr vertically and horizontally. Centering should have no issues on screen resize.
Please inspect the code at: http://jsfiddle.net/epomschar/3pb3swwe/
<div class="container"></div>
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
bottom: 0;
left: 0;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
Solution: http://jsfiddle.net/epomschar/3pb3swwe/7/
Just remove bottom: 0; and you already got the solution.
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
/* bottom: 0; REMOVE THIS LINE */
left: 0;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
<div class="container"></div>
Just add a padding to &:after.If you want to change more, you simply add padding-left,padding-right and change the position as you want.This one padding attribute make changes to all over your circle,you can specify changes like what i said you before by using padding-left etc.
.container {
position: relative;
height: 200px;
width: 200px;
&:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
bottom: 0;
left: 0;
text-align: center;
transform: translateY(-50%);
padding:30px; //MODIFICATION
}
&:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
}
Else you can add transform: translateY(-30%); and margin:5%; instead of padding:30%;
Do you mean like this? The plus is right in the centre.
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: '+';
color: white;
width: 100%;
font-size: 34px;
top: 50%;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
background-color: black;
border-radius: 50%;
width: 100%;
height: 100%;
}
<div class="container"></div>