I have problem with linear gradient in mozilla firefox. Following css code:
background: linear-gradient(180deg, black 20%, darkorange);
html {
height:100vh;/* demo purpose*/
background: linear-gradient(180deg, black 20%, darkorange);
}
For all browser produces nice background smoothly transforming from black to orange color. However it doesn't work in Firefox. It produces lot of thin orange and black lines one each after other. However, when I change first parameter to 90deg (horizontal gradient), it works as it is supposed to. What I'm doing wrong? I've read similiar question from stackoverflow about this problem, but no solution worked for me. And yes, I tried to change to -moz-linear-gradient and it isn't working either (I'm using latest version of FF browser, so it shouldn't be a factor anyway.
Thank you for help in advance.
JS-fiddle link (not much to fiddle there though):
Hmm I tested here in code snipped added by GCyrillus and it's working correctly. However when I'm testing it in my browser or JS Fiddle it still produces strange result as shown in this image:
Imgur
You need to ensure the element you're setting a background on has a height, either explicitly set or due to content.
.test {
width: 100px;
background: linear-gradient(180deg, black 20%, darkorange);
float: left;
}
#test1 {
height:200px;
}
<div class="test" id="test1">Test</div>
<div class="test">Test</div>
Related
we want to make everything on our website sized to 90% of actual proportions (luck we are using rem units), so the easiest solution for us is to write html { font-size: 0.9rem; } rule. However, we are facing some bugs with scaling in chrome - some elements have greater margin the other, not precise width/height etc. It works great in Safari and Firefox... you can see the example here in fiddle, some buttons have undesirable last 1px height white line instead of background.
edit: well it seems to occur on retina display only
edit 2: I've updated chrome from 72 to 73 and it's okay now
The problem comes with your background. Change it to '#ff0000', and the gap goes away.
If you change your gradient to 'background-image', and then add 'background-color'; your problem appears to be fixed:
.button.primary {
background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
background-color: #fac364;
border: 0;
}
Updated your fiddle: https://jsfiddle.net/kcazfps8/
I've seen various examples of how to fade out a line of text in CSS. However, these all involve a gradient overlay which matches the background colour. Usually this might be white for example, where the background is also white.
However, if you have a gradient based background with some colour for example, the fade doesn't work in this approach. I can not find any other methods to achieve this desired look.
Is there not a way to fade out text to become transparent itself in a gradient method applied to it directly?
Is something like this what you're looking for?
div {
background: linear-gradient(to bottom right, red, yellow);
}
h2 {
background-image: linear-gradient(90deg,#000000 0%,rgba(0,0,0,0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
display:inline-block;
font-size: 50px;
}
<div>
<h2>
test test test test test
</h2>
</div>
There is a sleek solution which uses mask-image. Yes, it uses a linear-gradient(), however, because it works with pure transparencies, no knowledge of the background color is necessary:
div {
white-space: nowrap;
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}
Works for me in Chrome and caniuse for mask-image looks not bad.
I'm trying to create a pattern with a png with a transparent background. It works fine both on Firefox and Safari, but on Chrome it's displaying with some white space in between.
The code to reproduce the issue is quite simple:
div {
background: url('http://vps97368.ovh.net/montessori.it/wp-content/themes/montessori/images/pattern-bg.png');
height: 500px;
}
<div>blabla</div>
And I've created a pen to show it: http://codepen.io/anon/pen/RPGOyx
The pattern should display simple parallel diagonal lines, but on Chrome I see them like this:
I'm experiencing the issue on a retina display. Not sure about others.
Make the image bigger. I used 25x25 for this one:
http://codepen.io/anon/pen/BNmVXQ
div {
background: url('https://s3-us-west-1.amazonaws.com/haven-images/pattern-bg.png');
height: 500px;
}
I'd like to get the gradient effect of purple or white color that starts with a strong tone and gradually this until dimming seems to disappear or become transparent and you see the background behind.It's possible?
I hope I have explained!
Regards!
I'd suggest using a CSS gradient generator.
Try this one: http://www.colorzilla.com/gradient-editor/
It has a number of presets, some of which look like they might be useful for you.
div {
height: 500px;
width: 300px;
background-image: -o-linear-gradient(#8860af, #4e91cc, #c7deee);
background-image: -moz-linear-gradient(#8860af, #4e91cc, #c7deee);
background-image: -webkit-linear-gradient(#8860af, #4e91cc, #c7deee);
}
Live demo: Tinkerbin
Read more here.
On Yahoo.com, I really like the light gray body gradient background. (Just the gray fade)
However, I can't find the image they use to great this effect.
Does anyone know what image/code Yahoo uses to create this background effect?
It's the image: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png
If you look at the CSS you'll see:
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
Which is what everybody else is pointing out. However, the part that nobody else has pointed out is that there is also:
background-position: 0px -2335px;
Which defines an offset so that the background you see doesn't actually start till way down the image.
The gradient that is shows is white to grey, then transparent. In order to make the gradient in this manner you have to set the color of the page equal to the last extent of the gradient. So if you look in that CSS you'll also see:
background-color: #E8EDF0;
This completes the gradient you currently see on yahoo.com.
I have also confirmed that #E8EDF0 is the correct hex code for the last non-transparent color on that background image.
in your image app, make a gradient that starts very slightly darker then it ends
Have a look at the Style on the HTML element using something like FireBug or Chrome's Inspect Element or even IE's Developer stuff.
Also a good thing that a lot of beginners don't understand is that you create a gradient image that's for example 100px tall by only 10px wide. then you just use a css style like this:
body { background:
url('backgroundImage/png') repeat-x; }
The repeat-x repeats the image horizontally.
Current yahoo background has the following CSS property
body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}