I am building a web application, some HTML elements might take some time to be fetched.
So I decided to render the layout of the element, without the data from the backend. But I want to indicate to the user, that the data is loading with a CSS animation. I want it to look like this, but I want the transition of the color change to be smooth so that the lighter area travels from one side to the other. Any ideas?
body {
animation: 2000ms infinite color-loading;
}
#keyframes color-loading {
0% {
background: linear-gradient(
to right,
#363644,
#282933
);
}
100% {
background: linear-gradient(
to right,
#282933,
#363644
);
}
}
I don't think smooth transition of linear gradients in css transitions/animations is supported in any major browsers yet.
One way you can achieve something similar with css only is by using one div inside the other and make it so that the container div hides its overflow, make the inner div longer, relatively positioned, and with a linear-gradient background. Then in your animation, you can smoothly reposition the inner div:
.div1 {
display: block;
width: 200px;
height: 20px;
background-color: #282933;
overflow: hidden;
}
.div2 {
display: block;
width: 700px;
height: 20px;
background:
linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0) 100%
);
position:relative;
left: -700px;
animation: color-loading 2000ms ease 0s normal infinite none;
}
#keyframes color-loading {
0% {
left: -700px;
}
100% {
left: 0px;
}
}
...
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
...
I think animation-timing-function property will help you out.
Also, I have checked and find your background colors are very similar, try with other color combination with animation-timing-function property and see the difference.
Please refer for more detail information below link:
https://www.w3schools.com/css/css3_animations.asp
Please let me know if you find any issues.
Related
I have a problem with animations when I pass variables through HTML. My code is :
.falling-star {
width: 10px;
height: 15px;
transform: rotate(45deg);
background: red;
border-radius: 50%;
top: var(--top);
left: var(--left);
position: absolute;
animation: falling-star-animation var(--animationTime) infinite ease-in-out;
}
#keyframes falling-star-animation {
40% {
top: var(--top);
left: var(--left);
background: rgba(255, 255, 255, 0);
}
60% {
background: red;
}
100% {
top: var(--endTop);
background: rgba(255, 255, 255, 0);
left: var(--endLeft);
}
}
<div class="falling-star" style="--top:2vh; --endTop:90vh; --left:50vw; --endLeft:10vw; --animationTime:8s; --animationDelay: 2s;"></div>
<div class="falling-star" style="--top:4vh; --endTop:70vh; --left:90vw; --endLeft:50vw; --animationTime:4s; --animationDelay: .5s;"></div>
<div class="falling-star" style="--top:0; --endTop:50vh; --left:88vw; --endLeft:30vw; --animationTime:3s; --animationDelay: 1s;"></div>
I thought that animations are behind something (lower z-index), but they aren't. When I inspect them in console, then I see that they aren't moving. When I change from variables to static values then the animation is working. Earlier it was working but I probably changed something by accident and I don't know what's this (git history doesn't show any changes in this code).
Okay, i debuged this. Resolve was to remove camel case and type every css variable using only lower case. I don't know why it works like that, but for everyone who will come here in future - this is my solution of this problem :D
I am trying to create a pulsating circular background with smooth edges. For the circle with smooth edges I am using this CSS code:
background: radial-gradient(black, black, transparent, transparent);
Using my code below works well to animate the background-color. However, as soon as I replace the background-color with this radial-gradient background the animation jumps and is no longer smooth. The behavior is consistent over multiple Browsers. This is a minimal working example of the issue I am having:
.global {
background: lightskyblue;
}
.silver {
// background: radial-gradient(black, black, transparent, transparent);
animation: pulse 3s infinite;
}
#keyframes pulse {
0%,
100% {
// background-color: black;
background: radial-gradient(black, transparent, transparent, transparent);
}
50% {
// background-color: white;
background: radial-gradient(black, black, transparent, transparent);
}
}
<body class="global">
<img src="pngwave.png" alt="test" class="silver" />
</body>
I have found this Stackoverflow question which is similar but did not help me solve my problem.
You need to animate the background-size
.box {
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,black, transparent) center no-repeat;
animation:pulse 2s linear infinite alternate;
}
#keyframes pulse{
from {
background-size:50% 50%;
}
to {
background-size:100% 100%;
}
}
<div class="box"></div>
So I'm trying to animate (moving up form bottom) a radial gradient behind other HTML controls.
HTML body has a red color. updated color to black
Gradient is in a div with the following style:
.bg {
overflow: hidden;
position: auto;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-animation-name: animatedBackground;
-webkit-animation-duration: 2.5s;}
So now when the gradient moves behind the HTML controls there is a visible perimeter.
You can observe that there is a border like thing (highlighted in yellow).
I'm trying to get rid of this border so that gradient appears as just a radial thing may be faded/blurred on edges, moving in background.
Is it possible ?
Am I doing something wrong?
Added Fiddle
https://jsfiddle.net/bxr53dx4/1/
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed yesterday.
I want to make the list menu's background disappear by using opacity, without affecting the font. Is it possible with CSS3?
now you can use rgba in CSS properties like this:
.class {
background: rgba(0,0,0,0.5);
}
0.5 is the transparency, change the values according to your design.
Live demo http://jsfiddle.net/EeAaB/
more info http://css-tricks.com/rgba-browser-support/
Keep these three options in mind (you want #3):
1) Whole element is transparent:
visibility: hidden;
2) Whole element is somewhat transparent:
opacity: 0.0 - 1.0;
3) Just the background of the element is transparent:
background-color: transparent;
To achieve it, you have to modify the background-color of the element.
Ways to create a (semi-) transparent color:
The CSS color name transparent creates a completely transparent color.
Usage:
.transparent{
background-color: transparent;
}
Using rgba or hsla color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. Their alpha values range from 0 - 1.
Usage:
.semi-transparent-yellow{
background-color: rgba(255, 255, 0, 0.5);
}
.transparent{
background-color: hsla(0, 0%, 0%, 0);
}
As of the CSS Color Module Level 4, rgb and hsl works the same way as rgba and hsla does, accepting an optional alpha value. So now you can do this:
.semi-transparent-yellow{
background-color: rgb(255, 255, 0, 0.5);
}
.transparent{
background-color: hsl(0, 0%, 0%, 0);
}
The same update to the standard (Color Module Level 4) also brought in support for space-separated values:
.semi-transparent-yellow{
background-color: rgba(255 255 0 / 0.5);
}
.transparent{
background-color: hsla(0 0% 0% / 0);
}
I'm not sure why would these two be any better than the old syntax, so consider using the a-suffixed, comma-separated variants for greater support.
Besides the already mentioned solutions, you can also use the HEX format with alpha value (#RRGGBBAA or #RGBA notation).
That's contained by the same CSS Color Module Level 4, so it has worse support than the first two solutions, but it's already implemented in larger browsers (sorry, no IE).
This differs from the other solutions, as this treats the alpha channel (opacity) as a hexadecimal value as well, making it range from 0 - 255 (FF).
Usage:
.semi-transparent-yellow{
background-color: #FFFF0080;
}
.transparent{
background-color: #0000;
}
You can try them out as well:
transparent:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: transparent;
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `transparent`
</div>
hsla():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(250, 100%, 50%, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()`
</div>
rgb():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: rgb(0, 255, 0, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `rgb()`
</div>
hsla() with space-separated values:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(70 100% 50% / 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()` with spaces
</div>
#RRGGBBAA:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: #FF000060
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `#RRGGBBAA`
</div>
yes, thats possible. just use the rgba-syntax for your background-color.
.menue {
background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Here is an example class using CSS named colors:
.semi-transparent {
background: yellow;
opacity: 0.25;
}
This adds a background that is 25% opaque (colored) and 75% transparent.
CAVEAT
Unfortunately, opacity will affect then entire element it's attached to.
So if you have text in that element, it will set the text to 25% opacity too. :-(
The way to get past this is to use the rgba or hsla methods to indicate transparency* as part of your desired background "color". This allows you to specify the background transparency*, independent from the transparency of the other items in your element.
Technically we're setting the opacity, though we often like to speak/think in terms of transparency. Obviously they are related, inverses of each other, so setting one decides the other.
The number specified is the opacity %. 1 is 100% opaque, 0% transparent & vice versa).
Here are 3 ways to set a blue background at 75% opacity (25% transparent), without affecting other elements:
background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)
In this case background-color:rgba(0,0,0,0.5); is the best way.
For example: background-color:rgba(0,0,0,opacity option);
Try this:
opacity:0;
For IE8 and earlier
filter:Alpha(opacity=0);
Opacity Demo from W3Schools
Yes you can just plain text as
.someDive{
background:transparent
}
For your case, we can use rgba():
First, we manipulate the background-color, and use rgba.
.selector {
background-color: rgba(0, 0, 0, 0.3);
}
Now what this does is, it basically adds an opacity to your element, along with the black background color. This is how it'd look when you run it.
body {background-color: #0008f3;}
.container {
height: 100px;
width: 100px;
background-color: rgba(255,255,255,0.5);
}
<body>
<div class="container"></div>
</body>
full transparent -> .youClass{background: rgba(0,0,0,0.001);}
Related to How do I give text or an image a transparent background using CSS?, but slightly different.
I'd like to know if it's possible to change the alpha value of a background image, rather than just the colour. Obviously I can just save the image with different alpha values, but I'd like to be able to adjust the alpha dynamically.
So far the best I've got is:
<div style="position: relative;">
<div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
background-image: url(...); opacity: 0.5;"></div>
<div style="position: relative; z-index: 1;">
<!-- Rest of content here -->
</div>
</div>
It works, but it's bulky and ugly, and messes things up in more complicated layouts.
You can do the faded background with CSS Generated Content
Demo at http://jsfiddle.net/gaby/WktFm/508/
Html
<div class="container">
contents
</div>
Css
.container{
position: relative;
z-index:1;
overflow:hidden; /*if you want to crop the image*/
}
.container:before{
z-index:-1;
position:absolute;
left:0;
top:0;
content: url('path/to/image.ext');
opacity:0.4;
}
But you cannot modify the opacity as we are not allowed to modify generated content..
You could manipulate it with classes and css events though (but not sure if it fits your needs)
for example
.container:hover:before{
opacity:1;
}
UPDATE
You can use css transitions to animate the opacity (again through classes)
demo at http://jsfiddle.net/gaby/WktFm/507/
Adding
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
to the .container:before rule will make the opacity animate to 1 in one second.
Compatibility
FF 5 (maybe 4 also, but do not have it installed.)
IE 9 Fails..
Webkit based browsers fail (Chrome supports it now v26 - maybe earlier versions too, but just checked with my current build), but they are aware and working on it ( https://bugs.webkit.org/show_bug.cgi?id=23209 )
.. so only the latest FF supports it for the moment.. but a nice idea, no ? :)
.class {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
Copied from: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
If the background doesn't have to repeat, you can use the sprite technique (sliding-doors) where you put all the images with differing opacity into one (next to each other) and then just shift them around with background-position.
Or you could declare the same partially transparent background image more than once, if your target browser supports multiple backgrounds (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). The opacity of those multiple images should add up, the more backgrounds you define.
This process of combining transparencies is called Alpha Blending and calculated as (thanks #IainFraser):
αᵣ = α₁ + α₂(1-α₁) where α ranges between 0 and 1.
Try this trick .. use css shadow with (inset) option and make the deep 200px for example
Code:
box-shadow: inset 0px 0px 277px 3px #4c3f37;
.
Also for all browsers:
-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;
and increase number to make fill your box :)
Enjoy!
Try this
<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat; background-position: center;"> </div>
To set the opacity of a background image, you just need to add an opaque image as first image in the background-image set.
Explanation:
The gradient function is creating an image from a color
The rgba function is creating a color that accepts opacity as parameter (ie alpha parameters)
alpha = 1 - opacity of white
Therefore by combining them, you can create an opaque image.
For instance, you can add an opacity of 0.3 by adding the following image linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%) in the set of background-image
Example for an opacity of 0.3
body{
background-image: linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%), url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
background-size: cover;
}
Enjoy !
Credits
You can put a second element inside the element you wish to have a transparent background on.
<div class="container">
<div class="container-background"></div>
<div class="content">
Yay, happy content!
</div>
</div>
Then make the '.container-background' positioned absolutely to cover the parent element. At this point you'll be able to adjust the opacity of it without affecting the opacity of the content inside '.container'.
.container {
position: relative;
}
.container .container-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(background.png);
opacity: 0.5;
}
.container .content {
position: relative;
z-index: 1;
}
You can't edit the image via CSS. The only solution I can think of is to edit the image and change its opacity, or make different images with all the opacities needed.
#id {
position: relative;
opacity: 0.99;
}
#id::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url('image.png');
opacity: 0.3;
}
Hack with opacity 0.99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.
Demo.
Here is another approach to setup gradient and stransparency with CSS. You need to play arround with the parameters a bit though.
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image: -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image: -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */
I use it, I tested it on a white background, but it can be matched to the background color, especially if using css var:
background: #ececec99;
background-blend-mode: lighten;
background-image: url(images/background-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
It's important to note that I only checked this in the Chrome browser.
You can use a hack to achieve a filter effect. some users mentioned before but none of their answers worked for me except this solution
#item_with_background {
background: rgb(filter_color) url(...)
}
#item_with_background > * {
position: relative;
z-index: 1; // this may cause other problems if you have other elements with higher than 1 z-index. so use with caution.
}
#item_with_background::before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(filter_color, 0.9);
width: 100%;
height: 100%;
z-index: 0;
}
Here is a working example
body {
' css code that goes in your body'
}
body::after {
background: url(yourfilename.jpg);
content: "";
opacity: 0.6;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
width:auto;
height: 100%;
}
So to say its the body::after you are looking for. This way the code for your body is not changed or altered only the background where you can make changes where necessary.