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...
Related
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>
Assuming my linear CSS gradient looks like this:
background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)
It will generate a CSS gradient that looks like this:
How do I make the same gradient but with solid colors without the transitioning between the colors? (using CSS)
Something similar to this:
Thanks
Like this
.gradient {
width: 500px;
height: 200px;
background: linear-gradient(to right,
red 20%,
green 20%,
green 40%,
blue 40%,
blue 60%,
purple 60%,
purple 80%,
yellow 80%,
yellow 100%
);
}
<div class="gradient"></div>
Gradient is created through blending of colors. You can control the blending effect of colors by specifying range for each color like in below example of .flag. In .flag:
the color #00ae00 will be applied till 33.3% of the div
from that point till 66.6%, white will be applied
in the end orange will start from 66.6% till the end of the box
This way you can add as many colors as you want.
But one thing keep in mind, it looks fine when the degree is straight, if you change the angle, in some cases edges of colors may not look smooth (depends upon color and screen density) as you can see in .pixeleted
.flag{
background: linear-gradient(to right, #00ae00 33.3%, white 33.3%, white 66.6%, orange 66.6%);
margin-right: 20px;
}
.pixeleted{
background: linear-gradient(30deg, red 33.3%, black 33.3%, black 66.6%, red 66.6%);
}
div {
width: 290px;
height: 145px;
border: 2px solid #999;
display: inline-block;
}
<div class="flag"></div>
<div class="pixeleted"></div>
you don't have to repeat the colors. It's also possible to write it like this:
background: linear-gradient(to right,
red 20%,
green 0 40%,
blue 0 60%,
purple 0 80%,
yellow 0 100%
);
I have two examples, both of which to my knowledge should be identical.
The percentages are calculated based on the width which is 960px;
Here's the pixel version, which seems to work great.
.pixel {
background-color: #111111;
background-image: linear-gradient(90deg, transparent 40px, #444 20px );
background-size: 60px, 950px;
background-position: 10px, 10px;
}
However the identical percentage based gradient doesn't work:
.percentage {
background-color: #111111;
background-image: linear-gradient(90deg, transparent 4.1666%, #444 2.08333%);
background-size: 6.25%, 98.95833%;
background-position: 1.04167%, 1.04167%;
}
I want to use percentages so that this gradient is fluid when the container shrinks size.
DEMO: http://jsfiddle.net/shannonhochkins/A3Z2L/3/
It looks like the percentages inside the linear-gradient are expected to add up to 100%.
Your second example is saying "within the 6.25% (60px) of the background-size, the first 4.1666% is transparent and the next 2.08333% is gray", but you're not specifying what color the remaining 93.75007% of that 60px should be. (It looks like it just uses the last color for the remaining space, so within your 60-px background-size, you've got 4.1666% transparent and the remaining 95.8334% gray.)
Given that your proportions are 66%/33% in your first example, your second example should be using linear-gradient(90deg, transparent 66.6667%, #444 33.3333%).
The percentage in background-image isn't based on 1000px. It's based on the background size. In this case you want 66.6% of 60px.
.percentage {
background-color: #111111;
background-image: linear-gradient(90deg, transparent 66.6666%, #444 2.08333%);
background-size: 6.25%, 98.95833%;
background-position: 1.04167%, 1.04167%;
}
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'.