Opacity - changing from-to for background with CSS - css

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 */
}

Related

ripple animation with radial gradient

I want to create infinite ripple animation inside a rectangle. The basic idea from my side is to start animating one circle to another. But the output is quite awkward.
Below is my code --
body {
background: #454a59;
}
.ripple {
width: 400px;
height: 80px;
margin-top: 40px;
position: relative;
background-color: red;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
animation: blinds 3s linear infinite;
}
#keyframes blinds {
0% {
background-image: radial-gradient(circle, #ff8895 0 70px);
}
20% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, transparent 100px 100%);
}
40% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, transparent 125px 100%);
}
60% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, transparent 150px 100%);
}
80% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, transparent 175px 100%);
}
100% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, rgba(255, 255, 255, 0.4) 175px 200px, transparent 200px 100%);
}
}
<div class="ripple">
</div>
Also the animation is not smooth and circle will become invisible in the end.
Any help would be appreciated.
Thanks in advance.

Use multiple gradient and animate their size. Below an example where you can adjust the values until you get the result you want.
body {
background: #454a59;
}
.ripple {
width: 400px;
height: 80px;
margin-top: 40px;
position: relative;
background-color: red;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
animation: blinds 5s ease-in-out infinite;
background:
radial-gradient(#ff8895 70%,#0000 71%), /* 1 */
radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 2 */
radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%), /* 3 */
radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 4 */
radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%) /* 5 */
red;
background-position: center;
background-repeat: no-repeat;
}
#keyframes blinds {
0% {background-size: 0 0}
/* 1 , 2 , 3 , 4 , 5*/
20% {background-size: 70px 70px, 0 0 ,0 0 ,0 0 ,0 0}
40% {background-size: 70px 70px, 100px 100px,0 0 ,0 0 ,0 0}
60% {background-size: 70px 70px, 100px 100px,125px 125px,0 0 ,0 0}
80% {background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,0 0}
100%{background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,175px 175px}
}
<div class="ripple">
</div>

animation "forwards" doesn't keep the last state

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);
}

How to add transparent notch to a DIV with CSS only? [duplicate]

I'm trying to add some css3 styles on an element, basing on an image model.
Inside transparent arrow on the left with blue border:
Link to image
It is possible only with css3 ?

with a single element you could do this i have to go to work hope this help
<div>Lorem Ipsum</div>
the style:
div{
width:200px;
height:60px;
margin:100px;
background-color:transparent;
color:black;
position:relative;
text-indent:30px;
line-height:60px;
box-shadow:inset 20px 0 0 200px white;
overflow:hidden;
-webkit-box-shadow: inset -164px 0 0 20px white;
-moz-box-shadow: inset -164px 0 0 20px white;
box-shadow: inset -164px 0 0 20px white;
}
div:before{
content: '';
position: absolute;
left: 0px;
top: 4px;
width: 14px;
border-bottom: 3px solid blue;
border-left: 3px solid blue;
height: 18px;
background-color:white;
-webkit-transform: skew(0deg,34deg);
-moz-transform: skew(0deg,34deg);
transform: skew(0deg,34deg);
}
div:after{
content: '';
position: absolute;
background-color:white;
left: 0px;
bottom: 4px;
width: 14px;
border-top: 3px solid blue;
border-left: 3px solid blue;
height: 18px;
-webkit-transform: skew(0deg,-34deg);
-moz-transform: skew(0deg,-34deg);
transform: skew(0deg,-34deg);
}
body{
background-color: #EEEEEE;
khtml-background-size: 10px 10px;
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
-ms-background-size: 10px 10px;
-o-background-size: 10px 10px;
background-size: 10px 10px;
background-image: -khtml-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
width:100%;
height:100%;
}

The background is not solid which makes it very hard.
Especially since your arrow is not 90 degrees, which won't render that smooth I guess.
But have a look at this question:
CSS triangle custom border color

Using the technique of creating triangles with transparent borders of divs.
Two attempts that might help you a bit,
HTML
<div class="button">
<div class="wrapper">
<div class=" top-side "></div>
<div class="arrow-right "></div>
<div class="arrow-right2 "></div>
<div class="bottom-side "></div>
</div>
</div>
CSS
.button {
width: 400px;
background-color:orange;
}
.wrapper{
background-color:blue;
width:2px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 15px solid white;
position:absolute;
z-index:2;
}
.arrow-right2 {
position:relative;
top:-1px;
z-index:1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 18px solid blue;
}
.top-side {
height:7px;
width:2px;
background-color:blue;
}
.bottom-side {
height:7px;
width:2px;
background-color:blue;
}
http://jsfiddle.net/FkPYb/2/
also check
http://jsfiddle.net/FkPYb/1/
You might get better result by tweaking them.

