The main issue is the following. All images are showing as broken links in FireFox and they are fine in other browsers like Safari, Opera and Chrome.
Then I contacted the support they said it is known issue with CSS when it comes to FireFox.
Here is my CSS code
<head>
<title>My Booklet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
}
.gwd-table-5il4 {
background-image: none;
-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
}
.gwd-tr-qiqz {
background-image: none;
}
.fadein { position:relative; height:335px; width:223px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 700);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first- child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
Appreciate any help on this.
I have added some additional script that I am using. the rest of the HTML file is sort of basic html tag for tables, images, and URLs.
Regards,
-webkit is a prefix for Chrome and Safari, it has no effects on Firefox. Firefox one is -moz
Try to add -moz prefixes like :
/* Chrome and Safari */
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
/* Firefox */
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
/* Other */
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
Edit: Add no prefixed properties as Volvox pointed out
For firefox
Add properties with -moz too
-webkit is only for chrome and safari
for example
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
webkit is for google chrome and safari, firefox don't understand this. It use -moz....
like -moz-border-radius
You have to check if firefox can support these functionality.
The first-child has a space in it. Otherwise it works
Old
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first- child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
New
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
http://jsfiddle.net/nZFnS/
Related
I have a container with a gradient mask adding transparency to the top of the view as follows :
.container{
position: fixed;
top: 0;
height: 100vh;
overflow: scroll;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
Is there any way in css to apply this 3d transform only to the top part of the container? Maybe with a 3D matrix?
transform: perspective(1000px) rotateX(10deg);
The objectif being to give a little star wars opening credits style to the fade-out, but only to the topmost part of the view.
Thanks for the help :)
This question already has answers here:
CSS animation triggered through JS only plays every other click
(2 answers)
Closed 2 years ago.
How can I re-attach the following animation?
So that every time the text is been clicked, the animation will be activated?
Currently, if I click the text, for the first time the animation will be activated, but no longer when clicking again.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.shakeit {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
</style>
</head>
<body>
<h2 id='xxx' class="">JavaScript Numbers</h2>
<script>
const x = document.getElementById('xxx');
x.addEventListener('click', () => {
x.classList.add("shakeit");
});
</script>
</body>
</html>
You can use the onanimationend event to remove the class again after its finished.
<!DOCTYPE html>
<html>
<head>
<style>
.shakeit {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
</style>
</head>
<body>
<h2 id='xxx' class="">JavaScript Numbers</h2>
<script>
const x = document.getElementById('xxx');
x.addEventListener('click', () => {
x.classList.add("shakeit");
});
x.onanimationstart = function(event) {
console.log("Animation started", event);
}
x.onanimationend = function(event) {
x.classList.remove("shakeit");
};
</script>
</body>
</html>
Hello friends i try to make gradient effect photo on the cover. but link is not working.
When you click on the picture i want to be redirected to another page.
This is my demo JSFiddle
HTML CODE:
<div class="container">
<img src="http://lorempixel.com/1920/480/">
</div>
CSS CODE:
body {
background: #000;
}
.container {
max-width: 1920px;
background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
}
img {
max-width: 100%;
position: relative;
z-index: -1;
}
Wrap the link around the container:
<a href="www.facebook.com"><div class="container">
<img src="http://lorempixel.com/1920/480/" />
</div></a>
Working Fiddle
Another solution is to change the image's z-index to a positive number:
img {
max-width: 100%;
position: relative;
z-index: 1;
}
Having some problems with adding a different color to my transparency. Previously it was a black fill on top of the image, so when I hover my image to it, the shade would light open. However, when I tried adding a red rgba color to it, the transparency remains the same color.
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
color: rgba(255, 0, 0, 0.2);
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
color: rgba(255, 0, 0, 0.2);
}
You need to change your colorproperty to background-color.
CSS
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2);
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
background-color: rgba(255, 0, 0, 0.2) !important;
}
JSFIDDLE
have tool for help me plot 3D transform matrix from image
to html 5 canvas like this
max-width: intrinsic;
-moz-transform: matrix(1, 0, 0.6, 1.5, 15em, 0);
-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);