How would you make a radial gradient occupy the entire body?
At the moment i can make the gradient just fine, but the problem is that the gradient only occupies roughly 100px by 100px. The body background is set to 100%, but still no luck.
Any ideas? Below, is the CSS i'm using at the moment.
body {
background-color: #2b616d;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(99%, #568b93), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
background-image: radial-gradient(center center, circle, #568b93 99%, rgba(0, 0, 0, 0) 100%);
}
Edit1:
It seems Firefox is working just fine with the above code, and rather it is Webkit who is having the actual problems.
Any help would be much appreciated!
Edit2:
According to this link: http://webkit.org/blog/175/introducing-css-gradients/
My use of webkit's "point" is screwed up.. specifically, the radius after each point. The problem is though, that this seems to be an integer only value, as percentages do not seem to work.. Eg, i am trying to make the radius 100%, but only pixel values seem to apply.. any ideas?
For the Mozilla-ish syntax, try this:
[-moz-]radial-gradient(center center, circle cover, #568b93 99%, rgba(0, 0, 0, 0) 100%)
^^^^^
I don't know what the Webkit equivalent is. If 'cover' doesn't work, try 'farthest-corner'.
Related
What I want to do is fade only left side of the image, and the whole bottom. Currently I have:
mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, transparent 100%);
Which works perfectly for the left side of the image, but how can I apply the same to fade the bottom of the image (top to bottom)?
Use multiple mask layers:
img {
--f :40px; /* control the fading */
-webkit-mask:
radial-gradient(at 0 0,#000,#0000 70%) 100% 100%/var(--f) var(--f),
linear-gradient( 90deg,#000,#0000) 100% 0/var(--f) calc(100% - var(--f)),
linear-gradient(180deg,#000,#0000) 0 100%/calc(100% - var(--f)) var(--f),
linear-gradient(#000 0 0) 0 0/calc(100% - var(--f)) calc(100% - var(--f));
-webkit-mask-repeat: no-repeat;
}
<img src="https://picsum.photos/id/1069/200/200" >
I want to add radial gradient to a photo, starting from the top right part of the image. I have tried a lot of combinations, here is what I managed to do:
background: radial-gradient(circle at top right, #ffffff 0%, #000000 100%), url("../images/banner-image.png");
My problem is: it doesn't show my photo. Any ideas what could be wrong?
You're using solid colors rather than colors with transparency in order to see the image below.
Use rgba colors instead
body {
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), blue), url(http://www.fillmurray.com/284/196);
height: 100vh;
}
In this example I have a gradient of 2 colors, alignd to right.
background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);
Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?
Sure, just add color stops at every (100/numColors)%
div {
background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
width: 100%;
height:64px;
}
<div></div>
You can use multiply background, like this:
background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);
Also see this codepen for much combinations.
Late answer but no doubt it will help someone else in the future...
I have found a good website called CSS Gradient that generates your gradient color with full control and allows you to copy the CSS code.
This gradient was generated by this website:
div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);
<div>
</div>
I have created a SCSS mixin based on the Bootstrap LESS mixin that will create a diagonally striped background. However, no matter how big I make the "tile" for the stripe, there always seems to be a 1px mis-alignment. I'm guessing that it has something to do with sub-pixel calculations, but I'm wondering if someone can point me in the right direction.
http://codepen.io/allicarn/pen/ncHod
Here's a screenshot of the codepen (Chrome) with one repetition of the background highlighted. Basically the 1px artifact originates from either edge not matching up to the next "tile"
Another goal would be to modify the angle and have it work, but that's just bonus points ;)
Not sure about support in older browsers, but an easier solution is
background-image: repeating-linear-gradient(45deg, gray 0px, gray 25px, transparent 25px, transparent 50px, gray 50px);
Anyway, I can see still artifacts at pixel level
At least this way you get the bonus about working at any angle ...
Also, looking at the codepen seems solved by increasing the size of the body:
body {
#include diagonalStripes(#aaa, 50px);
height: 1000px;
}
updated codepen
if this is the case, that would mean that the problem arises from the background extending beyond the element ?
Here's another type of LESS mixin for diagonal striped background:
.stripes(#angle: -45deg, #color: rgba(0, 0, 0, 1), #size: 4px /* size must be an even number */) {
background-image: -webkit-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -moz-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -ms-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: -o-repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
background-image: repeating-linear-gradient(#angle, #color, #color 25%, transparent 25%, transparent 50%, #color 50%);
.background-size(#size #size);
}
Hope it helps...
I would like to know if it is possible using CSS alone to be able to do a border-bottom with gradient going from right to left and not from the center outwards.
In my search for the answer, I have found a JSFiddle link which shows that it is possible to have a border gradient going from top to bottom which is transparent;
Method One
/* Using only background gradients */
.one {
width: 400px;
padding: 20px 25px;
border-top: 5px solid #000;
margin: 40px auto;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:
-moz-linear-gradient(#000, transparent),
-moz-linear-gradient(#000, transparent)
;
background-image:
-o-linear-gradient(#000, transparent),
-o-linear-gradient(#000, transparent)
;
background-image:
linear-gradient(#000, transparent),
linear-gradient(#000, transparent)
;
-moz-background-size:5px 100%;
background-size:5px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
Method 2
/* Using pseudo-elements and background gradients */
.two {
position: relative;
width: 400px;
padding: 20px;
border: 5px solid transparent;
border-top-color: #000;
margin: 40px auto;
}
.two:before,
.two:after {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
width: 5px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
}
.two:after {
left: auto;
right: -5px;
}
I do not understand how the above CSS is letting the page know the direction and I assume it is just a little, simple, under-looked edit, of which I cannot seem to find at this moment in time and therefore I am making this question to ask for some help.
I would also like to know if this will work if the border is dashed or dotted?
Thank you for any help and/or advice in advanced.
Best Regards,
Tim
NOTE - Edited the CSS to have the gradient span across the width of the element, not just the border width.
This is what I've come up with, which is more or less what h3n is suggesting with more vendor-specific properties filled-in:
border-right: 5px solid #000; /* Don't forget to modify to the right border. */
background-image:
-webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image:
-webkit-linear-gradient(180deg, #000, transparent),
-webkit-linear-gradient(180deg, #000, transparent)
;
background-image:
-moz-linear-gradient(180deg, #000, transparent),
-moz-linear-gradient(180deg, #000, transparent)
;
background-image:
-o-linear-gradient(180deg, #000, transparent),
-o-linear-gradient(180deg, #000, transparent)
;
background-image:
linear-gradient(90deg, #000, transparent),
linear-gradient(90deg, #000, transparent)
;
-moz-background-size: 100% 5px; /* This get flipped. */
background-size: 100% 5px; /* This get flipped. */
background-position: 0 0, 0 100%; /* The last argument gets flipped. */
background-repeat: no-repeat;
http://jsfiddle.net/vqnk9/1548/
MDN has a reasonable tutorial on how to handle this cross-browser, as well.
Now, if you look closely, you may notice that the non-vendor background-image uses 90deg instead of 180deg. My original thought was -90deg, so of course that makes sense to me somehow (?), but as to why they are different, here is the W3 spec (see the last quote for the reasoning behind this difference):
4.1.1. linear-gradient() syntax
The linear gradient syntax is:
<linear-gradient> = linear-gradient(
[ [ <angle> | to <side-or-corner> ] ,]?
<color-stop>[, <color-stop>]+
)
<side-or-corner> = [left | right] || [top | bottom]
The first argument to the function specifies the gradient line, which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so, it defaults to ‘to bottom’.
The gradient line's direction may be specified in two ways:
using angles
For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.
using keywords
If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.
If the argument instead specifies a corner of the box such as ‘to top left’, the gradient line must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners of the gradient box. This causes a color-stop at 50% to intersect the two neighboring corners (see example).
Starting from the center of the gradient box, extend a line at the specified angle in both directions. The ending point is the point on the gradient line where a line drawn perpendicular to the gradient line would intersect the corner of the gradient box in the specified direction. The starting point is determined identically, but in the opposite direction.
And from MDN, some administrivia on why the degrees differ (blame Apple?):
A last semantic curiosity still exists between the prefixed variants
and the unprefixed proposal. Following the initial Apple proposal, the
prefixed variants of the syntax all uses the an <angle> defined like
polar angles, that is with 0deg representing the East. To be coherent
with the rest of CSS, the specification defines an angle with 0deg
representing the North. To prevent sites using prefixed version of the
property to get suddenly broken, even when adapting to the otherwise
forward-compatible final syntax, they keep the original angle
definition (0deg = East). They will switch to the correct spec when
unprefixing the property. Also, as they aren't incompatible, Gecko
supports, prefixed, both the syntax with the to keyword and without.
Here again, the syntax without the keyword will be dropped when
unprefixing.
at least for webkit this sets the angle so its from right to left:
-webkit-linear-gradient(180deg, black, white)