Is there any css function like linear-gradient which renders provided colors without gradient?
Thank you very much for your help.
With gradients you achieve it. Try this:
background: -webkit-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px);
background: -moz-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px);
background: -o-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px);
background: -ms-repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px);
background: repeating-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,0) 80px, rgba(255,255,255,0.2) 80px, rgba(255,255,255,0.2) 150px);
background-color: green;
box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
Check this plunker
(Source : http://www.the-art-of-web.com/css/linear-gradients/)
Update as per ur comment:
Check this plunker
You can create all sorts of patterns, including stripes, arrows, zig-zags, etc.
Example for zig-zag-patterns:
background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #EC173A;
(Source: http://lea.verou.me/css3patterns/ )
Related
I'm trying to make a shape with four negatively curved corners, and I tried the radial gradients. However, only one of the corners is being applied, and I can't figure out why.
https://jsfiddle.net/xiej/1Lqysaho/1/
#shape2 {
width: 120px;
height: 120px;
position: absolute;
top: 400px;
right: 400px;
background-image:
radial-gradient(circle at 0px 0px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 0px 120px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 120px 0px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 120px 120px, #FFF 0px, #FFF 60px, #F00 60px);
}
The last color stop of each radial gradient is covering up the rest of the square, think of them layering over each other. I'm not sure that my fix is the best way to get the shape you're looking for, but I think this will make the shape at least! I shortened the stops to end the radial gradient before it would cover any of the other three corners.
https://jsfiddle.net/1Lqysaho/2/
background: #F00;
background-image:
radial-gradient(circle at 0px 0px, #FFF 60px, #f00 1px, transparent 1px),
radial-gradient(circle at 0px 120px, #FFF 60px,#f00 1px, transparent 1px),
radial-gradient(circle at 120px 0px, #FFF 60px,#f00 1px, transparent 1px),
radial-gradient(circle at 120px 120px, #FFF 60px,#f00 1px, transparent 1px);
div.round {
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}
div, div.round {
background-position: bottom left, bottom right, top right, top left; c
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-repeat: no-repeat;
}
div {
width: 130px;
height:100px;
margin:15px auto;
padding:13px 15px;
}
<div class="round"></div>
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.
Trying to figure out how the spacing between the lines can be reduced.
http://jsbin.com/tibipehu/1/edit
my code is based on linear gradient patterns by lea verou
http://lea.verou.me/css3patterns/#zig-zag
I find this tool great help when making CSS3 gradients:
http://www.colorzilla.com/gradient-editor/
Change the gradient and background size elements
body {
background:
linear-gradient(135deg, #ECEDDC 35%, transparent 25%) xpx 0px,
linear-gradient(225deg, #ECEDDC 35%, transparent 25%) xpx 0px,
linear-gradient(315deg, #ECEDDC 40%, transparent 25%),
linear-gradient(45deg, #ECEDDC 40%, transparent 25%);
background-size: (x*2)px (x*2)px;
background-color: #EC173A;
}
In your example, you have used x = 50.
If you want to make the zigzags closer or further, you need to do some math - make the background size higher, then adjust the angles and percentages.
body {
background:
linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(315deg, #abc 47%, transparent 30%),
linear-gradient(45deg, #abc 47%, transparent 25%);
background-size: 40px 80px;
background-color: #123;
}
See playground with examples: http://jsbin.com/gudanovo/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</body>
</html>
CSS:
.box {width: 200px; float:left; height: 200px; border: 1px solid #333}
.box1 {
background:
linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(315deg, #abc 48%, transparent 40%),
linear-gradient(45deg, #abc 48%, transparent 40%);
background-size: 40px 80px;
background-color: #123;
}
.box2 {
background:
linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(315deg, #abc 40%, transparent 30%),
linear-gradient(45deg, #abc 40%, transparent 25%);
background-size: 40px 40px;
background-color: #123;
}
.box3 {
background:
linear-gradient(135deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(225deg, #abc 35%, transparent 25%) 20px 0px,
linear-gradient(315deg, #abc 31%, transparent 30%),
linear-gradient(45deg, #abc 31%, transparent 30%);
background-size: 40px 21px;
background-color: #123;
}
.box4 {
background:
linear-gradient(135deg, #abc 35%, transparent 25%) 10px 0px,
linear-gradient(225deg, #abc 35%, transparent 25%) 10px 0px,
linear-gradient(315deg, #abc 40%, transparent 30%),
linear-gradient(45deg, #abc 40%, transparent 25%);
background-size: 20px 20px;
background-color: #123;
}
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
I want to get exactly this result with CSS3 and HTML5 texhnologies using no images.
here is HTML
<div id="overlay"></div>
<div id="lines"></div>
and CSS
body {
background: #45484d;
z-index:-5;
}
#lines {
background-size: 20px 20px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-4;
}
#overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-3;
}
I kinda get some piece of reuslt on jsfiddle:
http://jsfiddle.net/tt13/BA8Wk/2/
But can't figure out what to do else. Can anyone help me to achieve this result?
http://i.stack.imgur.com/6BrlY.jpg
dabblet: http://dabblet.com/gist/4649123
jsfiddle: http://jsfiddle.net/W4LpR/6/ (try opening the results in a larger window)
HTML
<div id="overlay"></div>
<div id="lines"></div>
<div id="lines2"></div>
CSS
body {
background-image: -ms-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -moz-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -o-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 447, color-stop(0, #636363), color-stop(1, #27282B));
background-image: -webkit-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: radial-gradient(circle closest-corner at center, #636363 0%, #27282B 100%);
z-index:-5;
}
#lines {
background-size: 20px 20px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-o-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-4;
}
#lines2 {
background-size: 100px 100px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-3;
}
#overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-2;
}
My try on this (only -webkit rules (Chrome) for demo):
background-size: 100px 100px;
background-image:
repeating-linear-gradient(0deg, #999, transparent 2px, transparent 20px),
repeating-linear-gradient(0deg, #fff 1px, transparent 2px, transparent 100px),
repeating-linear-gradient(90deg, #999, transparent 2px, transparent 20px),
repeating-linear-gradient(90deg, #fff 1px, transparent 2px, transparent 100px);
(fiddle)
And here's one with added stripes:
background-size:4px 4px;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 1px, #333 2px, transparent 3px);