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
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 used a css generator to create
background: radial-gradient(ellipse at center, rgba(49,35,174,1) 0%, rgba(125,72,195,1) 50%, rgba(125,72,195,1) 50%, rgba(201,109,215,1) 100%);
It is not displaying correctly. The gradient is rendering as stripes of the two colors. Is there a way to fix this?
Just noticed that gradient in Chrome is't equal. Using this css
background: linear-gradient(to right, #00a4e4 0%, #00a4e4 50%, #369044 50%, #369044 100%);
In my case the left part is 657px, and the right part is 650px. This happen only in Chrome.
Fiddle
Any fix for this?
Consider this page: http://d.pr/i/GA5V
The problem is about these gradient of the page content. In this screenshot, the gradient is as follows:
linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, rgba(0,0,0,1) 1000px);
There are 2 problems:
1 - The extremes of the gradient (0px and 1000px) should not go black. They should go transparent, but by this I mean that the extremes of the white div that is wrapping the page content should be transparent and show the background of the main page (which is a sort of dark image texture). If I put rgba(0,0,0,0) in the extremes, the background will be transparent to the white div (resulting in a completely white div). It should be something like:
linear-gradient(to right, MakeCurrentElementTransparent 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, MakeCurrentElementTransparent 1000px);
2 - The gradient doesn't seem to be very smooth. I can see vertical color bars in it. Is there a way to make these linear-gradients more smooth (I mean, make the color transition more smooth) in CSS3?
Solving problem #2, I got it to be smoother by doing it with percents, instead of pixels:
linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) calc(100% - 30px), rgba(0,0,0,1) 100%)
Original
New
Old:
New:
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.