background: -moz-linear-gradient(center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent;
I tried background:-webkit-linear-gradient (center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent;
for chrome, but it didn't work. Likewise for IE, I tried ms-linear-gradient with the same values, it it didn't work as well.
There is an excellent tool available for generating css for gradients here:
http://www.colorzilla.com/gradient-editor/
For other css3 you can use:
http://www.css3generator.com/
Either use this awesome gradient app or use css3please.com.
Know that the linear-gradient syntax has recently changed:
keywords for starting points (center, bottom) have been changed into end points, prefixed with the "to" keyword (to center, to botom);
angles now start with 0 at the top of the circle and go clockwise.
MSIE10 will support the new syntax when you omit the prefix.
Related
I'm using the background-image: linear-gradient css property to create multiple color strips for a site background.
Usually gradient stops are defined by percentage, but I needed pixels in my site, so I managed to change it to pixels using the method lea Verou used in her patterns
The problem is that the end of each color is a bit blurry. In Firefox it's less noticeable, but in Chrome it's very noticeable.
Is there a way to handle it?
I noticed that when I change the 'deg' from 180 to 45 the ends look great. But unfortunately I need the stripes to be horizontal :)
My code: http://cssdesk.com/c6mGM
Almost a year later and I run into the same bug in chrome v36. I produced a work around here: http://codepen.io/davidgailey/pen/ncrKB
or here if you prefer:
https://gist.github.com/davidgailey/8fc1bd1a09747429a3ad
The work around uses background-size, background-position, and linear gradients.
background-size: 100% 150px, 100% 150px;
background-position: 0 0, 0 bottom;
background-image:
linear-gradient(#000,#000),
linear-gradient(green, green);
Viola! nice crisp horizontal stripes. It could use some work to be more future-friendly.
I hope this bug is fixed soon but in the mean time, feel free to use my pen as a start.
I need a little help with breaking down someone's shorthand to longhand.
Here's what I've been given:
background: url("img.png") repeat scroll 0 0%, -moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent;
I've gotten this far:
background-image:url('jAGNPCMaDe9LJ5wqwVhLimg.png');
But the rest is definitely greek to me.
I'm curious about the -moz-linear-gradent(). Is this something all browsers recognize? And I'm guessing the colors in the parenthesis must apply a gradient effect (deducing from -moz-linear-gradient)
And what does "repeat scroll 0 0%" do?
As cimmanon has mentioned, you're actually looking at two backgrounds combined into a single background shorthand declaration. The comma separates the two layers. This combination of multiple backgrounds is new to CSS3. So, you have two distinct background layers in shorthand notation:
url("img.png") repeat scroll 0 0%
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent
And each expands to its own set of values.
The correct longhand expansion of your code is this:
background-image: url("img.png"), -moz-linear-gradient(#4E4E4E, #1C1C1C);
background-repeat: repeat, repeat;
background-attachment: scroll, scroll;
background-position: 0 0%, 0 0;
background-color: transparent;
Notice that, again, commas are used to separate multiple background layers. There is only one background-color because you cannot have multiple background colors.
Also as mentioned, the -moz- prefix is Mozilla's vendor extension used for its experimental implementation of linear gradients. However, unless your background declaration is repeated for all other applicable vendor extensions, your code will only work in Mozilla browsers and no other browser because of the vendor extension.
Note also that if you use the longhand code above instead of the shorthand, unsupporting browsers will only ignore the background-image declaration and apply everything else, unlike the shorthand which unsupporting browsers will ignore completely.
You're actually looking at multiple backgrounds there. The comma is the separator.
url("img.png") repeat scroll 0 0% /* on top */
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent /* on bottom */
The gradient is taking the spot of the background image. The rest should be easy to figure out by reading up on the background property.
https://developer.mozilla.org/en-US/docs/CSS/background
Take a look at the Mozilla reference here and the main section here. These should provide you with a good "way in" and an explanation of the -moz-XXX prefix.
here's your longhand:
#element{
background-image:url(img.png);
background-repeat:repeat;
background-attachment:scroll;
background-position:0 0;
background-color:transparent
background-image:-moz-linear-gradient(#4E4E4E, #1C1C1C);
}
The -moz-linear-gradient only works in Mozilla. That is why it is pre-fixed with -moz-. As you guessed right it makes a linear gradient as background, instead of the picture. But only in Mozilla, all other browsers use the background rules. The options of the gradient don't need to be repeated, because they are the same as for every other browser.
I want to have 2 different gradients in the background of my site - I am using the following to call one gradient - how do I declare more than one (i.e. to show a different gradient on the left and a different one on the right)
body
{
background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#fff));
background: -moz-linear-gradient(top, #E0E0E0, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#ffffff');
}
So I want want the left side of the background to be a different colour gradient to the right.
Any ideas?
Cheers!
<void after update of your question>
You should use a [multi-background](http://www.w3.org/TR/css3-background/#layering)
declaration where the first and second values are separated by a comma like
`background: value1, value2;`.
Also the background on top (here a gradient) should whether not recover entirely the
first one or have some transparency, obviously.
</void>
Here's a fiddle using the :before pseudo to create something to stick a background on without creating an extra element in the HTML code. If linear-gradient is supported by a browser, then :before is also supported AFAIK so no problem here.
http://jsfiddle.net/URWD8/
The main trick is creating a box half-size and well positioned (and then having text content above this absolutely positioned box with z-index ... by trial and error I admit).
And use also declarations with the other vendor prefixes: -o- is lacking here and also the one without prefix linear-gradient for IE10 and future versions of other browsers. See http://caniuse.com/#feat=css-gradients
OT:
Fun and/or abusing of :before and :after :) with http://css-tricks.com/examples/ShapesOfCSS/ and http://ie7nomore.com/#CSS2 (search for those pseudos in both pages)
My Firefox is acting weird. I use a simple 4x4px transparent PNG for a div background (as usual). In Chrome, Safari, Opera and even IE it looks great but in FF it's "broken". Here is a picture to show you what I'm talking about: http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G.
I use image and gradient for the background but if I only used the image, it causes the same result.
Here is the code:
#wrap {
background-color: #f5f5f5;
background-image: url(../images/general/bg-wrap.png);
background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb));
background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb');
background-position: 0 0; background-repeat: repeat;
}
When I used only the background-image, it looked like this:
#wrap {
background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat;
}
And this is the bg-wrap.png: http://cl.ly/0i3i1R0P2R0i1K1h1V1P. I don't understand what's going on...
Everyone's right about the Firefox bug and background image tile dimensions -- I was having the identical problem with a tile that was 16p x 16px. Nealio's answer seems to be correct, but it's not a question of resolution. Rather, take your tile and literally duplicate it so it repeats itself horizontally and vertically, and then use that tile as your background image.
For example, my background image is a simple tile of a very small "checkerboard" with alternating gray and white squares. The first image was the bare minimum to tile the pattern infinitely, so each "checker" measured 8px x 8px, resulting in a background image of 16px x 16px. This looks fine everywhere except Firefox, where it displays the same zig zaggy jaggy rendering as yours did.
After reading Nealio's response, I took that first pattern tile and doubled it so that it was 4 checkers x 4 checkers (8px X 4 = 32).
And voila! Same background appearance, but just a slightly larger tile.
The only thing I can think of is that a number of years ago, early versions of Firefox had trouble repeating background images that were too small (less than about 16x16).
Perhaps this is a new incarnation of that bug when combined with a gradient fill css..?
Just rule this out by testing it with a larger background image.
That is weird...
I set up a fiddle, and it works fine like this: http://jsfiddle.net/will/KMVvT/
Do you think it could be something else interfering?
You should not seperate the mozilla and webkit features with a comma after the closing bracket. Also the image path should be encapsuled within quotes.
I had the problem, that the image was not displayed, but could be viewed with in FireBug. The reason was the adblock plus extension. After disabling for that page (or general) it was displayed, again.
Give the css code for rounded corner of div.
i want to create the rounded corner of div but only upper corner.
CSS rounded corners are done using the border-radius style.
border-radius: 5px;
If you want to do specific corners, you can split it out into four separate styles (border-top-left-radius, etc) or specify four values for the basic border-radius style:
border-radius: 5px 0 5px 0;
border-radius is supported by current versions of all browsers, but older versions may need a vendor prefix (eg -webkit-border-radius or -moz-border-radius), and may also have different syntax for the separate four corner styles.
Older versions of IE (IE8 and lower) do not support it at all, but there is a good hack to make it work for them called CSS3Pie
Hope that helps.
This is a very good site for creating the CSS code for border radii
http://border-radius.com/