Related
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.
I've tried for several days to blend a colored background over a text with the same color and end up with the blended text to get white. Here is an example of what i managed to archive with only black and white:
But as soon as i change the color of the text and background from black to - for example - blue, the text does not get white but yellow or another color instead.
I used the CSS mix-blend-mode exclusion.
A working example with black and white can currently be found here. My goal is to replace the black and white primary button with a blue and white one.
If we consider the mix-blend-mode difference, this takes the difference between the background and the content colors.
So, if we have our text as blue which is rgb(0, 0, 255) to get to white we need to difference it with rgb(255, 255, 0).
Conversely, if our text is rgb(255, 255, 0) and we difference it with white which is rgb(255, 255, 255) we get rgb(0, 0, 255) which is blue.
So, we give the text a color of rgb(255, 255, 0) and ask it to blend with the background which is white and that will give us blue. Then as we overlay a blue we will get white text.
Here's the snippet. I haven't provided the wavyness which would be the subject of a different question.
UPDATE: as can be seen from the comments, the results so far on Windows10 and IOS look OK, but on MACOS variable results have been seen with the text taking on some pale color in Chrome and Safari, though being white on Firefox. Differences in interpretation (especially between mix-blend-mode and background-blend-mode) need further investigation.
body {
position: relative;
background-color: rgb(255, 255, 255);
width: 100vw;
height: 100vh;
}
#keyframes updown {
0% {
height: 0;
top: 200px;
}
50% {
height: 200px;
top: 0;
}
100% {
height: 0;
top: 200px;
}
}
.background {
position: absolute;
background-color: rgb(0, 0, 255);
width: 400px;
height: 200px;
animation: updown 10s ease infinite;
}
.text {
position: absolute;
font-family: sans-serif;
width: 400px;
color: rgb(255,255,0);/* complement of blue */
mix-blend-mode: difference;
text-align: center;
font-size: 50px;
}
<div class="background"></div>
<div class="text">Primary button</div>
The web page has a list of blocks like below. The background color of each block is done inline with 0.5 opacity. The 0.5 opacity is the problem. I need it to be completely opaque. I'm using the Stylish Chrome extension, and I need to do it with external CSS.
<a class="pizza" style="background-color:rgba(255, 255, 0,0.5);>this is yellow</a>
<a class="pizza" style="background-color:rgba(255, 0, 0,0.5);>this is red</a>
The only way I know how to change the opacity also involves changing the color for every block to the same. But each block in the list has it's own color, and needs to keep it's own color. How can I change the opacity of all blocks without also changing the color?
I would want something like this:
a.pizza {
background-color: rgba(, , , 1);
}
Or like this:
a.pizza {
background-color-opacity: completely opaque !important;
}
I've come up with a bit of a hack. It doesn't get you back to 100% opacity but pretty close.
The trouble is, without JavaScript, there's no way to find out what the colour is and take action based on that. So what you can do instead, is use CSS's inherit for the background color of child elements and layer them up to increase the overall perceived opacity of the main element.
So by adding two pseudo elements that inherit the background color and positioning them behind the main element you get very close to 100% opacity:
/* For the demo */
.pizza {
display: inline-block;
vertical-align: top;
width: 120px;
height: 120px;
}
/* Add relative positioning so we can position the absolute children correctly */
.pizza.new {
position: relative;
}
/* Add two pseudo elements behind that inherit the background color */
.pizza.new::before,
.pizza.new::after {
/* Sizing and positioning */
display: block;
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Take the background color of the parent */
background: inherit;
/* Make sure they're not obscuring the content */
z-index: -1;
}
<a class="pizza" style="background-color: rgba(255, 255, 0, 0.5);">
This is yellow (before)
</a>
<a class="pizza" style="background-color: rgba(255, 0, 0, 0.5);">
This is red (before)
</a>
<a class="pizza new" style="background-color: rgba(255, 255, 0, 0.5);">
This is yellow (after)
</a>
<a class="pizza new" style="background-color: rgba(255, 0, 0, 0.5);">
This is red (after)
</a>
You can try to approximate it with mix-blend-mode and you will have an opaque color:
.pizza {
display: inline-block;
padding: 50px;
position: relative;
z-index: 0;
}
.pizza:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #fff;
z-index: -1;
mix-blend-mode: multiply;
}
body {
background: linear-gradient(to bottom, grey 50%,blue 0);
}
<a class="pizza" style="background-color:rgba(255, 255, 0,0.5);">this is yellow</a>
<a class="pizza" style="background-color:rgba(255, 0, 0,0.5);">this is red</a>
The easiest way I can think of, if you don't want to edit the colors themselves, would be to use a CSS pseudo-element to add an opaque white background (or whatever background color you want) behind every div with a colored background. You could use something like
div.pizza::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top:0; left: 0;
background: #FFF;
}
You may need to tweak the z-index depending on your particular CSS.
I am trying to highlight a square with radial gradient effect. I created the following css rule:
.highlight-move {
background-color: #75f547;
background-image: -webkit-radial-gradient(center center, circle cover, #75f547, #fff 100%);
background-image: radial-gradient(center center, circle cover, #75f547, #fff 100%);
}
The problem is that my gradient is not transparent: jsFiddle and therefore I have a white background on the square.
I thought that I would be able to fix it with rgba, but as you see in the fiddle it does not work. How can I make my gradient transparent?
One additional important problem is not to highlight the piece on that color: thanks to Hashem for his :after solution.
Actually you are overriding the background color of the square itself so that the rgba() won't give the desired effect in that case.
You could use pseudo-elements to apply the gradient on top of the square as follows:
EXAMPLE HERE
.highlight-move:after {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0; /* set dimensions up to the parent */
background: #75f547;
background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
background: radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
}
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.