I've created a gradient which goes from transparent to white using this CSS:
linear-gradient(to right, transparent, white)
Also see: http://jsfiddle.net/fs8gpha2/
This is all working fine in Chrome, but in both Safari and Firefox the center of the gradient is grey. Is there any way to work around this?
Thanks!
Try like this:
body {
background: #000;
}
div {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
width: 100%;
height: 100px;
}
Here is the Demo
This is would be a cross-browser solution (I updated the jsfiddle):
http://jsfiddle.net/fs8gpha2/4/
div {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background-color: rgba(255, 255, 255, 0); width:100%; height:100px; }
Cheers
Related
I'm trying to create a sort of pie chart using CSS conic-gradients. I want each the transitions between wedges to be hard, rather than soft.
In pie1, below, the transitions are hard, but adding an extra wedge (as in pie2), makes all of the transitions soft.
Could anyone tell me why? And how to avoid this?
(I'm using Chrome 80 btw).
.pie1 {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;
background: conic-gradient(
#FF6666 11%,
#FF8080 11%, #FF8080 15%,
rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%,
#FF9933 20%, #FF9933 27%,
#FFB366 27%, #FFB366 31%,
rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 35%,
#996600 35%, #996600 42%,
rgba(255, 255, 255, 0) 42%);
}
.pie2 {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;
background: conic-gradient(
#FF6666 11%,
#FF8080 11%, #FF8080 15%,
rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 20%,
#FF9933 20%, #FF9933 27%,
#FFB366 27%, #FFB366 31%,
rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 35%,
#996600 35%, #996600 42%,
#FFC34D 42%, #FFC34D 47%,
rgba(255, 255, 255, 0) 47%)
}
<div class="pie1"></div>
<div class="pie2"></div>
I'm new to javascript. I have created a div with shining effect (original code https://patrickdesjardins.com/blog/css3-shining-animation-for-html-element). Animation is set on the background position of of background image that is created by linear gradient from transparent to white to transparent which makes it look like shiny. So, I added javascript onmouseover event on div which will set the animation to div element. It works but only once. It stops working when mouse passes over div second time. Why is that? What should I do to make it work repeatedly?
Here's the css code:
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.5) 37%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.0) 48%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.8) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-450px -450px;
background-size: 2000px 2000px;
}
to {
background-repeat:no-repeat;
background-position:450px 450px;
}
div
{
background-color:#990000;
padding:50px;
margin:10px;
}
Here's the html:
<div id="shine-me" onmousemove="myfunction()">
Here's the javascript:
function myfunction()
{
document.getElementById("shine-me").style.animationName = "ShineAnimation";
document.getElementById("shine-me").style.animationDuration = "4s";
}
You don't need javascript at all for that. Instead, just define the animation in the div's hover state:
div:hover {
animation-name:ShineAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Or, using the shorthand:
div:hover {
animation: 4s infinite alternate ShineAnimation;
}
I think your animation is not working quite right, but that's a separate issue. Also you were missing a closing bracket after the keyframes definition. That may have been just a bad copy-paste?
CSS animation documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.5) 37%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.0) 48%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.8) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-450px -450px;
background-size: 2000px 2000px;
}
to {
background-repeat:no-repeat;
background-position:450px 450px;
}
}
div {
background-color:#990000;
padding:50px;
margin:10px;
}
div:hover {
animation: 4s infinite alternate ShineAnimation;
}
<div id="shine-me">
If you want using javascript, you have to remove the animation also. In my example i choosed a class instead of style. On hover i add the animation class and on mouseout i remove it again.
const shineMe = document.getElementById('shine-me');
function addAnimation() {
shineMe.classList.add('animation')
}
function removeAnimation() {
shineMe.classList.remove('animation')
}
shineMe.addEventListener('mouseover', addAnimation);
shineMe.addEventListener('mouseout', removeAnimation);
#-webkit-keyframes ShineAnimation {
from {
background-repeat: no-repeat;
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.5) 37%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.8) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%);
background-position: -450px -450px;
background-size: 2000px 2000px; }
to {
background-repeat: no-repeat;
background-position: 450px 450px; } }
div {
background-color: #990000;
padding: 50px;
margin: 10px; }
.animation {
-webkit-animation-name: ShineAnimation;
animation-name: ShineAnimation;
-webkit-animation-duration: 4s;
animation-duration: 4s; }
<div id="shine-me"></div>
I have this code:
function startAnimation() {
$(".block").addClass("removed");
}
.block {
width: 200px;
height: 200px;
border: 1px solid #444;
background-color: #000;
position: relative;
}
.block:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.2) 20px);
}
.block.removed:after {
animation: lock_removed 1s forwards;
}
#keyframes lock_removed {
5% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(255, 255, 255, 0.2) 11px, rgba(255, 255, 255, 0.2) 20px);
}
10% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255, 255, 255, 0.2) 12px, rgba(255, 255, 255, 0.2) 20px);
}
15% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(255, 255, 255, 0.2) 13px, rgba(255, 255, 255, 0.2) 20px);
}
20% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, 0.2) 14px, rgba(255, 255, 255, 0.2) 20px);
}
25% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255, 255, 255, 0.2) 15px, rgba(255, 255, 255, 0.2) 20px);
}
30% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255, 255, 255, 0.2) 16px, rgba(255, 255, 255, 0.2) 20px);
}
35% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 17px, rgba(255, 255, 255, 0.2) 17px, rgba(255, 255, 255, 0.2) 20px);
}
40% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255, 255, 255, 0.2) 18px, rgba(255, 255, 255, 0.2) 20px);
}
45% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 19px, rgba(255, 255, 255, 0.2) 19px, rgba(255, 255, 255, 0.2) 20px);
}
50% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.2) 20px, rgba(255, 255, 255, 0.2) 20px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>
<input type="button" value="Start Animation" onClick="startAnimation()"/>
Thing is, after clicking the button, the animation runs but doesn't stop at 100%, but reverts back to the previous state (with crossing lines) although I use forwards in the animation-fill-mode...
Any idea on why it behaves like this?
Thanks!
It's because your animation hasn't 100% finished.
Change your last line to:
100% {
background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.2) 20px, rgba(255, 255, 255, 0.2) 20px);
}
I want to make the background transparent in white color such that half overlap image on background should match the white color:
Here is my code but doesn't works fine for me
background1 {
opacity:0.8;
filter:alpha(opacity=80);
}
Try this
div{
position:relative;
display:inline-block
}
span{
background: rgba(255,255,255,0.60);
width:100%;
position:absolute;
bottom:5px;
color:red;
padding:5px
}
DEMO
Use this works fine for me...
background1 {
background-color: rgba(0, 0, 0, 0);
background-image: none, linear-gradient(to top, rgba(255, 255, 255, 0.75) 0px, rgba(255, 255, 255, 0.8) 10px, rgba(255, 255, 255, 0.86) 20px, rgba(255, 255, 255, 0.9) 30px, rgba(255, 255, 255, 0.94) 40px, rgba(255, 255, 255, 0.98) 50px, rgba(255, 255, 255, 0.99) 60px, #FFFFFF 70px);
background-repeat: repeat;
}
Since this code works with the -moz vendor prefix I thought it would work a well with -webkit or -ms for instance, but it doesn't seem to allow it:
background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
I guess Mozilla is allowing something that shouldn't be used, but my research has been infructuous as of now...
Any idea?
Remove the center. Then it should work.
Also make sure you have it for all browsers:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
Example Fiddle
There's a new syntax for linear gradients where the first keyword is like (to bottom, etc).
Example:
http://jsfiddle.net/H8Byj/
div {
background-image: linear-gradient(to bottom , rgba(0, 255, 255, 1) 0%, rgba(255, 0, 255, 1) 75%, rgba(255, 255, 0, 1) 100%);
}
I didn't know the old syntax with prefix was still active in Firefox but the new one appeared circa Fx10-Fx15 according to Resources found at Caniuse.
ColorZilla CSS Gradient Generator will give you all the declarations needed for retro and multibrowser compatibility.