As expected this code doesn't work in IE 8
background-color: rgba(255, 255, 255, 1);
Is there any fix for IE.Please let me know.
Many thanks,
R
Try setting a fallback background-color property like so:
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1);
or
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
Try
background-color: rgba(255, 255, 255, 1);
*background-color: #FFF;
Also, you are using opacity 1, do you really need to use rgba here?
Some help:
http://caniuse.com/#search=rgba
For IE, if you want equivalent of background-color:rgba(....)
use this :
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
This is black color with opacity (the two first digits)
Here one generator for that:
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
Related
when I add box-shadow to my code something strange happens (only in Chrome browser). This bug disappears after a while, but whenever I do something on site it appears randomly again:
.glass{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
So I've tried to remove the box-shadow and replace it with filter: drop-shadow like that:
background: rgba( 255, 255, 255, 0.25 );
filter: drop-shadow(0 8px 12px rgba(31, 38, 135, 0.37));
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border: 1px solid rgba( 255, 255, 255, 0.18 );
But visually it looks worse for my design, because the glass panel is getting a lot darker.
is it possible to somehow fix box-shadow to work properly in chrome or make it look similar to the box-shadow version with drop-shadow? I'm out of ideas how to make it.
I wrote CSS to show grid patterns like this:
background-image {
repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px ),
repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px )
}
But after production build on Next.js, this was replaced with:
background-image {
repeating-linear-gradient(0deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px),
repeating-linear-gradient(90deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px)
}
And the grid pattern doesn't show on the page.
Is there any solution to disable this convert?
Solved to change deg to to of gradient syntax. Still use hsla but the results are same.
background-image: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.43) 0px 1px,
transparent 1px 20px
),
repeating-linear-gradient(
to left,
rgba(255, 255, 255, 0.43) 0px 1px,
transparent 1px 20px
);
I've been working on this for hours and have 0 idea what to do.
Although I think I have it right, it's saying that it is wrong. I have no idea what else to do.
The question says: The page contains a review within a block quote. Go to the Blockquote Styles section and create a style rule for the blockquote element that sets the background color to rgb(173, 189, 227) and the text color to the rgb(255, 255, 255) with an opacity of 0.65.
Here is my CSS code:
blockquote {
background-color: rgb(173, 189, 227);
color: rgb(255, 255, 255);
opacity: 0.65;
}
The problem with your solution is how you're interpreting this part: "... and the text color to the rgb(255, 255, 255) with an opacity of 0.65.". It's asking to set the opacity of the text to 0.65, not of the entire element.
Using rgba should get it right:
blockquote {
background-color: rgb(173, 189, 227);
color: rgba(255, 255, 255, 0.65);
}
Is it possible to generate a gradient similar to this style of color picker? Where the full saturated, 50% brightness values are on the outside, and towards the inside it goes to 100% brightness.
https://i.imgur.com/UlssX5h.jpg
Here you go.
html, body {margin:0; width:100%; height:100%; background: black}
.colorpicker {
width:100vmin; height:100vmin; margin:0 auto;
border-radius:100%;
background:
linear-gradient(0deg, #00F, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(60deg, #0FF, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(120deg, #0F0, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(180deg, #FF0, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(240deg, #F00, rgba(255, 255,255,0), rgba(255, 255,255,0))
, #FFF linear-gradient(300deg, #F0F, rgba(255, 255,255,0), rgba(255, 255,255,0))
}
<div class="colorpicker"></div>
This question already has answers here:
How to apply a CSS gradient over a text, from a transparent to an opaque colour
(3 answers)
Closed 3 years ago.
Is it possible to achieve this with just one div (no background images/foreground images/layers)?
Example on codepen: http://codepen.io/anon/pen/sbHAc/
Relevant CSS
ol {
border : 1px #d8d8d8 dashed;
position : relative;
}
ol:after {
content : "";
position : absolute;
z-index : 1;
bottom : 0;
left : 0;
pointer-events : none;
background-image : linear-gradient(to bottom,
rgba(255,255,255, 0),
rgba(255,255,255, 1) 90%);
width : 100%;
height : 4em;
}
Resulting effect
if the browser supports the pointer-events property (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.
I (personally) find that using a secondary element as an "overlap" works pretty well. I do this by defining a new tag. This makes it really easy to add the desired fade out effect to any element you want using <fade/> at the end.
div {
position: relative;
}
fade {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
height: 50px;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.9)
100%);
}
<div>
text
<br>
text
<br>
text
<fade/>
</div>
Giving the fade element an absolute position with a gradient background works just as expected. As long as you remember to set the parent's position to relative.
<style>
.fade {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
</style>
Here is an example for you http://jsfiddle.net/nrgx7/