I have been looking around and trying for a few days, but i just cant seem to get it 100% right... i am trying to achieve the following effect with css3 gradient:
the closest i have gotten is DEMO:
html {
background:
linear-gradient(80deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(90deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(82deg, transparent 50%, #eee 50%, #eee),
linear-gradient(67deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(52deg, transparent 50%, #eee 50%, #eee),
linear-gradient(37deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(22deg, transparent 50%, #eee 50%, #eee),
linear-gradient(7deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-8deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-23deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-38deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-53deg, transparent 50%, #ddd 50%, #ddd),
linear-gradient(-68deg, transparent 50%, #eee 50%, #eee),
linear-gradient(-83deg, transparent 50%, #ddd 50%, #ddd);
background-position: center -100%;
background-color: #eee;
background-size: 100% 200%;
min-height: 100%;
}
I will continue attempting it.. any help is greatly Appreciated though.
Update:
There has to be a better/reusable way of doing this... looking into a scss solution, here is what i have thus far:
.sunburst {
#for $ray from 1 through 26 {
$color: #eee;
$degree: 7;
#if $ray%2 == 0 {
$color: #ddd;
}
background:linear-gradient($degree+deg, transparent 50%, $color 50%, $color),
}
}
Now its just the actual maths behind it i am trying to figure out... attempting to steal logic from pow.js, but kind of difficult if your as terrible at maths as i am...
You could use :before and :after :pseudo-elements to get this effect.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#grad {
position: relative;
width: 100%;
height: 100%;
}
#grad:after, #grad:before {
content: '';
position: absolute;
background: linear-gradient(90deg, transparent 50%, black 50%, black), linear-gradient(82deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(67deg, transparent 50%, #000000 50%, #000000), linear-gradient(52deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(37deg, transparent 50%, #000000 50%, #000000), linear-gradient(22deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(7deg, transparent 50%, #000000 50%, #000000), linear-gradient(-8deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-23deg, transparent 50%, #000000 50%, #000000), linear-gradient(-38deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-53deg, transparent 50%, #000000 50%, #000000), linear-gradient(-68deg, transparent 50%, #12E0DB 50%, #12E0DB), linear-gradient(-83deg, transparent 50%, #000000 50%, #000000), linear-gradient(-90deg, transparent 50%, #12E0DB 50%, #12E0DB);
background-position: 0% 0%;
background-size: 200% 100%;
height: 100%;
width: 50%;
}
#grad:before {
left: 50%;
transform: rotate(180deg);
}
<div id="grad"></div>
In modern chrome-based browsers there are conic gradients which do this.
div {
height:250px;
background-image:
repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}
<div></div>
your background-postition is set to center -100%;. Just use
background-position: center center;
Now with this change and your provided code half of your image is already done ;). Just add the second half with more linear-gradients
#chipChocolate.py gave a brilliant solution! This is an improvement based on his.
In Firefox transparent behaves like rgba(0,0,0,0) which leaves a thin gray line at the edge. Change to rgba(255,255,255,0) looks better.
Make the visual effect closer to OP's screenshot: 36 strips, each occupies a 10 degree angle.
Effective on <html> tag, like OP's try.
BTW: Chrome's render engine sucks, best viewed in Firefox.
html {
height: 100%;
position: relative;
}
html:before, html:after {
content: '';
height: 100%;
width: 50%;
position: absolute;
top: 0;
background-size: 200% 100%;
background-image: linear-gradient(85deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(75deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(65deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(55deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(45deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(35deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(25deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(15deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(5deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-5deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-15deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-25deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-35deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-45deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-55deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-65deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-75deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db),
linear-gradient(-85deg, rgba(255,255,255,0) 50%, #000 50%, #000),
linear-gradient(-95deg, rgba(255,255,255,0) 50%, #12e0db 50%, #12e0db);
}
html:before {
left: 50%;
transform: rotate(180deg);
}
Currently, there is a repeating-conic-gradient, which creates an image consisting of a repeating gradient.
div {
height: 500px;
background: repeating-conic-gradient(
hsl(186deg 100% 50% / 31%) 0deg 15deg,
hsla(0,0%,100%,0) 0deg 30deg
) #1c2c3c
}
<div></div>
You read more about it at W3 CSS Image Values.
This property is not compatible with all browsers. Check caniuse for more information.
Related
I have a radial gradient that used as a mask-image "fades" an image in to the background-color behind the image.
mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
How do I get the same effect with an evenly rectangular gradient on all four sides?
I know you can combine gradients and my most current attempt does not seem to have any effect:
img
{
mask-image:
linear-gradient(to top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to right, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to left, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%);
}
The trick with multiple mask is to control the size/position so that each one will apply to a region of your element:
.box {
height:300px;
width:300px;
background: url(https://picsum.photos/id/1003/300/300);
-webkit-mask:
linear-gradient(to top, transparent,#fff) top /100% 20%,
linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
linear-gradient(to left , transparent,#fff) left /20% 100%,
linear-gradient(to right , transparent,#fff) right /20% 100%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(to top, transparent,#fff) top /100% 20%,
linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
linear-gradient(to left , transparent,#fff) left /20% 100%,
linear-gradient(to right , transparent,#fff) right /20% 100%;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box"></div>
Or like this:
.box {
height:300px;
width:300px;
background: url(https://picsum.photos/id/1003/300/300);
-webkit-mask:
linear-gradient(to top, transparent 10%, #fff 15% 90%, transparent 95%),
linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
-webkit-mask-size:110% 110%;
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite: source-in;
mask:
linear-gradient(to top, transparent 10%, #fff 15% 90%, transparent 95%),
linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
mask-size: 110% 110%;
mask-position: center;
mask-repeat:no-repeat;
mask-composite: intersect;
}
body {
background:pink;
}
<div class="box"></div>
Related: How to make a rectangular transparency gradient CSS3?
I have created this pattern, consisting of blue and red lines. But I can't find a way to blend the red and the blue lines (to something like dark purple if I'm correct) where they cross each-other (see third case). Any ideas? Using transparency doesn't help as I only want it where they cross.
div{
width:50px; height:100px;
border: solid 2px black;
float:left;
margin:10px;
font-size:30px;
font-weight:bold;
}
.caro-pattern1 {
background-color:#2ECC40;
background-image: linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95% );
background-size:50px 50px;
}
.caro-pattern2 {
background-color:#2ECC40;
background-image:
linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95% );
background-size:50px 50px;
}
.caro-pattern3 {
background-color:#2ECC40;
background-image:
linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95% ),
linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95% );
background-size:50px 50px;
}
<div class="caro-pattern1">1</div>
<div class="caro-pattern2">2</div>
<div class="caro-pattern3">3</div>
You have one posibility, without changing much your current approach.
Just set the red stripes twice, the first without transparency. On top, set the blue stripes, and on top set againg the red ones, now with alpha:
div {
width: 50px;
height: 100px;
border: solid 2px black;
float: left;
margin: 10px;
font-size: 30px;
font-weight: bold;
}
.caro-pattern3 {
background-color: #2ECC40;
background-image:
linear-gradient(45deg, rgba(255, 0, 0, .5) 5%, transparent 5%, transparent 45%, rgba(255, 0, 0, .5) 45%, rgba(255, 0, 0, .5) 55%, transparent 55%, transparent 95%, rgba(255, 0, 0, .5) 95%),
linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%),
linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%);
background-size: 50px 50px;
}
<div class="caro-pattern3">3</div>
Another posibility, as posted by Abhitalks, is to use blend mode (with limited browser support). But you need to set it on a pseudo element to avoid blending it with the solid background:
div {
width: 50px;
height: 100px;
border: solid 2px black;
float: left;
margin: 10px;
font-size: 30px;
font-weight: bold;
}
.caro-pattern3 {
background-color: #2ECC40;
position: relative;
}
.caro-pattern3:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%),
linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%);
background-size: 50px 50px;
background-blend-mode: screen;
}
<div class="caro-pattern3">3</div>
You can experiment with the new background-blend-mode, which is currently in editor's draft for Compositing and blending Level 1.
References: background-blend-mode and mix-blend-mode.
Be advised though, that this is currently not supported by IE, Edge and Opera, with partial support in Safari. That leaves only Chrome and Firefox :(
Example Snippet:
div {
width: 50px; height: 100px;
border: solid 2px black;
margin: 10px;
}
.caro-pattern3 {
background-color: #2ECC40;
background-image:
linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95% ),
linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95% );
background-size: 50px 50px;
background-blend-mode: color, hard-light;
}
<div class="caro-pattern3">3</div>
I have the following CSS code:
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#7b7878), to(#white));
background: -moz-radial-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#7b7878), to(#white));
background: radial-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#7b7878), to(#white));
Which is responsible for the following styling:
It works in Chrome, but this is not working in Firefox and IE. What am I missing here??
use this code, this will work on IE 10,google chrom 26.0,fire fox 16.0 ,opera 12.1 and safari 6.1:
width:100%;
height:3px;
background: -webkit-radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
background: -o-radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
background: -moz-radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
background: radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
And also give the same result as you want.
I want an hr that contains 50% of the page.
hr {
background-color: #E0DFDF;
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
background-color: #border; is invalid CSS. I guess you are porting some code from preprocessor (e.g. SASS), please fix it.
Your syntax is wrong:
/* incorrect */
-webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
^^
/* correct */
-webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
Here's a demo:
hr {
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr>
Your syntax is incorrect. linear-gradient: (...) should be ---> linear-gradient(...), without the semi-colon(:).
hr {
background: -webkit-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -moz-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -o-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
border: 0;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr />
The code below creates diagonal lines by using CSS gradient. But how can I make the coloured line thinner about 2px, and the white space in-between larger about 7px?
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
background-size: 5px 5px;
width:100%;
height:100%;
}
You have to do it by changing the percents of the gradient to smaller or larger values, #fff = white so the range should be larger. #9CC is the blue color, its range should be smaller.
body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.35, #fff), color-stop(0.35, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.85, #fff), color-stop(0.85, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CCb 50%, #fff 50%, #fff 85%, #9CC 85%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9cc 85%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 35%, #bbb 35%, #bbb 50%, #fff 50%, #fff 85%, #bbb 85%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9CC', GradientType=0);
/ IE6-8 */ background-image: linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
background-size: 5px 5px;
width:100%;
height:100%;
}
Demo
I changed the 25% to 35% and 75% to 80% correspondingly which lessened the range and therefore width of the blue lines and increased the range and therefore the width of the white lines
To change them yourself you may want to use a find and replace tool