I have a shape which is a heart and I have a number inside. The problem is that I can have a number with 1 digit and a number with 2 digit and I am not able to center them into the heart.
https://jsfiddle.net/b7ggddqy/
.description{
position:relative;
height:100px;
}
.heart{
z-index:-500;
position: absolute;
top:70%;
right:20%;
width: 30px;
height: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #BF4139;
}
.heart:before,
.heart:after{
position: absolute;
width: 30px;
height: 30px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #BF4139;
}
.heart:before{
bottom: 0px;
left: -15px;
}
.heart:after{
top: -15px;
right: 0px;
}
.heart p{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position:absolute;
z-index: 800;
left:10px;
top:-15px;
font-size:18px;
color:white;}
<div class="description">
<div class="heart">
<p>11</p>
</div>
</div>
<div class="description">
<div class="heart">
<p>3</p>
</div>
</div>
Just give a width to the paragraph and text-align:center
.heart p {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position:absolute;
z-index: 800;
left:3px;
top:0px;
font-size:18px;
color:white;
width:20px;
text-align:center;
}
Demo: https://jsfiddle.net/lotusgodkk/b7ggddqy/3/
Set p width to 100% and text-align:center.
Is this what you are looking for?
.heart p{
position:absolute;
text-align:center;
width:20px;
margin-left:-13px;
}
JSFiddle
Related
So what i want is: when cursor goes over the image (diamond), no to activate the hover of the octagon.
Here is the example:
http://codepen.io/Chrez/pen/yYajGo
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>
CCS:
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
}
Add pointer-events: none; to .diamond
codepen
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
pointer-events: none;
}
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>
Can someone explain why my purple box overlaps my yellow box in this demo?
I'd like my yellow box to appear first & then my purple box to be 10px below it.
Demo: http://jsfiddle.net/t0x0y7ax/
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
Personally, I would just transform the container...it makes it much easier all round
JSfiddle Demo
* {
margin: 0;
padding: 0;
}
#container {
position: fixed;
top:50%;
left:0;
border:1px solid red;
transform-origin:top left;
transform: rotate(-90deg) translate(-100%, 0%);
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
It is because of the rotation as the commentator specified. You can float them to get them to show up next to each other - http://jsfiddle.net/t0x0y7ax/2/.
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
float: left;
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
float: left;
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Updated Fiddle - http://jsfiddle.net/t0x0y7ax/12/
I want to align a text vertically(That is 270 degree) and in the vertical middle of an image. This is what i actually want
I tried with CSS 'transform' property but its not working for me. Here i tried the code . And the HTML and CSS code i tried is
HTML :
<div id="img-container">
<label id="lblConfidence">Confidence</label>
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
CSS :
#img-container{
margin: 0 auto;
padding:0;
}
#image{
border:5px solid red;
margin-left:50px;
width:10px;
height:100px;
}
#lblConfidence{
vertical-align:middle;
transform:rotate(270deg) ;
-ms-transform:rotate(270deg) ; /* IE 9 */
-transform:rotate(270deg) ; /* Opera, Chrome, and Safari */
}
#lblLow{
margin-left:48px;
}
#lblHigh{
margin-left:48px;
}
Here's a solution that relies on pseudo-elements and thus uses minimal markup: http://jsfiddle.net/C49q7/1/. A particular emphasis has been placed on the alignment of elements. The #image element can be moved anywhere. The labels follow it precisely.
HTML:
<div id="image"><span></span></div>
CSS:
#image {
border:5px solid red;
width:100px;
height:20px;
text-align: center;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-top: 100px;
}
#image:before {
content: "Conidence";
position: absolute;
top: -24px;
left: 0;
right: 0;
text-align: center;
}
#image > span:before {
content: "High";
position: absolute;
right: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
#image > span:after {
content: "Low";
position: absolute;
left: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
add css to container.
#img-container {
position: relative;
}
add css to label.
#lblConfidence {
position: absolute;
top: 50%; -moz-transform:
rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
Here only given a style for align the label 50%. But it is depending on the length of the label. if this label is dynamic, please use a javascript to set the " top: 50%" style. and change the value relatively to the length of label.
Please replace lable with div and use below CSS for lblConfidence :
#lblConfidence
{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
writing-mode: tb-rl; /* IE 8 */
filter: flipv fliph; /* IE 8 */
margin-top: 100px;
width: 200px;
text-align: center;
height: 50px;
background:#ccc;
}
you can refer this solution : http://jsbin.com/joqofu/3
<div class="container">
<div class="left"><label>Confidence</label></div>
<div class="right">
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
</div>
and css
.container{
position:relative;
}
#image{
border:5px solid red;
width:10px;
height:100px;
}
.left {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display:block;
height:120px;
width:100px;
text-align:left;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.right{
margin-left:10px;
float:left;
text-align:left;
}
I want to build a box with CSS3. The dimension shall be given in percentage. How do I calculate the right values for the position and dimension for the parts of the box that have a skew of 45deg. Somehow the parts do not fit together, the parts overlap, are to short or too long.
jsFiddle
HTML
<div class="wrap">
<div class="back"></div>
<div class="front"></div>
</div>
CSS
.wrap {
margin:100px;
width: 400px;
height:1600px;
position: relative;
}
.back {
position: absolute;
left:0%;
width: 100%;
height: 100%;
background: red;
}
.back:before {
content:"";
position: absolute;
width:25%;
height:100%;
left:-24%;
top: 3%;
background:black;
transform: skew(0, -45deg);
}
.back:after {
content:"";
position: absolute;
width:100%;
height:6%;
left:-12%;
top: 0%;
background:rgba(111, 111, 255, 0.6);
transform: skew(-45deg);
}
You mean something like this?
http://jsfiddle.net/ZqpZ7/7/
.back:before{
content:"";
position: absolute;
width:25%;
height:100%;
left:-25%;
top: 2%;
margin-top:18px;
background:black;
-webkit-transform: skew(0,-45deg);
-moz-transform: skew(0,-45deg);
-o-transform: skew(0,-45deg);
-ms-transform: skew(0,-45deg);
transform: skew(0,-45deg);
}
.back:after{
z-index:10;
content:"";
position: absolute;
width:101%;
height:6%;
left:-12%;
top: 0%;
background:rgba(111,111,255,0.6);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
}
.right{
position: absolute;
right:0%;
width: 100%;
height: 100%;
background: red;
}
.right:before{
content:"";
position: absolute;
width:25%;
height:100%;
right:0%;
top: 3%;
margin-top: 2px;
background:black;
-webkit-transform: skew(0,-45deg);
-moz-transform: skew(0,-45deg);
-o-transform: skew(0,-45deg);
-ms-transform: skew(0,-45deg);
transform: skew(0,-45deg);
}
demo
Demo html
<div class="controller">
<div>Special Offer</div>
</div>
Demo css
.controller{
width: 55px;
height: 216px;
background: #000;
border-radius: 0 19px 19px 0;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.controller div{
transform: rotate(90deg);
}
I could use white-space: nowrap; to .controller div it will increase the width of that controller and if I have long text this will have in one line. But I want this multiline but fully heighty as this.
Ok,what about THIS
.controller{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 55px ! important;
height: 215px;
background: #000;
border-radius: 0 19px 19px 0;
text-align: center;
vertical-align: middle;
display: block;
float:left;
position:relative;
margin-right: 10px;
}
.controller div{
position: relative;
top: 90px;
left: -70px;
width: 190px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}