I have an ion list that is contained in an ion content like so:
<IonContent class="sub-list-container" scrollY={true} style={{ "background": "red" }}>
<IonList class="sub-list">
<IonMenuToggle autoHide={false} key={p.title}>
{
p.children.map(el => el)
}
</IonMenuToggle>
</IonList>
</IonContent>
The styles for this are:
.sub-list-container {
--background: var(--primary-dark);
}
Inside the list is of course some ion items. I have customised their separator line to be a gradient of white to transparent like this:
border-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0) 100%) 1 1;
This is so the line will blend into any background colour that I put it on. This works fine for a list on a different page however on the list I showed above, it goes from white to black. The issue isn't the gradient but the colour of the background behind it. I've tried setting every list, every ion content in the menu to the colour I need the background to be but it still looks like this:
As you can see, even though background is grey (and even the ion content's background is grey too), the line still blends to black.
After doing some digging in chrome, I found that this:
.list-ios {
background: var(--ion-item-background, var(--ion-background-color, #fff));
}
is causing that. If I disable that style then I can see whatever background colour I set instead of the black like so:
Unfortunately I have not found a way to disable this style. The mode of the ion list can only be ios or md so it will always have to have one of these styles. Even setting the background colours to !important does not work.
Is there anyway I can override this list-ios style?
Related
The gradient works in Chrome but not Safari. I'm aware the browsers render transparent in different ways, but still can't figure it out.
I have tried:
transparent ,rgba(255,255,255,0), and white
still no luck. Here is what I currently have :
.btn{
background: -webkit-linear-gradient(315deg, #fdb813 0%, #788cb6 74%);
-webkit-background-clip: text;
-webkit-text-fill-color: RGBA(255, 255, 255, 0);}
.btn:hover{ background: -webkit-linear-gradient(319deg, #fce055 0%, #256eff 37%, #46237a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: RGBA(255, 255, 255, 0);
}
Chrome button
Safari button
Also, the gradient work with text outside of the btn.
Non button gradient in Safari
So it looks like this is just a bug with buttons. I've been trying to crack it for a little bit.
That said, if those buttons are linking out to other sites, apps, or pages, it's probably better semantically for them to be anchor tags instead of buttons. There is no issue getting that gradient text with an <a>.
I need to apply color variable to liner-gradient, which also needs to have opacity. So in that case rgba(red, green, blue, opacity) is mandatory. Is there any way to apply variable color without hard coding rgba() in liner-gradient?
For instance :
let gradient= `linear-gradient(to bottom, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 1) 20%)`
.arraow {
background: ${(p) => p.gradient}
}
The above code is only for one color and taht is #FFFFFF at the moment. But this needs to change depending on color selected for the gradient to use.
I need something like below:
const gradientColor = p.arrowColor;
let gradient= `linear-gradient(to bottom, var(gradientColor) 15%, var(gradientColor) 40%,
var(gradientColor) 20%)` <<<<<------ here I am missing the opacity since they are not rgba()
It doesn't seem a nice way to manually create all rgba() and keep it a file and access it with a conditional statement.
So I've been wasting a lot of time trying to do something simple. Using a custom css plugin I've been trying to set my body to be transparent to see the image in the background.
What I first tried using was opacity selector, but that set everything in the body as transparent. I'd like to have my images and text not be transparent. I've been googling this for many hours and each answer I see for other people is to use the rgba (number, number, number, opacity). I can see how this would work, but using this does not make the background transparent at all. I'm really at a loss for what to do, I feel like there is just something really simple I am missing.
Please inspect my code to see where I've gone wrong: [jaredbabinec.com][1]
Also here is my css:
body {
opacity: .9;
}
.site-header {
rgba(255, 255, 255, .9);
}
.site-content {
background-color: rgba(210, 210, 210, 0.9)
}
change the background color of the div with id="page"
for example
#page{
background-color: rgba(185, 178, 178, 0.71);
}
change the color as needed. Hope this will fix ur problem
use this
.site-content {background: rgba(210,210,210,0.9)}
`
.site-header {
rgba(255, 255, 255, .9);
}
`
rgba is not a property, it is a value you left out background:
Give the body the background image with background-size set to cover.
You want to create a site-wrapper div that is height and width 100%.
Make the background for that div transparent
I'm applying a basic linear-gradient like this:
background-image: linear-gradient(to top, red, rgba(0,0,0,0));
this behaves as it's supposed to everywhere except in safari where the transparent is rendered as a blackish/greyish color:
here's chrome (how it is supposed to be):
and here's safari
I've tried prefixing it with -webkit-, changing the rgba to rgba(0,0,0,0.001) but it never goes to solid transparent. is this a bug? is there a way to fix this?
here's a fiddle https://jsfiddle.net/2Lrp3sv1/2/
No browser renders transparent as rgba(255, 255, 255, 0), that's completely wrong. transparent is always rgba(0,0,0,0), as defined in the CSS Color 3 specification. However, a few years ago we changed how color interpolation works in gradients and specified it should happen in a premultiplied RGBA space, exactly to fix this issue and make interpolation with transparent work as expected. Looks like other browsers have implemented this change, but Safari hasn't yet. If you want gradients with Safari to look the same, you need to use color stops that utilize the transparent version of the color you are interpolating to/from (which may sometimes require two color stops at the same position, if these colors are different), in this case linear-gradient(to top, red, rgba(255,0,0,0)). Or just wait for Safari to catch up! :)
This has to do with the way browsers render transparent.
For most browsers,
transparent === rgba(255,255,255,0)
But Safari renders it as
transparent === rgba(0,0,0,0)
So if you have a gradient from transparent to white (or rgba(255,255,255,1)), for most browsers you're only changing the alpha from 0 to 1 along the gradient.
But for Safari, you're changing the alpha from 0 to 1 and the color from 255 to 0, so you get a gradient of greys.
This drove me crazy for a while.
Based on what #AJFarkas wrote, just replace transparent with rgba(255, 255, 255, 0) and it works fine on Safari!
In my case it was a linear gradient from white to transparent to white:
background-image: linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #fff 90%);
for my case looks like changing from
background-image: linear-gradient(rgba(243, 243, 251, 1), transparent);
to:
background: linear-gradient(rgba(243, 243, 251, 1), rgba(255, 255, 255, 0));
works perfectly on safari.
i am seeing this in Safari, too. For me, it is fading to a light red, even though none of the colors I use is anywhere near red.
I solved it using 'transparent' as the value. Once I stopped using rgba, it looked like expected.
I had a situation where the colours in the gradient were being dynamically applied by a CMS, so here's a Javascript fix for this issue in Safari that takes this into account.
Assuming you're using a pseudoclass to achieve this, you can use js to return the element, create a new style tag and insert it into the head of the document.
<script>
var col = document.querySelector('.my_div').style.color;
var style = document.createElement('style');
// Replace RGB with RGBA (we need the opacity)
col = col.replace(/rgb/i, "rgba");
col = col.replace(/\)/i,', 0)');
//Create our new styles based on the returned colours
style.innerHTML =
'.my_div::before {'
+ 'background-image: linear-gradient(to left, currentColor 0%, '
+ col
+ ' 15%);'
+'}';
var ref = document.querySelector('script');
// Insert our new styles before the first script tag
ref.parentNode.insertBefore(style, ref);
</script>
Here's the source of this great trick
Using CSS or CSS3, how can i make the folowing background ?
If possible, i'd like ie6,7,8 support. I can use a javascript based tool to simulate CSS3 for old browsers (like css3pie).
If possible, i'd like ie6,7,8 support.
Use a background image. Even if you could use pure CSS3 to create such a pattern for a background (I highly doubt that is possible), it's not worth the hassle to use a bunch of JavaScript libraries and such just to get it to work in those versions of IE.
I use this.
Then you just do background-image:url(blahblahblah.gif)
Any reason you're still supporting IE6? It would be easy to do without IE6 support. IE really sucks for gradient support, so you'll need to use an image, but here's the CSS anyway.
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
I know this probably doesn't match your image. I'm sorry, but your image host is blocked by my work, so you'll have to interpret from here. This will work with webkit browsers and FF3.6, and will fall back to the color specified in background-color for non-compliant browsers.
You have to use a repeating texture square. Find a small ping and use a repeating backround.