Here is simplified variation of #kougiland's.
div {
width:200px;
height:60px;
position:relative;
text-indent:30px;
line-height:60px;
}
div:before{
content: '';
position: absolute;
top: 14px;
left: 0px;
width: 17px;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
-webkit-transform: skew(0deg,60deg);
-moz-transform: skew(0deg,60deg);
transform: skew(0deg,60deg);
}
div:after{
content: '';
position: absolute;
left: 0px;
bottom: 14px;
width: 17px;
border-top: 1px solid blue;
border-left: 1px solid blue;
-webkit-transform: skew(0deg,-60deg);
-moz-transform: skew(0deg,-60deg);
transform: skew(0deg,-60deg);
}
http://jsfiddle.net/fxLeg262/

How to make the white color transparent background?

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;
}

Inside transparent arrow on the left

I'm trying to add some css3 styles on an element, basing on an image model.
Inside transparent arrow on the left with blue border:
Link to image
It is possible only with css3 ?

with a single element you could do this i have to go to work hope this help
<div>Lorem Ipsum</div>
the style:
div{
width:200px;
height:60px;
margin:100px;
background-color:transparent;
color:black;
position:relative;
text-indent:30px;
line-height:60px;
box-shadow:inset 20px 0 0 200px white;
overflow:hidden;
-webkit-box-shadow: inset -164px 0 0 20px white;
-moz-box-shadow: inset -164px 0 0 20px white;
box-shadow: inset -164px 0 0 20px white;
}
div:before{
content: '';
position: absolute;
left: 0px;
top: 4px;
width: 14px;
border-bottom: 3px solid blue;
border-left: 3px solid blue;
height: 18px;
background-color:white;
-webkit-transform: skew(0deg,34deg);
-moz-transform: skew(0deg,34deg);
transform: skew(0deg,34deg);
}
div:after{
content: '';
position: absolute;
background-color:white;
left: 0px;
bottom: 4px;
width: 14px;
border-top: 3px solid blue;
border-left: 3px solid blue;
height: 18px;
-webkit-transform: skew(0deg,-34deg);
-moz-transform: skew(0deg,-34deg);
transform: skew(0deg,-34deg);
}
body{
background-color: #EEEEEE;
khtml-background-size: 10px 10px;
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
-ms-background-size: 10px 10px;
-o-background-size: 10px 10px;
background-size: 10px 10px;
background-image: -khtml-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
width:100%;
height:100%;
}

The background is not solid which makes it very hard.
Especially since your arrow is not 90 degrees, which won't render that smooth I guess.
But have a look at this question:
CSS triangle custom border color

Using the technique of creating triangles with transparent borders of divs.
Two attempts that might help you a bit,
HTML
<div class="button">
<div class="wrapper">
<div class=" top-side "></div>
<div class="arrow-right "></div>
<div class="arrow-right2 "></div>
<div class="bottom-side "></div>
</div>
</div>
CSS
.button {
width: 400px;
background-color:orange;
}
.wrapper{
background-color:blue;
width:2px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 15px solid white;
position:absolute;
z-index:2;
}
.arrow-right2 {
position:relative;
top:-1px;
z-index:1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 18px solid blue;
}
.top-side {
height:7px;
width:2px;
background-color:blue;
}
.bottom-side {
height:7px;
width:2px;
background-color:blue;
}
http://jsfiddle.net/FkPYb/2/
also check
http://jsfiddle.net/FkPYb/1/
You might get better result by tweaking them.

Here is simplified variation of #kougiland's.
div {
width:200px;
height:60px;
position:relative;
text-indent:30px;
line-height:60px;
}
div:before{
content: '';
position: absolute;
top: 14px;
left: 0px;
width: 17px;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
-webkit-transform: skew(0deg,60deg);
-moz-transform: skew(0deg,60deg);
transform: skew(0deg,60deg);
}
div:after{
content: '';
position: absolute;
left: 0px;
bottom: 14px;
width: 17px;
border-top: 1px solid blue;
border-left: 1px solid blue;
-webkit-transform: skew(0deg,-60deg);
-moz-transform: skew(0deg,-60deg);
transform: skew(0deg,-60deg);
}
http://jsfiddle.net/fxLeg262/

Resources