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;
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 have a gradient that I am currently using that I would like converted from -webkit to the default linear-gradient. I have tried using all of the CSS generating tools online to import the code in order to see the other browser specific variants, but for some reason when I import the code the gradient in the results section just becomes white.
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
JSFiddle Sample
Use
.sexy_line {
background: linear-gradient(to right, white, black, white);
}
See this MDN article for more info on linear gradients.
DEMO
.sexy_line {
margin: 25px 0;
height: 1px;
background: black;
background: linear-gradient(to right, white, black, white);
}
<div class="sexy_line"></div>
I use ColorZilla's Gradient Editor all the time since it spits out cross browser code and is super easy to use.
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'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.
My Boss give me an image (please see below) and told him I would make his site look the same. Here is my code, but it doesn't look like the image:
HTML
<div class="clearfix" id="footer">
<ul>
<li>Become a Virtual Active Facility</li>
<li>About Us</li>
<li class="last">Contact</li>
</ul>
</div>
CSS
#footer {
background: -moz-linear-gradient(left center, white, white) repeat scroll 0 0 transparent;
margin-bottom: 25px;
margin-top: 25px;
opacity: 0.6;
padding: 10px 25px;
width: 914px;
}
How can I get the result to look the same?
Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.
In the final 2014 syntax:
background-image: linear-gradient(to right, transparent, white);
Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.
try it:
background: -moz-linear-gradient(left center, transparent, white) repeat scroll 0 0 transparent;
You need to use alpha (rgba) look at that, may help you: CSS3 Transparency + Gradient
This one works for me
background: -moz-linear-gradient(
left,
rgba(0,0,0,0.001) 0%,
rgba(201,201,201,1) 50%,
rgba(0,0,0,0.001) 100%
);
I use it to add some fade effect on both side of my hr