I've got a gradient div, here it is:
<div class="gradient"></div>
And here is css:
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%, #fff 100%)
}
Very simple.
In Chrome it's works fine, but in Firefox (34.0, Ubuntu 14.04) it's work not correctly:
I tried use rgba(0,0,0,0) instead transparent, tried -moz-linear-gradient prefix — no results.
dabblet link
Thanks!
If you want to avoid the grey in the middle you can use a gradient from transparent white (255, 255, 255, 0) to opaque white (255, 255, 255, 1),#fff.
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%)
}
http://dabblet.com/gist/64dd43f37e8978d08749
In your code the gradient goes from transparent black to opaque white and because of that the grey part in the middle shows up in FF.
I guess chrome and other browser calculate the color steps in the gradient differently.
Related
I want this background on my project like this:
This is easily achieved using CSS linear-gradient()s:
body {
--gridColor: #eee;
--gridSize: 10px;
background-image:
linear-gradient(to right, var(--gridColor) 10%, transparent 10%),
linear-gradient(to bottom, var(--gridColor) 10%, transparent 10%);
background-size: var(--gridSize) var(--gridSize);
}
See also Lea Verou's CSS patterns for more elaborate designs.
I am a novice when it comes to css and am creating a custom audio player using a mixture of css and jquery. The progress bar of this audio player is a ring, which uses circle sectors to display progress. The sector is created using linear-gradient, like so:
background-image:
linear-gradient(-75deg, black 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, white 50%);
In firefox this works perfectly, but in both chrome and ie, a very slim white line is visible on the outside of half of the circle, presumably where part of the linear-gradient is supposed to cover.
I have created a jsfiddle that displays the issue, https://jsfiddle.net/9dagsrzz/
Is there something that I am doing wrong that causes this, or is there a fix I can apply that removes this line?
Thank you for your time.
Edit - it has been over a month and I thought I would update and say that I have still not been able to find a complete solution to this problem. The best way of dealing with the issue is to include a covering border, as suggested by Pustur below.
Samiskeen,
I'm no CSS expert either but I do know that each browser has its required prefixes when dealing with gradients:
-moz- is for Mozilla Firefox
-webkit- is for Apple Safari, Google Chrome, and also for ios and Android
-o- is for Opera
-ms- is for Microsoft IE and presumably Edge
You can have all of these present on their own line and the browser will pick the correct one.
Example:
background-image:
-moz-linear-gradient(-75deg, black 50%, transparent 50%),
-moz-linear-gradient(90deg, transparent 50%, white 50%);
-webkit-linear-gradient(-75deg, black 50%, transparent 50%),
-webkit-linear-gradient(90deg, transparent 50%, white 50%);
-o-linear-gradient(-75deg, black 50%, transparent 50%),
-o-linear-gradient(90deg, transparent 50%, white 50%);
-ms-linear-gradient(-75deg, black 50%, transparent 50%),
-ms-linear-gradient(90deg, transparent 50%, white 50%);
The website http://caniuse.com lists the major CSS rules, attributes and whether browser specific versions are required.(Nixon, p. 439).
Play around with the prefixes, they should help correct your problem.
Good Luck.
Jim
Not sure if this is a definitive solution or the best, but it seems to work fine at least on chrome.
HTML:
<!-- divs instead of spans -->
<div id="container">
<div id="position_indicator"></div>
<div id="inside"></div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
background-color: black;
position: relative;
padding: 20px;
}
#inside {
width: 90px;
height: 90px;
background-color: black;
border-radius: 100%;
position: absolute;
margin-left: 5px;
margin-top: 5px;
}
#position_indicator {
border: 1px solid black; /* Fix the border issue! */
margin-left: -1px; /* Compensate for the new border */
margin-top: -1px; /* Compensate for the new border */
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
background-color: black;
background-image: linear-gradient(-75deg, black 50%, transparent 50%), linear-gradient(90deg, transparent 50%, white 50%);
}
Fiddle
I have tried this but it does not give the effect I want.
background: repeating-linear-gradient( 0, #222, #111 5px, #333 1px);
What I would like is to have the background be #222 and then every 5px going down the page I would like to have a 1px height horizontal line that is #333 color. I keep trying different combinations but I can't get it to work. Note this is just needed
for modern IE9+ browsers.
Something like this might be the simplest method.
body {
height: 100%;
width: 100%;
background-color: #fff;
background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, #f00 5px, transparent 5px);
}
Did you read the doc about repeating-linear-gradient?
If you try the example they give, you get something that works fine... Just go to this link and read :
https://developer.mozilla.org/fr/docs/Web/CSS/repeating-linear-gradient
Here is their example :
background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
Go to this fiddle, seems like it's working fine...
http://jsfiddle.net/2o3ehav1/4/
Edit : vertical with your colors : http://jsfiddle.net/2o3ehav1/19/
(just try to edit your "pixel sizes")
Hope it helps! ;)
Something similar to this?
background: repeating-linear-gradient(0, transparent, transparent 4px, #333 5px, transparent 5px);
background-color: #222;
I have the following style in my css file to set the background of my html to a soothing gradient. However there was a problem that, if the height of the content is not 100% of the screen, the gradient gets cut off and repeats. So I added the background-attachment: fixed; line so that the gradient fills the page. But now the blend mode is not working. Earlier I had a soothing light color combination due to the background-blend-mode: screen; but now the colors are brighter. How can I fix this? I am using the latest version of mozilla firefox.
body {
background:
linear-gradient(
cyan,
transparent
),
linear-gradient(
-45deg,
magenta,
transparent
),
linear-gradient(
45deg,
orange,
transparent
);
background-blend-mode: screen;
background-attachment: fixed; //added later to fill the background
}
Here is the jsfiddle link.
Expected output
What I am getting
with this your problem is solved
html{
width:100%;
height:100%;
}
body {
background:
linear-gradient(
cyan,
rgba(255,255,255,0)
),
linear-gradient(
-45deg,
magenta,
rgba(255,255,255,0)
),
linear-gradient(
45deg,
orange,
rgba(255,255,255,0)
);
background-blend-mode: screen;
}
Ok, it looks like the 'transparent' in your CSS was going to black-transparent. If you set it to white-transparent then you'll get the desired look. As Vals mentioned, black-transparent is the standard for future reference if you run into this problem again.
Take a look at the fiddle. Should sort you all out.
Fiddle. http://jsfiddle.net/f90vwhw3/3/
CSS to fix:
body {
background:
linear-gradient(
cyan ,
rgba(255,255,255,0)
),
linear-gradient(
-45deg,
magenta,
rgba(255,255,255,0)
),
linear-gradient(
45deg,
orange,
rgba(255,255,255,0)
);
background-blend-mode: screen;
background-attachment: fixed;
}
Is there a way to replicate the following texture/fill using only CSS? I want to use the same kind of diagonal lines over top other containers with different background fills, so I'm hoping there might be a way to do it in CSS without having to create patterns and using them as images.
Any ideas how I might be able to do this? I'm guessing that it'll probably have to be something like this:
<div id="gradientFill">
<div class="linePattern">
<!-- Content goes here -->
</div>
</div>
Is there a better solution? I don't want to run into problems with using alpha/transparency on the diagonal lines and then having the content be transparent as well.
SOLUTION POSTED BELOW.
You can use multiple background images on the button, so you have your standard gradient with the stripy gradient on top tiled using background-size:
.stripy {
background-image:
linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent),
linear-gradient(bottom, rgb(83,84,84) 0%, rgb(181,181,181) 100%);
background-size:50px 50px, auto;
}
The stripes are a bit thick, but with a bit of experimentation it should be possible to get what you want.
A CORRECT SOLUTION:
jsFiddle: If you're not seeing the diagonal lines, it's because jsFiddle doesn't really like external links to hosted images from imgur. Just copy and paste the imgur url in another tap to get it in your cache, then reload the Fiddle.
The key to the solution is the relative positioning of the color background, and the absolute positioning of the texture/line overlay. For future visitors to this post, if you want to overlay a texture on an image, apply:
position:relative
...to your image div, and:
position:absolute
...to your overlay div.
<div id="alert">
Text goes here!
<div class="lines"></div>
</div>
#alert {
position:relative;
padding:10px;
box-shadow:0px 1px 1px #000, 0px 1px 1px #F5BFB1 inset;
background: #ea765a; /* Old browsers */
background: -moz-linear-gradient(top, #ea765a 0%, #d2583b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ea765a 0%,#d2583b 100%); /* IE10+ */
background: linear-gradient(to bottom, #ea765a 0%,#d2583b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0 ); /* IE6-9 */
}
.lines {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background:url(../img/lines.png);
opacity:0.05;
}