Related
I am having an issue where a gradient which transitions from transclucent (~.1 opacity) on the edges of the page to solid white appears lighter on the edges in Safari. In Chrome and Firefox the edges are the darkest. In Safari it seems that a white background is being assumed that it added to the gradient. Thus, the edges are lighter than the middle of the gradient, as the gradient transitions from translucent to opaque white.
The page in question can be found here.
The relevant CSS is:
background: linear-gradient(to right,
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%);
A screenshot of this CSS looks like this: I have tried adding a "fallback color" (really a background-image) to the CSS to help Safari, since it seems to be assuming a white background which, when added to the translucent rgba(100,100,255,0.15) makes for lighter edges. However, this just makes everything darker and doesn't overcome the lightness of the edges. The result of that can be seen in the below screenshot. The CSS for this was:
background: linear-gradient(to right,
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%)
rgba(100, 100, 255, .15);
This looks like:
BUG! Left here in hope that it will attract attention and perhaps a fix.
The problem is that chrome, makes(i have checked!) the first half of the gradient smaller than the second one. My code is:
background: linear-gradient(to left, #ffffff 50%, #f5f5f5 50%) fixed;
Also tried:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3236), color-stop(50%,#ff3236), color-stop(50%,#000000), color-stop(100%,#000000));
background: linear-gradient(to left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 50%,#ffffff 100%);
Edit/Update: It is indeed a bug - updates are for clarity (top 2 blocks are divs, each 50% width, of screen - bottom is split with gradient):
1) Visual representation of the bug:
2) Thanx to #elstgav for a putting up the a Codepen Test
As of now (2016-11-02), This issue ssems to be fixed, I just tested these pens :
http://codepen.io/elstgav/pen/guotz
http://codepen.io/gliesche/pen/GoWMVO
in Chrome Version 54.0.2840.71 m,
and they all work.
However, Chrome still seems to have some issues with scaling gradient backgrounds when they are repeated:
SO link: Chrome not updateing background-size gradient properly on resize
Chrome BT: https://bugs.chromium.org/p/chromium/issues/detail?id=604875
I need help to create the styling shown in the image above which is a graphic design of what I am needing to do. The bottom left hand corner shading for the panels shown in the image above is my real sticking point.
I have tried all sorts of generators but I just can't get close enough with radial gradients.
As you can see I have a number of panels (actually 5 in total) lined up next to each other, each panel is a different width potentially and will resize with borwser view port sizing so providing a background image is not really an option.
I have a repeating transparent background image that creates the texture effect that works fine so I am not concerned about the texture effect but I am totally unable to create the bottom left corner darker shading effect and I need to get as close as absolutely possible using css. I have been tearing my hair out over this for days.
The main green colour hex code is #3F4B0B
My css currently looks like this
#mixin forest-green-texture{
#include background-image(url("texture.png"), linear_gradient($dark-green, $light-green));
}
.footer-box{
#include banner-color;
#include forest-green-texture();
width:18%;
float:left;
}
The linear gradient just doesn't cut it! It was my last attempt and totally wrong
I am using SASS if that makes a difference
I got pretty close using this tool http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html
which gave me
/* IE10 Consumer Preview */ background-image:
-ms-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Mozilla Firefox */ background-image: -moz-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%,
#000000 100%);
/* Opera */ background-image: -o-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* Webkit (Safari/Chrome 10) */ background-image:
-webkit-gradient(radial, right top, 0, right top, 970, color-stop(0, #3F4B0B), color-stop(0.7, #3F4B0B), color-stop(0.9, #3F4B0B), color-stop(1, #000000));
/* Webkit (Chrome 11+) */ background-image:
-webkit-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
/* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle farthest-side at right top, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);
I know the colours are slightly wrong, I'm not bothered about that I can adjust them but the above wasn't really much better than a linear gradient.
UPDATE
This is a screen shot of what I have managed to achieve so far
As you can see, the shading just isn't right.
The css I have for this is
background-image: url("texture.png"), linear-gradient(to right top, black 0%, rgb(70, 84, 12) 50%, rgb(82, 97, 14) 100%);
All help greatly appreciated
I would suggest putting the textured image on the background of the container div of the columns then for each column use that line shadow image with transparent background as the background property for each colum.
<style>
.container {
background: url(textureImg.png) repeat;
}
div[class^="col"] {
background: url(lineShadowImg.png) no-repeat;
}
</style>
<div class='container'>
<div class='colOne'>
//your content
</div>
<div class='colTwo'>
//your content
</div>
<div class='colThree'>
//your content
</div>
</div>
If you need to tweak the positioning of the line just use background-position. This will allow your columns to be as wide as they need to be without having to change your image for each.
http://www.templatemonster.com/demo/39055.html
I've seen bunch of websites having those natural gradient on their backgrounds while surfing the internet. The thing I do not understand is... how did they do that? I don't think it's a photoshop-created image file cuz the gradient seems like re-sizing naturally and properly according to the screen size of my web browser... So, I thought it must be CSS... but I cannot find which code is actually doing the job :/
Could someone tell me how it's done?
It is a simple background image.
style.css, line 6:
body {background:#fff url(../images/body-bg.jpg) 50% 50%; ...
Here is a CSS3 solution on jsFiddle.
Over time this will be preferable to heavy background images: creating them, maintaining them, serving them, downloading them, caching them. With CSS3, these steps are no longer necessary.
Instead, just use CSS3 radial-gradient, and look up what you need with a generator.
Here is the code:
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #00A3EF 100%);
A. For now, it requires vendor prefixes, so that it can render cross browser.
B. Is it hard to write? No. It is trivial! This is also the new way of CSS3. Look up a "CSS3 Generator #what you need#' In this case it was a radial-gradient. But you can do the same for box-shadow, text-shadow, transform, animation, etc.
Here is one example of about a hundred diverse CSS3 generators.
Here is another jsfiddle involving opacity, it is getting closer to the example image.
Let's say the height of the div is 34px and the width is 480px. The div should look like this:
and I don't want it to actually use an image, just CSS. Is it possible?
It is with CSS3. There's even a handy gradient generator which takes the guesswork out of it. Of course, this is completely unsupported in IE8 and under.
Edit
For the sake of completeness, as sluukkonen mentioned, IE does support gradients in CSS using the filter filter:progid:DXImageTransform.Microsoft.Gradient.
It is possible with CSS3;
Example: (black and grey)
mydiv
{
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.15, rgb(189,189,189)),
color-stop(0.58, rgb(0,0,0)),
color-stop(0.79, rgb(0,0,0))
)
-moz-linear-gradient(
center bottom,
rgb(189,189,189) 15%,
rgb(0,0,0) 58%,
rgb(0,0,0) 79%
)
}
But this only works in Mozilla and webkit browsers, IE8 and under will ignore this.
Hope it helps :)
There are ways to do this with -webkit-gradient and -moz-linear-gradient 'functions' as values of background-image. These use different syntax but will be standardised if the gradient spec makes it into CSS 3's final release.
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);