So I am trying to add a perspective transform on an element but it is cutting off the text in Safari. If you open the following CodePen in Chrome it displays normally, but in Safari the white text is cut off. I have searched other questions but none seemed to solve my problem.
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
http://codepen.io/anon/pen/aOaNNX
I was facing the same problem today. I fixed the problem setting a transform: translateZ(10px); property to the text that was being cut. Change the value to something that makes sense to you.
.field--name-residential-status {
height: 70px;
width: 100px;
position: relative;
}
.property-status {
display: inline-block;
color: white;
letter-spacing: 0.09375em;
padding: 1.2em 2em;
position: relative;
z-index: 1000;
padding-top: 1em;
text-transform: uppercase;
}
.property-status span {
position: absolute;
z-index: 5000;
-webkit-transform: translateZ(5000px);
}
.field--name-residential-status:before {
display: block;
content: "";
background-color: #2F2F2F;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2000;
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
-moz-transform: perspective(26.08696em) rotateX(-30deg);
-ms-transform: perspective(26.08696em) rotateX(-30deg);
-o-transform: perspective(26.08696em) rotateX(-30deg);
transform: perspective(26.08696em) rotateX(-30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
Related
I want to animate sprite in clockwise and then anti-clockwise continuously.
I am able to do one at a time using two different button.
How can it be done together?
This is what I tried: Codepen
body{
background: #fff;
width: 291px;
margin: 0 auto;
}
.clockwise, .anticlockwise{
color: #000;
cursor: pointer;
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.clockwise{
float: right;
color: #000;
}
.anticlockwise{
float: left;
color: #000;
}
.rotate{
background: url('http://w3bits.com/wp-content/uploads/sprite.png') 0 0 no-repeat;
width: 399px;
height: 200px;
margin: auto;
float: left;
}
.clockwise:hover ~ .rotate{
animation: rotate-clockwise 3s steps(12);
}
.auto{
margin-top: 40px;
color: #fff;
}
.auto:checked ~ .rotate{
animation: rotate-clockwise 3s steps(12);
}
.anticlockwise:hover ~ .rotate{
animation: rotate-anticlockwise 3s steps(12);
}
.auto{
display: inline-block;
margin-left: 0;
}
.auto-rotate{
color: #333;
font-weight: bold;
font-family: sans-serif;
clear: both;
}
#keyframes rotate-clockwise {
0% {background-position: 0 0; }
100% {background-position: 0 -2393px; }
}
#keyframes rotate-anticlockwise {
0% {background-position: 0 -2393px; }
100% {background-position: 0 0; }
}
<input type="checkbox" class="auto" id="auto" >
<label class="auto-rotate" for="auto">Auto ↻</label><br>
<span class="anticlockwise">← A</span>
<span class="clockwise">→ C</span>
<div class="rotate"></div>
Is it possible using only CSS.
Can I flip sprite horizontally to change the direction of cat (sprite) after clockwise and anticlockwise animation ends and then repeat the same.
Not so sure whether this helps, but can't we add all the animations on a single keyframe animation and repeat it infinitely?
I've forked your Pen here and modified it a little: https://codepen.io/mjzeus/pen/oNbGgmP
#keyframes animate-cat {
0% {
background-position: 0 -2393px;
}
20% {
background-position: 0 0;
}
40% {
background-position: 0 -2393px;
}
59% {
transform: scaleX(1);
}
60% {
transform: scaleX(-1);
}
80% {
background-position: 0 0;
transform: scaleX(-1);
}
100% {
background-position: 0 -2393px;
transform: scaleX(-1);
}
}
This is still pretty raw and can be improved a lot but I suppose you'd get the idea what I'm trying to do here. I've just merged all your animations into a single animation and played it on loop.
I hope this helps.
You can flip the cat by adding another class to the (div class="rotate")
.horizontal {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
If you want to automate the process, you would need to add and remove class after fixed time, you can achive this using some JavaScript.
Search for "addClass() Jquery"
I'm trying to use this Search Form code but I want to make it so that on Click the magnifying glass icon switches to a Search button. I haven't been able to figure it out. Any ideas?
https://codepen.io/CBeghin/pen/HeuiF
<div id="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="Rechercher" type="submit">
</form>
</div>
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
#import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
body {
background: #DDD;
font-size: 15px;
}
#wrap {
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
I've installed the express-minify middleware but for some reason it seems to cause an error whilst loading the attached css file.
I have tried validating the CSS with an online service and it doesn't give me any error.
I have tried to debug by removing all elements leaving one at the time and when I hit .mainmenu tr td:hover:not(.mainmenu_item_selected) it fails.
So removing everything from .mainmenu tr td:hover:not(.mainmenu_item_selected) to the end of the file will make it work (Obviously without all the other required styles).
I have even tried to recreate the file and also name it differently without any success.
The express logs are showing me: GET /stylesheets/gctl.css 200 4.954 ms - - meaning that the file should be served correctly.
Its a standard installation as per npm website:
var minify = require('express-minify');
app.use(minify());
File (saved as gctl.css)
In main page (Using PUG): link(rel='stylesheet' href='/stylesheets/gctl.css')
CSS file:
html, body, * {
font-family: 'Raleway', sans-serif;
margin: 0;
}
.centered {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loginform {
text-align:center;
vertical-align:middle;
width: 30%;
height: 50%;
}
.closenewitem {
cursor: pointer;
}
/* Tooltip overide settings */
div.tooltip-inner {
max-width: 500px;
}
/* Remove outlines such as in chrome */
input:focus {
outline: 0;
}
/* all input text align center*/
input, textarea, label {
text-align: center;
cursor: pointer;
font-weight: 400;
}
/* Labels for help add help class to them */
label.help:hover {
color: red;
}
/* Logo CSS */
.logo {
position: absolute;
cursor: pointer;
top: 4px;
height: 40px;
}
/* menu css */
.mainmenu {
border-right-width: 1px;
border-right-style: solid;
border-right-color: lightgray;
margin-left: -15px;
height: 100%;
width: 100%;
}
.mainmenu tr td {
padding: 10px;
}
.mainmenu tr td:hover:not(.mainmenu_item_selected) {
border-right-color: red;
border-right-style: solid;
border-right-width: 3px;
color: black;
cursor: pointer;
background-color: #f0f0f0; /*#f9eafc*/
}
/* Selected menu item */
.mainmenu_item_selected {
border-right-color: black;
border-right-style: solid;
border-right-width: 3px;
background-color: lightgray; /*#f7faff*/
font-weight: 700;
color: black;
}
.mainmenu tr td span {
padding-left: 2px;
}
/* Footer div for additions to DB*/
.footer {
overflow: scroll;
position: absolute;
bottom: 0px;
height: auto;
min-height: 50%;
padding-bottom: 20px;
background-color: #f6f6f6;
border-top-color: lightgray;
border-top-style: solid;
border-top-width: 1px;
width: 100%;
}
.fixed-button {
position: absolute;
top: 4px;
right: 4px;
}
/* Error handling CSS */
.customerror {
border-color: red;
border-width: 2px;
background-color: #ffcccf;
font-weight: bold;
}
/* Shadow only for desktop icons panel as otherwise it would appear everywhere and it's annoying! */
.dsk-panel:hover {
-webkit-box-shadow: -1px 5px 15px 0px lightgray;
-moz-box-shadow: -1px 5-webkitpx 15px 0px lightgray;
box-shadow: -1px 5px 15px 0px lightgray;
}
.desktop-icon {
width: 60px;
opacity: 0.6;
}
I'm stuck and have no clue on what is causing the problem!
If you're sure that the default behavior breaks the Bootstrap layout and there is no issue posted about it yet then you should post an issue on GitHub where this project tracks things like that.
But "breaks layout" doesn't say anything really. Does it change margins? Does it remove borders? What exactly does it break and how? So you should prepare a minimal set of CSS that this module breaks in a predictable manner instead of saying vague claims like that if you want your issue to be taken seriously.
It's entirely possible that you found a bug in this module but it's really hard to tell after an overly general claims like this.
How can i get my back to top button to stick to the side of the screen. So when i resize it, it will stay stuck to the left? Right now i have it in a container and it works well on smaller screens, but when i see it on a desktop it is in that container instead of all the way to the left of the screen.
#back-top {
position: relative;
z-index: 1000;
opacity: .7;
position: fixed;
bottom: 30px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
font-size: 8px !important;
width: 75px;
height: 75px;
display: block;
margin-bottom: 7px;
background: url(../img/weed2.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
<div id="bus"><img src="assets/img/bus.png" id="bus_inner"/></div>
<div id="parallax">
<div id="bgsun" class="depth-1"></div>
<div id="bg" class="depth-1"></div>
<div id="bag" class="depth-1"><img src="assets/img/bag.png" /></div>
</div>
#parallax { background: #5b3516; width: 17000px; height: 100%; position: relative; }
#bgsun { position: absolute; width: 17000px; top: 0; height: 100%; background: url("../img/bg_sun.jpg") no-repeat; z-index: 10; }
#bg.depth-1 { position: absolute; width: 17000px; top: 0; height: 100%; background: url("../img/bg.jpg") no-repeat; z-index: 20; }
#bus { position: fixed; top: 495px; left: 90px; z-index: 30; }
#bus_inner { position: absolute; top: 0; left: 0; z-index: 40; }
#bag {
position: absolute;
top: 55px;
left: 7320px;
z-index: 50;
}
#bag img {
position: absolute;
top: 0;
left: 0;
z-index: 60;
}
Trying to get the bus element behind the bag but no luck. fixed position doesnt work with z-index right? how would I layer these elements so the order was
bgsun
bg
bus
bag
is it to with their order in the page?