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
Related
I want to create a legend using html, css which contains change of color gradient from green to yellow to red. I have tried using linear gradient property of css. However, what I got so far is given below:
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
}
<div id="color_range"></div>
My code for color gradient
I need a figure like this:
How can I make a legend like above?
Simply change: background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
To: background: linear-gradient(red,yellow,green);
You can also change it to: linear-gradient(to top, green,yellow,red); but I don't think that to top is necessary
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(red,yellow,green);
}
<div id="color_range"></div>
To understand how linear-gradient works in CSS please read: CSS Gradients
Also take a look at this page that can be helpful when using CSS gradients: https://www.colorzilla.com/gradient-editor/
You can try this.
#color_range{
height:280px;
width:40px
background:linear-gradient(red,yellow,green);
}
You can also use the color codes for these colors .
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 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've got an ordered list, and I'm trying to make zebra stripes for its background. I'm using a repeating linear gradient for the background, but I keep running into a really weird bug in chrome. The long the list is, the blurrier the stripes get; it's usable when there's less than ~50 items, but gets too blurry to recognize after that. When there's less than 10 items, it's really crisp.
html:
<ul class="test">
<li class="subtest">foo</li>
<li class="subtest">bar</li>
<li class="subtest">baz</li>
<li class="subtest">foo</li>
<li class="subtest">bar</li>
<li class="subtest">baz</li>
etc...
</ul>
css:
.test{
background-image: repeating-linear-gradient(
180deg,
#ffffff 0px,
#ffffff 50px,
#f5f5f5 50px,
#f5f5f5 100px);
}
.subtest{
height:50px;
}
jsfiddle for example: http://jsfiddle.net/yLLF2/
Remove some elements from the list to see how it's supposed to look.
I originally had it working by styling the elements directly with :nth-of-type(2n), but users can dynamically hide/show elements, which breaks that implementation.
The bug only appears in chrome. Is there any way to fix this? Googling got me nowhere.
You are not stating the size of the background. Should be:
.test {
background-image: repeating-linear-gradient(
180deg,
#ffffff 0px,
#ffffff 50px,
#f5f5f5 50px,
#f5f5f5 100px);
background-size: 100% 100px;
}