I'm aware of multiple other issues regarding an issue with using transparent as a colour value in Safari and needing to use rgba(255, 255, 255, 0) as an alternative, but it's not working for me. I'm using the gradient as a "Show More" fade, which has a dark gray background, and the gradient still doesn't look smooth in Safari:
And in Chrome:
Demo: CodePen
The :after gradient is background-image: linear-gradient(rgba(255,255,255,0) 0%, #2b2b2b 100%) and the section background colour is #2b2b2b. What do I need to use for the gradient instead?
Try fading from black (instead of white) to #2b2b2b:
background-image: linear-gradient(rgba(0,0,0,0) 0%, #2b2b2b 100%)
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:
I need to create a square element with gradients to achieve same way as border or box-shadow, because when skewing and rotating the element a slight line appear on the border.
As far as I can get is using multiple gradients with different directions, but it looks like it's not possible (or I don't know how)
I have tried with this but it doesn't work (with its vendor-prefixes):
background:
linear-gradient( top, white 0%, white 5%, red 5%, red 95%,white 95%, white 100%),
linear-gradient( left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%)
;
Have created a codepen to show what want to achieve and why can't use border (with box-shadow still the same issue)
I have also tried with an :after and it works, but I need an approach without :after pseudo-element.
Thanks!
Try using the :after element with the middle color set as transparent.
Thanks to Ilya Streltsyn I solved the problem.
The thing is, when using gradients, the order of the code is important. So basically will work:
background:
-webkit-linear-gradient( top,white 0%, white 5%, transparent 5%, transparent 95%,white 95%, white 100%),
-webkit-linear-gradient( left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%);
}
Codepen here
I created a background in photoshop it is awesome but the problem when I open the website the background takes time to load, So I'm asking if there is a way to mix two colors in CSS background as gradient tool do in photoshop?
you can set the css background to a gradient and produce a similiar effect as in photoshop
example gradient
background-image: -webkit-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -ms-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -o-linear-gradient(to bottom right, red, rgba(255,0,0,0));
background-image: -moz-linear-gradient(to bottom right, red, rgba(255,0,0,0));
This radial gradient is not working on firefox:
background-image: -moz-radial-gradient(bottom center, 900px 900px, #7dd134 0%, #137f1e 90%, #137f1e 100%);
It is Mozilla`s bug they do not support defined size radial gradient.
Here is the bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=627885
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%
);