I'm pretty positive this can't be done, but I figured I'd check before moving on to Plan B. I have a <header> that contains a photograph, which can be switched at will by the user whose left edge fades to transparent to reveal the remainder of the underlying color or pattern or whatever... whatever it is, it's also user-supplied so it could be anything.
In to order to retain the design while allowing users without knowledge of or access to an image editor that would apply the mask to the photo they want to use, I'm trying to find a way to use an unedited texture/color along with an unedited photograph to produce the following effect:
All I can come up with right now is to manually apply a 100% white to 0% white mask to the left edge of the photo in Photoshop. But like I said, this can't be done by my target user - I need for them to be able to upload a new image and keep the image-fading-into-background effect.
I have done this successfully with 1 of the 2 elements being a solid background with a pseudo-element as in this CodePen (extremely rough - for proof of concept only). But again, I need BOTH the contents or background of .inner and the background of .outer to be user-supplied (and possibly changed in response browser events). The same Pen also shows a version using -webkit-mask-image rather than the pseudo element, which gets it closer, but is lacking IE support.
Without extensive SVG coding (it's not worth the time -- for this use case -- to keep the variable background pattern/image), is there a way (preferably PURE CSS) to achieve this masking effect without having to edit either image?
As said by #Bryce Howitson you can use mask
.box {
width:300px;
height:200px;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:url(https://picsum.photos/id/2/800/800);
background-size:cover;
background-position:center;
}
.box:after {
background-image:url(https://picsum.photos/id/13/800/800);
-webkit-mask:linear-gradient(to right,#fff 35%,transparent 70%);
mask:linear-gradient(to right,#fff 35%,transparent 70%);
}
<div class="box">
</div>
¯_(ツ)_/¯
IF IE support is a hard requirement, you're pretty much out of luck using pure CSS for masking. You could simply dump support for IE and then proceed with mask-image since it even works in MS Edge. Only your own usage stats can tell you if this is a good idea.
Option 2
Dump the second image and use a gradient overlay of the main image to a flat color background. Which you probably don't want to do, but it's a decent progressive enhancement option.
Option 3
Its a lot of work but you could use Canvas and Javascript to fake it. The basic idea is to slice the main image into individual canvas elements. One element for each pixel wide the image is and then draw the source image into the canvas elements with the correct offset. The slices then stack side by side in the canvas re-making the full image. At this point, you can change the opacity of each slice until you get a gradient fade effect.
For example, if the image fades out to the right side, the furthest right slice is 0% opaque, the next to the left is 1%, then next is 2%, etc
This is untested, but something along these lines except this fades evenly from left opaque to right trasnparent:
var theCanvas = document.getElementById('canvasContainer');
fadeImage = theCanvas.getContext('2d');
for (var i = 0; i < sourceImage.width; i++) {
fadeImage.globalAlpha = (sourceImage.width - i) / sourceImage.width;
fadeImage.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);
}
I've got a blueprint that I want to absolutely position divs on top of in order highlight certain rooms.
Using the alpha channel (rgba), I can still see the blueprint's "ink" underneath, but depending on the color saturation the drawing gets obscured.
I know that I can use background-blend-mode: multiply on the div that contains the blueprint in order to get the desired effect, but it applies it to the entire image because I have to specify the color and the image on the same div. This is hard to explain but easy to show, so I mocked it up with paint.net here:
Again, I can get the desired look using background-blend-mode but would apply it to the entire background image. I want the color from a div to multiply everything that is underneath it.
Well, I started off writing this question and found out that it is a browser support issue. I eventually found mix-blend-mode which is what will apply blending modes to everything "underneath" a div/element, unfortunately, Chrome (as of today) doesn't support it. Firefox, however, does. It is possible to turn it on in chrome going to chrome://flags/ and enable "experimental Web Platform features".
I found the following link pretty helpful in general, I just didn't realize that they talk about both background-blend-mode and mix-blend-mode. http://css-tricks.com/basics-css-blend-modes/
Here is a screenshot of it working in firefox:
An alternative is to use background-blend-mode, and play with the background-image properties.
Not a very nice solution, but can get you going before waiting from Chrome next release
.test {
width: 400px;
height: 200px;
background-image: linear-gradient(lightgreen, lightgreen), url(http://i.stack.imgur.com/DfAyW.png);
background-blend-mode: multiply;
background-size: 100px 140px, cover;
background-position: 10px 40px, 0px 0px;
background-repeat: no-repeat;
}
<div class="test"></div>
I'm working with the Shape5.com Corporate Response Joomla template and been asked to make a change to the color of the four icons for social media in the upper right-hand corner. The demo of this template can be found here:
http://www.shape5.com/demo/corporate_response/
Their CSS for each icon looks like this from the template.css file. I'm just including the first icon to keep this brief, which is for RSS:
#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}
#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}
The rss.png is here:
http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png
I've been asked to use CSS to change the active/hover color from what it is now to red. I'm not sure if this can be done with CSS or not. Can it? Or does this require a new .png file created with the image by the designer to be the desired red color?
I'd also like to understand why this rss.png file has two images of the icon inside of it at different shades and how does the CSS toggle between them to know which to use for hover? Is this a special .png file that allows this, perhaps in a different format than most .png files? Thanks!
The image is known as a sprite image: a single image file consisting of multiple sprites which you apply as a single background image, and position according to the constraints set by the width and height properties on an element. It's just a regular PNG image and is not intrinsically different from other PNG images.
As for actually changing the color of the image to red, that is not something you can do with CSS alone depending on what you mean by "changing the color" — the safest bet is to modify the image to add a new sprite with the desired color. Since it's just a regular PNG image it's a simple matter of extending the canvas another 23 pixels down, rendering the new sprite in the extra space that's created, and modifying your CSS so it looks like this:
#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}
#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}
You can also replace the background:url(../images/rss.png) no-repeat portion with background-position: in your :hover and :active rules as you're really only modifying the background position when using a sprite in CSS:
#s5_rss:hover {
background-position:center left;
}
#s5_rss:active {
background-position:bottom left;
}
Experimental CSS filters are up around the horizon, but without good cross-browser support, you're basically out of luck on that front. If you can handle reduced browser support, go take a look at this overview of CSS filters.
Your current code shows only half the rss.png which conveniently is the exact height of just one of the sub-images within it. When you declare the background: you're telling it to stick the image from the top and hide the bottom half.
On hover, you're instructing it to draw just the bottom half of the image (the hovered state part). To make it a different color, you pretty much need to edit the file (short of having the background image partially transparent and showing a red background through it).
Overall, there's nothing magical going on, just well-documented magic that we all share and use every day.
Currently there is no way to change the colours within an image using css and likely there will either never be or a long way off. There is the potential to do a color overlay but this would not help unless the image you were dealing with was a block colour.
In order to change the color you will need a separate image to reference on the hover styling rule for that element.
The alternative way to do this is to use a sprite, where all the images are loaded as one image and css just focuses on a portion of it depending on the state ie hover, active etc. This is what you mentioned earlier. Have a look at the following links for information on using a sprite, but put simply if you have a 40*40px social icon. You would create a 40*80 image and then in css say use the top half for normal and the bottom for hover. This actually saves time when loading your page and you should always try and use sprites where ever possible, remember the faster the page the better for the user.
http://css-tricks.com/css-sprites/ (good guide on sprites)
http://spriteme.org/ (very handy and will do the work for you - recommended)
Is it possible to add noise to a gradient in CSS?
Here is my code for a radial gradient:
body {
color: #575757;
font: 14px/21px Arial, Helvetica, sans-serif;
background-color: #2f3b4b;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}
What would I add to that to have noise on top of it, to give it texture?
This is by far the most hassle free and best way to implement this. It is purely CSS and very very simple to do, no extra files - nothing. Ok, it's not the best way possible, but it works very well, very reliable (never failed when testing across very old browsers) and very fast to load.
Found it a few months ago, and used it ever since, simply copy and paste this code in to your CSS.
background-image: url(data:image/png;base64,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);
Then add your background color
background-color:#0094d0;
Demo: JSFiddle
Source:
https://coderwall.com/p/m-uwvg
Creating Textures (Noise) Using SVG Filters & CSS Gradients
You want noise in your gradient? You're in luck!
Perlin noise is a type of gradient noise. The SVG standard specifies a filter primitive called <feTurbulence>, which implements the Perlin function. It allows the synthesis of artificial textures like clouds or marble—the noise you want.
Step 1: Define an SVG Graphic
Create a small SVG file called noise.svg.
<svg
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='300' height='300'>
<filter id='n' x='0' y='0'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.75'
stitchTiles='stitch'/>
</filter>
<rect width='300' height='300' fill='#fff'/>
<rect width='300' height='300' filter="url(#n)" opacity='0.80'/>
</svg>
This graphic defines two rectangles. The first is filled with a solid color. The second is translucent with the noise filter applied. The second rectangle is overlayed on the first to provide a noise effect.
SVG Options
Fist and most obvious is that you can change the dimensions of the graphic. However, the CSS background-repeat property can be used to fill an element, thus 300×300 should suffice.
The filter's type attribute can be fractalNoise or turbulence, which specifies the filter function. Both provide a different visual, but in my opinion, the noise filter is a little more subtle.
The filter's baseFrequency attribute can range from 0.5–0.9 to provide a course to fine texture, respectively. This range is visually optimal for either filter in my opinion.
The first rectangle's fill can be changed to provide a different base color. Later, however, we essentially combine this color with a translucent CSS gradient, which also defines a color(s). So white is a good starting point here.
The second rectangle's opacity can range from 0.2–0.9 to set the filter intensity, where a higher number increases the intensity.
At this point, you could tweak the aforementioned options, set this noise graphic as a background image via CSS, and call it a day. But if you want a gradient, like the OP, go to Step 2.
Step 2: Apply a CSS Gradient
Using the background-image property, you can set the SVG noise graphic as the background on any element and overlay a gradient. In this example, I'll apply the noise graphic to the entire body and overlay a linear gradient.
body {
/* white to black linear noise gradient spanning from top to bottom */
background:
linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
url('noise.svg');
}
The linear-gradient() function creates a pseudo image, which is stacked on top of noise.svg. The result is a translucent gradient with our noise showing through it.
CSS Options
First, and most obvious, is that the defined gradient colors can be changed. However, if you want a solid color without a gradient, make the two end-point colors equal. The benefit is that you can use the same noise graphic with or without a gradient throughout a site or among projects.
Multiple images, created with the *-gradient() functions, can be overlayed on the noise graphic and more than two color parameters and angles can be specified in a single gradient function to provide all kinds of cool visuals.
The opacity of the gradient parameters—i.e. rgba() and hsla()—can be increased to intensify the defined color and reduce the noise level. Again, 0.2–0.9 is an ideal range.
Conclusion
This is a highly customizable and very light-weight (~400 bytes) solution that allows you to simply define noise of any color or gradient. Although there are several knobs to turn here, this is only the beginning. There are other SVG filter primitives, such as <feGaussianBlur> and <feColorMatrix>, which can provide additional results.
There's no current way in css to add 'noise' to a background.
An alternative solution would be to create a transparent noise png in your graphic editor. Then apply that graphic as a background to a <div>. You would then need to place that <div> over the entire area of the <body> which should then give an appearance of a gradient with noise.
For the sake of novelty, here is some pure CSS noise without using a data URI:
#box {
width:250px;
height:250px;
position:relative;
background-size:55px 10px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%);
}
#box::before {
content:'';
width:100%;
height:100%;
position:absolute;
mix-blend-mode:exclusion;
background-size:12px 22px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%), -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
left:0;
z-index:998;
}
#box::after {
content:'';
width:100%;
height:100%;
position:absolute;
mix-blend-mode:exclusion;
background-size:15px 13px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
left:0;
top:0;
z-index:999;
}
<div id="box"></div>
Some more information about how this was created: http://jollo.org/LNT/public/css-noise.html
While this doesn't qualify as true noise, a pure CSS3 approach would be using multiple repeating-linear-background selectors, which are often used in pattern generators.
Here are a few examples:
http://jsfiddle.net/andrewodri/eMB6E/
http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
http://lea.verou.me/css3patterns/
With some right combination of backgrounds, angles, color stops, and transparency, a reasonable noise-like effect should be achievable :)
Hope that sets you in the right direction anyways...
Yes, there's currently no CSS-based approach for noise textures. If you're hell-bent on a programmatic (rather than image-based) approach, though, you could try using HTML5 canvas. There's a tutorial here on how to generate noise using JavaScript --> Creating Noise in HTML5 Canvas
However, doing the Canvas approach will result in a much slower experience for your visitors, because A) JavaScript is an interpreted language, and B) writing graphics using JS is extra slow.
So, unless you're trying to make a point by using HTML5, I'd stick with an image. It'll be faster (for you to make and for your users to load), and you'll have a finer degree of control over the appearance.
It's 2023, so here's my answer: the best option would be with a lightweight inline SVG filter and one CSS declaration... which includes the background gradient. No external files, no base64-ing anything. Plus it does a good job of preserving the non-grainy gradient as it doesn't mess up with its contrast or brightness.
The SVG filter would look as follows:
<svg width='0' height='0'>
<filter id='grainy' x='0' y='0' width='100%' height='100%'>
<feTurbulence type='fractalNoise' baseFrequency='.537'/>
<feColorMatrix type='saturate' values='0'/>
<feBlend in='SourceGraphic' mode='multiply'/>
</filter>
</svg>
The CSS code would look as follows:
background: filter(radial-gradient(circle, red, tan), url(#grainy))
What's the catch?
Well, it doesn't really work anywhere at this point (early January 2023), though it should soon start working in Safari. Safari is the only browser to have implemented the filter() function, which allows us to only apply a filter on a background-image layer, without affecting the element's text content or descendants. Right now, even in Safari, it only works on url() images, though it should soon work on CSS gradients as well.
We can still do this and it works cross-browser:
background: radial-gradient(circle, mediumturquoise, darkslateblue);
filter: url(#grainy)
live demo
However, as mentioned above, this filter affects the entire element it's set on, including descendants and text content.
In order to avoid that, we need to move the background and filter declarations on a pseudo, absolutely positioned, behind its parent's content, covering the area of its entire parent - live demo.
This is easily doable and cross-browser, but it would still be nicer to have support for the filter() function, not use up a pseudo just for this and reduce the CSS needed for this to ~15% of what we have to write now with this workaround.
So here are the bug links for this in the other browsers:
Chrome
Firefox
One more thing: if you don't really need the graininess, it's just a nice to have visual enhancement, you could store the gradient in a --grad custom property and have:
div {
--grad: radial-gradient(circle, mediumturquoise, darkslateblue);
background: var(--grad);
#supports (background: filter(conic-gradient(red, tan), blur(1px))) {
background: filter(var(--grad), url(#grainy))
}
}
For anyone interested, breaking down the SVG filter:
this svg only exists to contain the filter, it won't actually be used to display anything, so we zero its dimensions (and ideally also get it out of the flow with position: absolute in the CSS); no other attributes on it are necessary when it's inline (if you want to move it to an external file, you'll have to add xmlns='http://www.w3.org/2000/svg')
the filter obviously needs an idto be referenced, but by default, the filter effect will also spill (relevant for feTurbulence) outside the the element it's applied to by 10% in every direction (default values for x and y are -10% and for width and height are 120%), so we want to restrict it to just the element's area, from 0% to 100% along both axes (alternatively if you don't feel like setting all those attributes, I guess you could set clip-path: inset(0) in the CSS; note that overflow: hidden won't cut it as that only hides the element's content spilling outside its padding-box, but not graphical effects on the actual element, such as those produced by a filter)
first filter primitive creates a noise layer; I don't really understand how this works - there's this article which a lot of people have recommended, but it loses me once it goes from 1D to 2D; what I have noticed is that it's better to switch from the default type value (turbulence) to fractalNoise and that the smaller the baseFrequency value is, the finer the graininess of the noise is (also, don't use integers for this - use 7.01, but not 7)
second filter primitive completely desaturates its input (equivalent to the effect of grayscale(1) or saturate(0)); since we haven't explicitly specified an input, it defaults to using the result of the previous filter primitive - the noise layer; to do this, it switches from the default type for feColorMatrix (which is matrix) to saturate and sets values to 0 (if you have a good mental image of the HSL model/ bicone, you'll know that a saturation of 0% means we always have a grey; how light or how dark, that depends on the lightness, the 'L' in "HSL")
third and final filter primitive blends the desaturated noise with the element the filter is applied on; feBlend takes two inputs, one of which is set to 'SourceGraphic' (note those capitals matter!), while the other one defaults to using the result of the previous filter primitive; finally, the mode we use is multiply (this multiplies the % RGB values of the two layers, pixel by pixel)
This is all that's needed for the filter. There's nothing in there that you don't need.
A lot of times, SVG generators spit out a lot of unnecessary attributes, but this was handwritten and I only included what's really needed for it to work cross-browser.
Building on top of Clint Pachl's answer, I used CSS's mix-blend-mode to get a grainier effect and to selectively punch up the colors of that make up the gradient.
See https://jsfiddle.net/jimmmy/2ytzh30w/ for example code.
Update: I wrote an article about it in CSS-Tricks: Grainy Gradients
It is not possible (even if it was, it'd take a crapton of code tricks to do so) to generate noise textures using CSS alone. There aren't any new CSS3 properties that provide that sort of effect out of the box. A much quicker solution is to use a graphic editor such as Photoshop to do that.
I have a web application whose performance I am working to enhance. In an attempt to do this, I decided to use css sprites. I have placed all of my images in a .png file called images.png.
CSS sprites have worked well for all css classes that just display an image once. However, several of my images need to be repeated. For instance, I have a banner.png image used for the banner background. Whenever I set the background-repeat property, it seems that the image does not repeat. To show my CSS definitions, here they are:
Before CSS Sprites
------------------
.ghwc {
background-image: url(/images/layout/banner.png);
background-repeat:repeat-x;
color:White;
width:300px;
}
After CSS Sprites
-----------------
.ghwc {
background-image: url(/images/images.png);
background-repeat:repeat-x;
color:White;
background-position:60px 319px;
width:300px;
}
My question is, how do I use CSS sprites for repeated images like backgrounds?
Thank you,
My question is, how do I use CSS sprites for repeated images like backgrounds?
You don't. That is simply not possible using CSS sprites. To do that, you would have to be able to specify an area of the image that is to be repeated, and to my knowledge that is impossible in both CSS 2 and 3.
You can do this if you're only background-repeat:repeat-x; as in the example, you just need to make all backgrounds contained within the sprite image container the same width and lay the sprite image file out vertically. Then your background position property will always have the first x position be 0 and the sprite is located with the second y position (e.g. background-position:0 0; background-position:0 -100px; background-position:0 -200px; etc) . This might not work across all browsers if you can't specify the exact height and set overflow:hidden.
Assuming your background image (images.png) shows at all, your code should work. If you want this to render correctly on Opera and Firefox, you'll need to add
background-attachment:fixed;
Edit: I just realized you're probably talking about a specific coordinate set in a "sprite" image comprised of several 'images'. You're not going to get any one particular area of an image to repeat like that. Crop the image to the size you're concerned about, then use the code you have.
If you want to use repeat-x, you must not put several images next to each other in your sprite as the whole sprite is duplicated in x-direction (as you already noticed). But you can put them in one vertical line. (The other way around if you want to use repeat-y. There is nothing like "background-crop" up to now (maybe in CSS4? ;) )