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)
Related
I am searching for a pure CSS method for creating transparent text within a box(div,p,etc) where the box is filled with a color surrounding the text, but not the text itself (which would be transparent a la rgba/hsla).
Imagine a div styled in such a way that the text color within is rgba .2 alpha lvl, and the background color is solid, where the background solid color cannot be seen in the text. Of course, a solution using multiple stacked divs/blocks would be greatly acceptable, but should allow for a hover state, so the effect can be switched on/off. In using this, one could apply this div on top of an image or another div that can be seen through the letters.
SO! CSS/html works in such a way that text is always applied on top of a background (called a background for a reason), so, using transparent colors on text color does nothing but show the color of the background. I have tried creating a background with a big box shadow, in order to see if it's ever calculated differently, and it is not (and couldn't think of another method).
Instead of blabbering on with my limited CSS knowledge, I think you get the point, so give me your best! I want this to work in Chrome and Firefox at least.
Stacked Overflow doesn't allow me to put a jsfiddle without accompanied code, and I don't want to put pointless code here just to link to a 'starting point' code.
Instead, here's an image explaining the obvious idea:
Demo Fiddle
You CAN accomplish this in CSS only, but with limited support.
You can set the -webkit-background-clip property, and -webkit-text-fill-color to transparent.
This will only work in webkit browsers however.
e.g.:
div {
color: white; /* Fallback */
background: url(yourimage.png) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
See here for more on background-clip
The background-clip CSS property specifies whether an element's
background, either the color or image, extends underneath its border.
If there is no background image, this property has only visual effect
when the border has transparent regions (because of border-style) or
partially opaque regions; otherwise the border covers up the
difference.
Alternatively- you can use SVG, per this question
How I can put multiple nested colors (or 2 colors precisely) to a div in css?
If it's possible to do that, how I can specify the nesting form, as percentage of each color, position, etc?
I mean the gradients, to make a background like this:
You can do a 50/50 background if that's what you mean, using gradient, e.g.:
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#000000), color-stop(50%,#333));
Or for a full gradient, e.g.:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#000ed8));
Which is pretty straight forward, you just have to add the start and finish color. Also, I'm saving space above but you should of course use -o-linear-gradient, -ms-linear-gradient, linear-gradient as well if you want to be supported on all browsers).
There are also tools available to help you out:
http://www.colorzilla.com/gradient-editor/
You can use the RGB colors in order to choose one specific color:
background-color:rgb(255,255,255)
and playing with the values.
you can also use color codes:
background-color:#FF0F00
That is how you can reach a specific color (which is combined from two different ones). I don't know of any ways to nest them.
If you would like to read more about the subject you can read about it here:
http://www.w3schools.com/cssref/css_colors.asp
Good luck :)
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 am trying to mimic, in IE8, the effect of having both an RGBA background and a box-shadow applied to a div. If I set an opaque background, I can use the Microsoft 'Shadow' filter to successfully achieve the box-shadow effect. With the background set to 'transparent', I can get an RGBA background by applying the 'Gradient' filter. But, if I try to combine both filters like so,
div#translucentBG {
zoom : 1;
background : transparent;
filter:
progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#80464646, EndColorStr=#80464646),
progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=270);
}
then the div will have the correct box shadow but an opaque #464646 background. Simply remove all the Shadow filters, and magically, the div turns translucent again. This is pretty frustrating; since IE renders both effects perfectly separately, I can't imagine why it fails when combining them. I know there are probably workarounds and alternative methods available, but what really interests me is why the above technique fails the way it does.
Explanation
I set up this fiddle for people to see the effect (in IE8 of course).
I believe the reason why is that the gradient is registering as a "fill" value, and when it does, the drop shadow is itself filling in solid behind it. This is in effect taking away the transparency you are probably seeking (that is, it is transparent, it is just showing through to the drop shadow below, which is opaque, and thus covering up the background). Notice how the last div in my example fiddle is not "showing" at all because the drop shadow does not get applied when there is no fill to "shadow" for.
That the drop shadow is in fact filling in behind your gradient is further supported by the fact that when just a border is applied, as in the last div on this fiddle, the drop shadow is going "into" the div as well. So the shadow is not just an "edge" property that does not fill in below the fill of the object.
Box-Shadow Comparison
This fiddle shows the box-shadow implementation.
Note that the specification for box-shadow is different than the behavior seen with the IE Shadow filter. You were not "deluded by the behavior of the box-shadow property in FF/Chrome, which acted like an edge property," because it is an edge property. (Well, maybe you were deluded in thinking IE filters would work the same.) It does not fill in behind the box itself unless the inset keyword is part of the definition (in which case, it only fills to the inside). The box-shadow spec says (emphasis added):
An outer box-shadow casts a shadow as if the border-box of the element
were opaque. The shadow is drawn outside the border edge only: it is
clipped inside the border-box of the element.
This is exactly what you are seeing in FF/Chrome. The IE filter was around long before box-shadow and the way it was implemented was obviously different. Note that I also emphasized in the above quote that the element is treated as if opaque, which means that even a background: transparent will show a shadow (as the example fiddle shows at the bottom). This is also different from the IE Shadow filter.
I'm trying to understand someone's CSS >> HERE <<.
Basically, he has defined his background element with this syntax:
background: url( 'bars.gif' ) 0 -50px no-repeat;
My image is a different size than his, so I am trying to adjust my code to fit my image. However, the w3schools info on CSS Background shows that this format should be used:
background: #ffffff url('img_tree.png') no-repeat right top;
Where is the overload info for background located?
Good question.
Short answer: The order is irrelevant to the final product.
Background is shorthand for five different properties.
background-color (# followed by digits or a named color)
background-image (url('url goes here'))
background-repeat (repeat, repeat-x, ...)
background-attachment (fixed, scroll)
background-position (location, percent, or pixels)
Notice that each option contains a unique formatting. This allows the renderer to understand the declaration without relying on a specific order. Also, any parameters unspecified are set to the default.
W3schools suggests a format to reduce the cognitive load on developers (which obviously didn't work in this case). I would suggest that you stick with W3's suggestion to hopefully avoid this confusion in the future.