This may seem like a repeat question and im sorry but i cannot fix this and its driving me mad. its probably something so simple too.
I have a hidden menu that appears on rollover of another div although it is behaving very funny. when i rollover the menu appears but it does not appear correctly. i have attached a fiddle and images of how it appears on my machine and how i would like it to appear.
/** Layout */
.ts-layout {
}
.ts-header {
width: 100%;
height: 74px;
border-bottom: 1px solid #000;
position: fixed;
display: inline-block;
z-index: 999;
background-color: #fff;
}
.ts-menu-activator {
width: 25px;
height: 100%;
background-color: #2E2E2E;
color: #fff;
position: fixed;
display: inline-block;
padding-top: 75px;
border-left: 1px solid #fff;
transition: 1s;
transform: translateX(0);
}
.ts-menu-activator:hover {
transition: 1s;
transform: translateX(150px);
}
.ts-menu-activator:hover + .ts-menu-area {
transition: 1s;
transform: translateX(0);
}
.ts-menu-area {
height: 100%;
width: 150px;
background-color: #2E2E2E;
color: #fff;
position: fixed;
transform: translate(-150px);
transition: 1s;
}
.ts-view {
width: 100%;
height: 100%;
padding-left: 25px;
padding-top: 75px;
}
/** Styling helpers */
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vertical-text {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div class="ts-layout" ng-controller="app.views.layout.header as vm">
<div class="ts-header">
<div class="row">
<div class="col-sm-6">Login Information</div>
<div class="col-sm-6">Controls</div>
</div>
</div>
<div class="ts-menu-activator">
<span class="vertical-text">TESTING</span>
</div>
<div class="ts-menu-area">
<i class="fa fa-home"></i>
Home
</div>
<div class="ts-view">
<div class="container">
<div class="angular-animation-container row">
<div class="shuffle-animation col-xs-12" ui-view></div>
</div>
</div>
</div>
</div>
Any help or suggestions is appreciated :)
also if anyone could tell me why my text is not displaying vertically that'd be great :)
Just change the <span> tag to a <p> tag see fiddle https://jsfiddle.net/DIRTY_SMITH/cvrhxm7p/12/
<div class="ts-menu-activator">
<p class="vertical-text">TESTING</p>
</div>
Related
I've been trying to solve a sideways header problem. I intend on creating a globally sideways header like so on a website: sideways header
However, my problem arises trying to separate the type (it's also breaking on 2 lines). I can't seem to make the vertical line contained or centered within the rectangle . When I resize my browser window it does not stay contained within the rectangle box. I would GREATLY appreciate any suggestions and advice!
What I have so far:
.box {
height: 1326px;
width: 112px;
background-color: transparent;
border: 1px solid #f9f0e4;
}
.bottom {
text-align: center;
color: #000000;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.top {
text-align: center;
color: #000000;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.vl {
border-left: 1px solid #f9f0e4;
height: 620px;
position: absolute;
left: 50%;
top: 0;
}
<div class="container">
<div class="box">
<p class="bottom">CREATIVE STUDIO</p>
<div class="vl">
<p class="top">FLORENCE — ITALY</p>
</div>
</div>
</div>
You can instead consider rotation on the whole box and use vh unit so the width is relative to height since it's getting rotated :
.box {
background-color: transparent;
width: 80vh;
border: 1px solid;
transform: rotate(-90deg) translate(-50%, 0);
transform-origin: center;
}
.box {
display: flex;
justify-content: space-between;
text-align: center;
color: #000000;
}
.bottom {
text-align: center;
color: #000000;
margin-left: 10px;
}
.top {
text-align: center;
color: #000000;
margin-right: 10px;
}
<div class="box">
<p class="bottom">CREATIVE STUDIO</p>
<p class="top">FLORENCE — ITALY</p>
</div>
Perspective animation
I was playing around with the css perspective() animation. However, when testing it in Chrome and Opera, I came across some weird behavior.
Chrome and Opera are acting very weird when repeatedly hovering fast over the animation. The animation gets triggered on :hover. Perhaps this is causing the behavior? How can i stop Chrome and Opera having this behavior.
Fiddle
I reproduced the problem within a fiddle. Just do like the red dot is showing.
body {
text-align: center;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 0 auto;
border: 2px solid red;
}
.perspective {
background: blue;
height: 200px;
width: 200px;
transition: transform .33s;
}
.perspective:hover {
transform: perspective( 800px ) rotateY(15deg);
}
.perspective p {
margin: 0;
color: #fff;
text-align: center;
line-height: 200px;
}
.mouse-helper {
position: absolute;
height: 90px;
width: 15px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.mouse-helper .animated {
background: red;
position: absolute;
bottom: 0px;
height: 15px;
width: 15px;
border-radius: 50%;
animation: up-down .29s infinite;
}
#keyframes up-down {
0% {bottom: 0;top: calc(100% - 15px);}
50% {top: 0;bottom: calc(100% - 15px);}
100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
<div style="overflow: hidden;">
<div class="perspective">
<p>TEXT</p>
</div>
</div>
<div class="mouse-helper">
<div class="animated"></div>
</div>
</div>
My guess, but it's only a guess, is that this is related to the response in this issue thread, where some transforms are hardware accelerated and some are not, and that can cause things to get out of sync briefly.
If you explicitly add transform: perspective(0px) rotateY(0deg); to your (non-hovered) .perspective, it doesn't happen:
body {
text-align: center;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 0 auto;
border: 2px solid red;
}
.perspective {
background: blue;
height: 200px;
width: 200px;
transition: transform .33s;
transform: perspective(0px) rotateY(0deg);
}
.perspective:hover {
transform: perspective( 800px ) rotateY(15deg);
}
.perspective p {
margin: 0;
color: #fff;
text-align: center;
line-height: 200px;
}
.mouse-helper {
position: absolute;
height: 90px;
width: 15px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.mouse-helper .animated {
background: red;
position: absolute;
bottom: 0px;
height: 15px;
width: 15px;
border-radius: 50%;
animation: up-down .29s infinite;
}
#keyframes up-down {
0% {bottom: 0;top: calc(100% - 15px);}
50% {top: 0;bottom: calc(100% - 15px);}
100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
<div style="overflow: hidden;">
<div class="perspective">
<p>TEXT</p>
</div>
</div>
<div class="mouse-helper">
<div class="animated"></div>
</div>
</div>
So there's your fix; as to the "why?", once again a guess: The Chromium issue linked above has this from a Chromium dev:
Alternatively we may be able to pull transform animations back to the main thread in this case.
We already do this (at least in M33) for animations where keyframes reference both accelerated and non-accelerated properties:
Maybe the same is now true for transitions (the issue is from 2014), but because the non-hover state does not have any transforms, this logic won't be triggered in your case.
I have a tooltip to show my search when hovering over an icon. That works fine in itself.
My problem is, that this icon is inside an inline-block navigation and cause it acts as the parent of my tooltip it has to have the large width of it which messes up my layout.So if I don't extend the width of my parent with the Icon the Tooltip messes up due to the small width of ~30px of it's parent.
If I extend the width from my parent to 300px (The size of my tooltip), it messes up my layout.
I need a way of relieving the tooltip itself from the inside of the element with the Icon.
HTML Structure:
<div id="search">
<div class="wrapper">
<div class="popper inline">
<i class="fa fa-tags" />
<div class="tooltip">
<form>
<input placeholder="Search Tags" autocomplete="off" />
<button type="submit">
<a class="btn">
<i class="fa fa-search" />
</a>
</button>
</form>
</div>
<div class="inline">
<form>
<input placeholder="Search Tags" autocomplete="off" autofocus="true" />
<button type="submit">
<a class="btn">
<i class="fa fa-search" />
</a>
</button>
</form>
</div>
</div>
</div>
CSS (Scss):
#search {
background: $secondary;
padding: .25rem;
div.popper {
background: transparent;
border: none;
font-size: .8rem;
color: $highlight;
}
.inline form {
button, input, a {
background: transparent;
border: none;
font-size: .8rem;
color: $highlight;
}
input[type="Search"] {
width: 1368px;
outline: none;
font-style: italic;
font-size: .7rem;
padding: 1rem .5rem;
}
button {
margin-left: 1rem;
}
}
}
.popper {
position: relative;
width: 300px;
}
.popper .tooltip {
background: $secondary;
bottom: 100%;
color: $highlight;
display: block;
left: -25px;
margin-bottom: 20px;
opacity: 0;
padding: .8rem;
pointer-events: none;
position: absolute;
width: 300px;
max-width: 90%;
border-radius: 3px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.popper .tooltip:after {
border-left: solid transparent 7px;
border-right: solid transparent 7px;
border-top: solid $secondary 7px;
bottom: -7px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.popper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
I am grateful for all Your help! If you need further information, comment please.
I have a responsive text box with a label that shifts up on a focus and if text box has input. I am trying to add an image to the right side of the text box that is aligned middle with the text box input. But the image is shifted down.
HTML:
<div style="margin-top: 20px">
<input class="responsiveTextBox" type="text" id="clientName" required="required" />
<img src="https://s31.postimg.org/6bym9bjnf/reset.png" class="resetImage">
<label class="responsiveLabel" id="lblClientName" for="clientName">Client Name</label>
<div class="bar"></div>
</div>
CSS:
.responsiveTextBox{
outline: none;
z-index: 1;
position: relative;
background: none;
width: 100%;
height: 60px;
border: 0;
color: black;
font-size: 16px;
font-weight: 400;
}
.responsiveLabel {
position: absolute;
top: 0;
left: 0;
color: #757575;
font-size: 20px;
font-weight: 300;
line-height: 60px;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.responsiveTextBox:focus ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.responsiveTextBox.hasValue ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.responsiveTextBox:valid ~label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.bar{
position: absolute;
left: 0;
/*bottom: 0;*/
background: #757575;
width: 100%;
height: 1px;
}
.resetImage{
float: right;
vertical-align: middle;
}
JSFIDDLE
Any suggestion how to resolve this issue?
Your input width is 100%, you need to reduce it and remove the float property from the img for vertical-align: middle to works
.responsiveTextBox{
width: 95%;
}
.resetImage {
vertical-align: middle;
}
Fiddle
I have nested link in two absolute div's like this:
<div class="container">
<div class="leftPostHolder">
<div class="leftPost">
<h3>link</h3>
</div>
</div>
</div>
First div(leftPostHolder) has black background, second one(leftPost) has red and when second div is hovered opacity of it is set to 0.5 and link background is set to white. Now I want that link to be above these two div's so that darken effect is not applied to it but just to second div with red background. Link with it's background should not be overlayed with that darken effect with opacity.
How to set link above those two elements? I tried with z-index and positioning that link but without success.
Full code is here: http://jsfiddle.net/v21t290a/
This is not a z-index issue.
Your a-tag is a child of leftPost which means it will inherit the opacity. Changing the Z-index will not change this.
The solution to your issue would be to either move the a-element so it's not a direct child of leftPost
or
Put the Opacity on an element that is not the parent of your link.
EXAMPLE:
$(".leftPost").hover(function() {
$(".leftPost a").toggleClass("aHover");
});
.container {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
.leftPostHolder {
background-color: #000;
position: absolute;
width: 30%;
height: 100px;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.leftPost {
width: 100%;
position: absolute;
background-position: center;
background-size: cover;
height: 100%;
-webkit-transition-duration: .2s;
transition-duration: .2s;
display: table;
z-index: 2;
}
.leftPost:hover{
transform: scale(1.05);
-ms-transform: scale(1.05);
-mos-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform-origin: top center;
-ms-transform-origin: center;
-mos-transform-origin: center;
-webkit-transform-origin: center;
}
.opacityDiv {
width: 100%;
position: absolute;
background-position: center;
background-size: cover;
height: 100%;
-webkit-transition-duration: .2s;
transition-duration: .2s;
display: table;
z-index: 1;
}
.leftPost:hover + .opacityDiv {
opacity: 0.5;
}
.leftPost h3 {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.leftPost a{
color: transparent;
text-align: center;
padding:10px;
display:block;
}
.aHover {
color: #454545!important;
transform: rotate(-2deg);
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="leftPostHolder">
<div class="leftPost">
<h3>link</h3>
</div>
<div class="opacityDiv"></div>
</div>
</div>