I need to change the length of the dash in a border bottom. I want to make the length of each dash 30px. Is there any chance to do this without using any images?
Without any images it's impossible. But it can be done without loading any images — with CSS gradients (which are basically generated images):
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%) repeat-x left bottom;
background-size: 60px 1px;
I am trying to use a gradient background in a column using colgroup. This works in all new browsers except for IE10.
This is my style code:
background: linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%);
The gradient does work on block elements like div.
Is this a bug? Is there a way to fix this?
Is it possible to define a background image and a background gradient on two different classes for the same element?
input[type=password] {
background-image: url(/images/icons/glyphicons_203_lock.png);
background-size: 17px auto;
background-position: 9px 5px;
}
.err input[name] {
background: -moz-linear-gradient(top, #ffdddd 0%, #ffeeee 100%);
}
What happens is the icon is missing when there is an error.
I'm using "less" if that helps at all, what I want to avoid is having to define each icon on each .err element individually, this would be a lot of repeat code.
The way you are using, gradient will override the image, because gradient is also an image so you can use CSS3 multiple backgrounds by separating the image and a gradient like this, it will give you image and a gradient
background-image: url('url'), -moz-linear-gradient(top, #ffdddd, #ffeeee);
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
I'm using following CSS to give gradient effect to the backGround but in IE it doesn't work. how can i make it work in IE8?
background: -moz-linear-gradient(bottom, #000000, #829a90);
background: -webkit-gradient(linear, left bottom, left top, from(#000000),to(#829a90) );
Tested on IE8 and its working:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#829a90');
Also there are some limitations in giving gradient effect in IE because it doesn't supports color-stop and radial gradient. Also it's not guaranteed that all the browsers will support gradients thats why you shouldn't rely on gradient.