I am trying to add a rotated Y axis title (SPEED (MPH)) to my chart. It simple doesn't align to where I want which is to the far left as pointed out in the image. Have tried to mess with positions and margins. I either ends up shifting the chart canvas below the label or the chart canvas moves out of the blue box. Also using Bootstrap grid system in this instance. Any advice please. Thanks.
<! -- html -->
<div class="col-sm-4">
<div class="k-livestat_box">
<h3>Speed Status</h3>
<hr>
<div class="radar-chart-sz">
<!--Line Speed Chart -->
<label class="ylabel">Speed ( mph )</label>
<canvas id="lineChart"></canvas>
</div>
<h4 id="currentspeed">Current Speed ( mph ): 100</h4>
<h4 id="topspeed">Highest Speed ( mph ): 100</h4>
<h4 id="lowspeed">Lowest Speed ( mph ): 100</h4>
<h4 id="avgspeed">Average Speed ( mph ): 100</h4>
</div>
</div>
..
/*CSS*/
.ylabel {
float: left;
position: absolute;
margin-top: 60px;
text-align: center;
/* Rotate div */
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
.radar-chart-sz{
padding-left: 0 !important;
margin-top: 20px;
}
.k-livestat_box {
margin: 15px 2.5px;
padding: 25px;
min-height: 458px;
max-width: 100%;
background-color: #1A284B;
color: #C3CF01;
border: 1px solid #162444;
}
Just add in a transform-origin and then a translate for adjusting
...
transform-origin: 0% 50%;
transform: rotate(270deg) translate(-25%, -50%);
}
Fiddle - http://jsfiddle.net/kyt3Lmyc/
Related
I am expecting some thing like the below pic. But I want to add text on that vertical border.
on that border I want to add text ex: Student detail
I already saw this link.
And also I tried this below code to rotate: -90 degree
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(-90deg);
It is working fine. But I want to merge those 5 points with that vertical text.
How to achieve it?. I am new to css
I think you want to do something like that >
https://codepen.io/dakata911/pen/NweMpy
/* Rotate div */
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
Not exactly a pure CSS solution, but it's pretty easy to get vertical text by adding line breaks, and then using pre spacing. Second example uses a bit of JS to avoid hardcoding the line breaks into the markup.
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>V
e
r
t
i
c
a
l
T
e
x
t
</h2>
const h2 = document.querySelector('h2')
h2.innerText = h2.innerText
.split('')
.join('\n')
h2 {
white-space: pre;
text-align: center;
width: 40px;
background: grey;
color: white;
padding: 10px;
}
<h2>Vertical Text</h2>
<div class="parentContainer">
<a href="#" class="itemContainer">
<div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
<div class="title">Title</div>
</a>
</div>
check this link- https://codepen.io/aby30/pen/mqOMom
Here's a Pen that shows how transform:translate along with overflow:hidden is rendered differently on Chrome and Safari (open the link in both browsers and hover over image to see the difference). But when I take a different approach and use positioning (left negative to 30px) for movement instead of transform of the image I get the desired result in Safari along with other browsers.
I'm not able to get my head around this unusual behaviour.
Difference: In Safari when using translate property, then on hover of the image it translates toward right with full square image appearing only while the translation is happening. This is not expected as the parent(.imgContainer) of the image has overflow property as hidden so the edges of the image should not appear at any time.
This is just a bug, and as with all bugs of this nature the fix seems to be as simple as applying any 3d css property to the flickering element.
For example:
.imgContainer {
-webkit-transform: translateZ(0);
...
This is a common issue with Safari.
To solve this use border-radius ( the same one ) on the .image or img as well.
Then you should use vendor prefix for safari -webkit-transform ; -webkit-translate and so on.
Also you could 'force' graphic/hardware acceleration by using a 3d transform with value 0. This way, you ' trick ' the browser to think that there is a complex 3d animation so it allocates more resources.
see snippet below
a* {
color: #333;
}
.parentContainer {
width: 200px;
text-align: center;
}
.imgContainer {
background-color: #fff;
border-radius: 53%;
width: 130px;
height: 130px;
margin: 0px auto 18px;
overflow: hidden;
}
.itemContainer {
display: block;
transition: all 0.3s ease;
}
.image {
display: block;
position: relative;
-webkit-transition: all 0.3s ease;
-webkit-transform: translate(-30px, 0px) translateZ(0);
/* left: -30px; */
bottom: -10px;
border-radius: 53%;
width: 100%;
height: 100%;
}
.imgContainer:hover > .image {
/* left: 0px; */
-webkit-transform: translate(0px, 0) translateZ(0);
}
<div class="parentContainer">
<a href="#" class="itemContainer">
<div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
<div class="title">Title</div>
</a>
</div>
I am facing a problem in adding a box shadow to the right border of a polygon shape just like the image below:
and I want to add shadow where the red line is as you can see it in the image below:
and I made this shape simple by this:
HTML:
<div class="shape">
....
</div>
CSS:
.shape {
background: url(img/1.jpg);
border-top: 400px solid transparent;
border-right: 40px solid #ffffff;
}
I did not used clip-path, since it is not compatible with IE and you have to do some extra settings to make it work on Firefox and some other browsers and I wanted to keep it simple so I went with the easy way. But the problem i am facing is to add shadow to the right corner only using CSS. Is there any solution for that? or I will have to use clip-path in order to add shadow to right corner?
If you can afford that the image is slightly rotated... (4 degrees)
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:35px;
}
.rightDiagonal img{
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
margin:-15px;
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
<div class="rightDiagonal">
<img src="http://placehold.it/100x180/0ba">
</div>
otherwise...
if not, than you'll need an additional layer (<div>) of complexity, where the most outer div is the wrapper, the inner div has the shadow and is at 4deg degrees and than the inner image if restored to 0 using -4deg
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:15px;
}
.rightDiagonal div {
display:inline-block;
overflow:hidden;
margin: -15px 0 -15px -15px;
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
.rightDiagonal img{
margin-right: -15px;
transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
}
<div class="rightDiagonal">
<div><img src="http://placehold.it/100x180/0ba"></div>
</div>
<div class="rightDiagonal">
<div><img src="http://placehold.it/170x200/a0b"></div>
</div>
Try this CSS:
#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
background: url(img/1.jpg);
border-top: 400px solid transparent;
border-right: 40px solid #ffffff;
}
Basically I'm trying to create this flipping effect that I found on this site
You can see the effect on the main title and subtitle when clicking on the far right arrow (to see the arrow hover over at the far right of the colored section) which makes the titles flip up.
I don't really know how to do this effect so I found an example on the web, but the problem is that it has the hover state to it and I can't get my head around how to make it auto start on page load instead of hovering. As you can see on this example the flip sides A and B are both colored, I wish to start from A side being background white and text in white then flip it into to the colored version, so with other words from invisible to visible.
Check my working Demo here
The code for this example is the following:
/* Set-up */
body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}
/* The two faces of the cube */
.flippety,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
height: 100px;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
<div class="cube">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
My goal:
Is to create a flipping cube that flips my title up automatically (no hover) on page load.
If something is not clear please let me know and I will try to explain as clear as possible. Thank you!
In the example you give, there are no 3d transforms for the title flip. It is a simple 2D translation on the Y axis like this one:
div{
position:relative;
font-size:2em;
line-height:1.2em;
height:1.2em;
overflow:hidden;
}
h2{
font-size:1em;
margin:0; padding:0;
animation:slide .5s .5s ease-out forwards;
}
#keyframes slide {
to {transform:translateY(-1.2em);
}
<div id="titles">
<h2>this is title one</h2>
<h2>This is a second title</h2>
</div>
I'm not sure what you are trying to accomplish but if you only want it to flip once when the page is ready you can change the css class ".cube:hover" to ".cubeRotate" and then use jQuery to rotate it on page load like this:
$( document ).ready(function() {
$(".cube").addClass("cubeRotate");
});
You can see it here: https://jsfiddle.net/qro8euyo/ working with 2 seconds delay (otherwise it will be too fast for the user to catch it)
I am trying to create a div to align with the bottom corner of a form input but with a triangular arrow pointing to the corner and merged into the box. I am having problems creating this as i am not a designer. Basically what i'm looking for is a kind of arrow that merges with the box (maybe like a speech bubble)
Anyway code so far:
html:
<div class="inputwrap">
<select id="gb_contact" name="gb_contact" class="dropdown-input" >
<option value="option">option</option>
</select>
<div class="tip">rrrrrrrrrrr</div>
</div>
css
.inputwrap{
position: relative;
display: inline-block;
min-width: 10%;
}
.tip:before {
position: absolute;
content: " ";
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #00FF00 transparent transparent transparent;
z-index: 100;
left: -0px;
top: -2px;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}
.tip {
position: absolute;
right: -190px;
background-color:#ff0000;
min-width:200px;
min-height: 50px;
margin-top:2px;
border-radius:5px;
}
can anyone help with this?
jsfiddle: http://jsfiddle.net/d30top88/
link to concept:
https://drive.google.com/file/d/0B9ZIIks7bG2QT2haMWZZcXM3ZWc/edit?usp=sharing
close enough i suppose :
http://jsfiddle.net/d30top88/4/
What do you mean with merged inside the box? Just adjusted your fiddle like that:
Arrow Demo
with some adjustments:
top: 12px;
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);
So it the arrow is now pointed to the right and down in the div.
Update after image link was provided in question:
Arrow Demo 2
But based on the image maybe the arrow has not the appropriate shape to meet your requirements. There are some nice css arrow generators online, just google for "css arrow generator" as I don't want to promote a special one.