I came across this pattern online but it's an image and I'd like to avoid using images as decoration as much as possible.
Any ideas on how to recreate this pattern? (excluding the background texture behind it)
Without cross-browsering, but here's the gist of it:
background-color: gray; /* Fallback */
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
Taken from CSS3 Patterns Gallery. Tweak as needed.
Related
I've heard of this method, but I've never tried it before.
Does this only work on hover/mouseover?
Would this work on, on mouse click?
https://jsfiddle.net/mntrmfsb/349/
So, I would be putting this image into an image sprite, but how does that work?
.playButtonb.active {
border: 3px solid #e77d19;
background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/yNVkI3W.png");
}
Or would I be using something like these?
you need to indicate correctly position of the item you want to show.
Look this example
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 want to make pattern background and a white to black (with transparency) gradient above it. How to work it out and also make it work cross-browser? I'm starting with Mozilla and I've tried to use code below:
background: url(../images/bg_pattern.gif), -moz-linear-gradient( rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95%
Of course this does not work. So how to work it out? How would the code look for other browsers? Does IE support many backgrounds and transparency? I think it doesn't so I'll ask before your answers - how to work it out for IE?
You will need two separate elements, one overlaying the other. The element on top sounds like it should be your gradient. Also FYI here is a great tool for generating cross-browser gradients, just launched this week at An Event Apart:
http://www.colorzilla.com/gradient-editor/
Try this:
background-image: url(images/pattern.png), -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
background-image: url(images/pattern.png), radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174));
I have a working version for everything excepting IE. :/ I don't remember where I found it, so I can not give the proper credit; however, here it is:
background: -webkit-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.8)) fixed, #454040 url(images/grainy2.png) repeat fixed;
background: -ms-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;
background: -o-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;
background: -moz-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;
The first color is your top, the second your bottom, and the third is the color over the pattern (not sure how you would reduce that to transparent). Finally just direct to your pattern.
I'm not entirely sure what ms is for. Like I said, I've been using it for about a few months, but I do not remember the source. I just use them all to make sure they work. Still no fix to IE :/
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;
}