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);
}
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'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
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;
}
I have the following element with background:
and I want to set to it opacity changing from 0 to 1 for example. Is it possible to make this only with CSS?
This is how I am making the background:
padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;
Is this what you are trying to do? fiddle
<button class="button">
<span></span>
</button>
.button {
padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;
width:400px;
height:100px;
}
span {
background: linear-gradient(to left, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 80%);
left:0;
top:8px;
width:400px;
height:100px;
position:absolute;
margin:0;
padding: 0;
}
You can use CSS3 transitions.
.button {
padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;
opacity:1;
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
.button:hover {
opacity:0;
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
You can replace .button:hover with another definition for the same effect. See this fiddle.
here is how you do it:::
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Hey there I'm struggling with creating multiple colour background with CSS. I tried gradient but it makes shades which I doesn't want. I want to create this with CSS:
Does anyone know how to create this without getting shades that I got when I used gradient.
Here is my html code.
<div id="head">
<h1>Mira's place</h1><br>
<h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
<ul>
<li>Home</li>
<li>Games</li>
<li>Applications</li>
<li>Contact</li>
</ul>
</div>
Try it again with gradients, but with this code:
#head /* or body */
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
BTW: I got this code from www.red-team-design.com. Here is the link.
Don't know, what you mean with shades. Does the following not look like you wanted to? (Some modifications may be needed, but it shows the way to go)
background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);
Here is the Fiddle.
.element{
border-bottom: 25px solid #2C58DF;
border-top: 25px solid #D71E26;
height: 25px;
width: 150px;
-webkit-transform-origin: top left;
-webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
-moz-transform-origin: top left;
-moz-transform: translateX(165px) translateY(55px) rotate(135deg);
transform: translateX(165px) translateY(55px) rotate(135deg);
transform-origin: left top 0;
}
http://jsfiddle.net/etW25/