Related
This is what I currently have. The image and radial-gradients so far are working, but I'm not sure how to add the horizontal and vertical radial-gradients. What I still need to add are radial-gradients with a size of 5% in the vertical and horizontal positions placed at 90% and 10%. with the color being white stopping at 15% followed by the color rgba(0,0,0,0) stopping at 40%. I'm just unsure how to get the vertical and horizontal positioning. The problem doesn't specify a shape for the radial-gradient either. enter image description here
body {
background: radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%), radial-gradient(circle closest-corner at 80% 40%, white 15%, rgba(0, 0, 0, 0) 30%), url(https://i.stack.imgur.com/epG4I.jpg);
background-color: rgb(151, 151, 151);
}
I'm looking to give an element a background with repeating, 1px wide diagonal stripes. It seems that repeating-linear-gradient should be able to do this, but when rendered in Safari this:
background-image: repeating-linear-gradient(
45deg, black, black 1px, transparent 1px, transparent 3px
);
Looks like this:
#thing {
height: 200px;
background-image: repeating-linear-gradient( 45deg, black, black 1px, transparent 1px, transparent 3px);
}
<div id="thing"></div>
It looks as though the browser's doing a poor job of aliasing, resulting in an uneven banding pattern. Any ideas on how I might be able to fix this, or to accomplish what I'm looking to do another way?
A little more elabourate explanation of the conundrum here: according to the Pythagoras principle (and its triples), it is impossible to have a square (which is simply two right triangles fit together) whose sides are integers that has a diagonal whose length is an integer number, too.
This is because 12 + 12 = sqrt(2)2. Since the square root of 2 is an irrational number, all derivatives of this (a square of whatever side length that is an integer number) will have a diagonal of irrational length.
This is the closest I can get — specify an integer square, but the stripes will be of non-integer width: http://jsfiddle.net/teddyrised/SR4gL/2/
#thing {
height: 200px;
background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-size: 4px 4px;
}
The side lengths of the imaginary square, tiled over your element, will be 4px wide. This means the diagonal length would be sqrt(32), and the stripe will be 1.414...px when measured diagonally across (close to 1, but not quite there), or 2px wide when measured parallel to the x or y axis.
Many thanks to Terry for his suggested approach of using a standard linear-gradient with percentages and a background-size. With a bit of playing around, I have managed to obtain the exact gradient I was looking for:
background-image: linear-gradient(
to right top,
transparent 33%,
black 33%,
black 66%,
transparent 66%
);
background-size: 3px 3px;
I'm looking to give an element a background with repeating, 1px wide diagonal stripes. It seems that repeating-linear-gradient should be able to do this, but when rendered in Safari this:
background-image: repeating-linear-gradient(
45deg, black, black 1px, transparent 1px, transparent 3px
);
Looks like this:
#thing {
height: 200px;
background-image: repeating-linear-gradient( 45deg, black, black 1px, transparent 1px, transparent 3px);
}
<div id="thing"></div>
It looks as though the browser's doing a poor job of aliasing, resulting in an uneven banding pattern. Any ideas on how I might be able to fix this, or to accomplish what I'm looking to do another way?
A little more elabourate explanation of the conundrum here: according to the Pythagoras principle (and its triples), it is impossible to have a square (which is simply two right triangles fit together) whose sides are integers that has a diagonal whose length is an integer number, too.
This is because 12 + 12 = sqrt(2)2. Since the square root of 2 is an irrational number, all derivatives of this (a square of whatever side length that is an integer number) will have a diagonal of irrational length.
This is the closest I can get — specify an integer square, but the stripes will be of non-integer width: http://jsfiddle.net/teddyrised/SR4gL/2/
#thing {
height: 200px;
background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-size: 4px 4px;
}
The side lengths of the imaginary square, tiled over your element, will be 4px wide. This means the diagonal length would be sqrt(32), and the stripe will be 1.414...px when measured diagonally across (close to 1, but not quite there), or 2px wide when measured parallel to the x or y axis.
Many thanks to Terry for his suggested approach of using a standard linear-gradient with percentages and a background-size. With a bit of playing around, I have managed to obtain the exact gradient I was looking for:
background-image: linear-gradient(
to right top,
transparent 33%,
black 33%,
black 66%,
transparent 66%
);
background-size: 3px 3px;
So I'm building a layout for a club I belong to, anyways, the layout I'm using has an effect where a border stretches along side the entire page, but tampers out using gradient near the top and bottom. Here's the layout - what I'm referring to is the soft shadow on the left side of the page:
https://dl.dropbox.com/u/6809301/sogawebsite.jpg
I generally consider myself fairly proficient with html/css but I'm really struggling making this work. Without specifying explicitly height on the parent container, I can't get the border to stretch as the body expand. With the side border gradient we really have 3 pieces - the top which needs to dock to the top of the container, bottom which is docked to the bottom of the page - both can be made static height, and the middle which stays solid color but needs to stretch based on the height of the page.
Any help would be appropriated. I always felt that height based scaling was somewhat awkward in html.
One of possible options is to use absolutely positioned generated content (:before for left "border", and :after for right one) with 100% height and CSS Gradients as background of generated pseudoelements. For IE9 and lower, regular single-color borders can be used as a fallback.
See live demo for working example.
The smart way to do it is with gradient borders, specifically border-image. Browser support isn't perfect, but since this is a quite non-essential effect, a little graceful degradation wouldn't hurt for improved performance across the board.
Here is a little demo.
I used SASS (with Compass) which will compile into CSS (minified!) and take care of the vendor prefixes for you:
div
border-width: 3px
+border-image(linear-gradient(top, rgba(0,0,0,0), black, black, rgba(0,0,0,0)) 1 100%)
But, if you were a masochist you could do the CSS by hand:
div {
border-width: 3px;
-moz-border-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-webkit-border-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(33.33333%, #000000), color-stop(66.66667%, #000000), color-stop(100%, rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;}
If that doesn't work for you, look at some of the other techniques on CSS-tricks, or use images.
I have the following style applied to my div element:
background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);
This has the desired effect (being an inner drop shadow only at the top of the div). I would like to apply the same effect at the bottom of the div. The following line does it well, but it seems to override the first, so I can only get one or the other.
background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);
Can someone show me how I can have multiple radial gradient backgrounds per element? I notice that webkit can do this easily, but I'm looking for a cross browser implementation/alternative.
Thanks
The best way to do that is to list them in the background property. But keep in mind that the order of properties is extremely important.
background:
radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background then -size and -repeat, otherwise it won't work. It took me something like 30 mins to get it. Hope it will be helpful for someone.
Just sepereate each one with a comma.
Something like this :
background-image: url(),url(), url();
Ofcourse instead of url you can put gradient.
And all modern browsers support this feature ( meaning IE does not).
In order to make it available in IE, you can use pie.htc
You just list them one after the other - like this:
background: radial-gradient(top left,
rgb(205, 230, 235) 34%,
transparent 34%),
radial-gradient(center,
rgb(205, 230, 235) 34%,
transparent 34%);
You can see it working at http://dabblet.com/gist/2759668
You have to set the value of the radial gradient to transparent in order to let the other background come through:
background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent),
radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent),
radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);