Related
I'm trying to draw using CSS gradients and a single div.
Unfortunately, there is no enough information about it so I needed to learn it myself by reading other people's code. Here are some examples:
https://codepen.io/PButcher/pen/JMRKpG
https://codepen.io/jkantner/pen/zdeJYg
https://codepen.io/jkantner/pen/ppjRBP
https://codepen.io/jkantner/pen/XMLVXa
So far, I've learned how to create only a few basic shapes:
div
{
height: 20em;
width: 20em;
background:
linear-gradient( 0deg, #000 0%, #000 100% ) 1em 1em / 5em 5em,
radial-gradient( circle at center, #000 70%, transparent 70% ) 1em 7em / 5em 5em,
linear-gradient( 45deg, #000 0%, #000 50%, transparent 50% ) 1em 13em / 5em 5em,
linear-gradient( -45deg, #000 0%, #000 50%, transparent 50% ) 7em 1em / 5em 5em,
linear-gradient( 135deg, #000 0%, #000 50%, transparent 50% ) 7em 7em / 5em 5em,
linear-gradient( -135deg, #000 0%, #000 50%, transparent 50% ) 7em 13em / 5em 5em,
radial-gradient( 100% 100% at top, #000 50%, transparent 50% ) 14em 1em / 5em 5em,
radial-gradient( 100% 100% at bottom, #000 50%, transparent 50% ) 14em 2em / 5em 5em,
linear-gradient( 45deg, #000 0%, #000 50%, transparent 50% ) 14em 7em / 4em 7em,
radial-gradient( 100% 50%, #000 0%, #000 50%, transparent 50% ) 14em 14em / 5em 5em;
background-repeat: no-repeat;
}
<div></div>
But, I wanna create more complicated shapes like, for example, this eagle's beak & feathers, or the shadow on it.
Can it be achieved using CSS and a single div?
As I commented above, we can use multiple techniques to achieve something like this :
radial-gradient with either circle or ellipse and by adjusting size and position
.elem {
width:300px;
height:200px;
border:1px solid;
background:
radial-gradient(ellipse at center, red 15%,transparent 15%),
radial-gradient(circle at 40px 120px, #ffc20f 20%,transparent 20%),
radial-gradient(circle at right bottom, #000 25%,transparent 25%);
}
<div class="elem"></div>
Linear-gradient that we can rotate and adjust size and position:
.elem {
width:300px;
height:200px;
border:1px solid;
background:
linear-gradient(20deg,transparent 20%,#ffc20f 20%,#ffc20f 30%,transparent 30%) no-repeat 98px -50px / 51px 151px,
linear-gradient(-20deg,transparent 20%,#ffc20f 20%,#ffc20f 30%,transparent 30%) no-repeat 98px -50px /51px 151px,
linear-gradient(30deg,red 20%,transparent 20%) no-repeat 10px 30px / 50px 50px,
linear-gradient(to right,blue 20%,transparent 20%) no-repeat 70px 20px / 50px 60px,
linear-gradient(40deg,#000 20%,transparent 20%) no-repeat 200px 20px / 15px 100px,
linear-gradient(-40deg,#000 20%,transparent 20%) no-repeat 200px 20px / 15px 100px;
}
<div class="elem" ></div>
There is also the clip-path that can help you to cut your element and adjust the global shape. This will also allow you to have you element above any background. (but this feature is not yet supported by all the browser) :
body {
background: #f2f2f5;
}
.elem {
background: #000;
width: 300px;
height: 200px;
-webkit-clip-path: polygon(3% 39%, 13% 21%, 26% 13%, 47% 14%, 69% 21%, 83% 25%, 90% 33%, 72% 37%, 87% 45%, 62% 49%, 87% 58%, 72% 61%, 58% 62%, 42% 62%, 29% 59%, 17% 64%, 18% 50%, 21% 42%, 10% 48%, 5% 59%);
clip-path: polygon(3% 39%, 13% 21%, 26% 13%, 47% 14%, 69% 21%, 83% 25%, 90% 33%, 72% 37%, 87% 45%, 62% 49%, 87% 58%, 72% 61%, 58% 62%, 42% 62%, 29% 59%, 17% 64%, 18% 50%, 21% 42%, 10% 48%, 5% 59%);
}
<div class="elem"></div>
you can also use pseudo-elements that will allow you to add at max 2 new elements on which you can apply the 3 techniques above and also other CSS property like box-shadow, opacity, filter, transform, etc. This will allow you to divide the shape more easily.
Then the main trick is to use them above each other in order to obtain the final shape.
Here is an ugly start to show that it's possible if you are able to cut the design into different part and calulate different size/positions:
body {
background: red;
}
.eagle {
width: 300px;
height: 200px;
position: relative;
background: radial-gradient(circle at 100px 70px, #000 2.5%, transparent 2.5%), linear-gradient(10deg, transparent 20%, #000 20%, #000 29%, transparent 30%) no-repeat 98px -8px / 142px 86px, linear-gradient(6deg, transparent 20%, #ffc20f 20%, #ffc20f 35%, transparent 35%) no-repeat 98px -50px / 141px 168px, radial-gradient(circle at 150px 100px, #000 15%, transparent 15%), radial-gradient(circle at 110px 130px, #000 15%, transparent 15%), radial-gradient(circle at 100px 100px, #ffc20f 20%, transparent 20%), radial-gradient(circle at 100px 100px, #000 25%, transparent 25%), #ffffff;
clip-path: polygon(18% 35%, 23% 27%, 43% 14%, 64% 10%, 81% 27%, 79% 41%, 62% 66%, 48% 74%, 63% 49%, 46% 47%, 43% 53%, 33% 53%, 34% 52%, 29% 64%, 31% 77%, 20% 69%, 20% 69%, 17% 62%, 15% 52%, 16% 41%);
;
}
.eagle:before {
content: "";
position: absolute;
top: 17%;
left: 60%;
height: 22px;
width: 30px;
border-radius: 50%;
background-image: radial-gradient(circle at center, #000 29%, #ffc20f 20%);
}
.eagle:after {
content: "";
position: absolute;
top: 36%;
left: 58%;
height: 84px;
width: 27px;
transform: rotate(45deg) skewY(-61deg);
background-image: linear-gradient(to right, #000 29%, #ffc20f 20%, #ffc20f 80%, #000 80%);
}
<div class="eagle"></div>
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 to do a soccer team shield with css, the idea is do a circle with the team colors and I have done the circles for shields with 1 or 2 colors but I am having troubles with 3 color shields
I'm using this for 2 colors shields
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 50%, #FFFFFF 50%);
background-image: -o-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -moz-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -webkit-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -ms-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
display: inline-block;
}
<div class="equipo"></div>
but I want that it have 3 color and I try this, but it doesn't work
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
}
<div class="equipo"></div>
What I have to do, I want 3 or more colors?
It is the nature of CSS gradients to behave, well, like gradients. The trick for having discrete colors, which do not blend, is to make the blend area have no width. This is done by putting two colors at the same point on the gradient, as shown below.
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -o-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -moz-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -webkit-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -ms-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
display: inline-block;
}
<div class="equipo"></div>
Add the same color again, if one ends at 30%, the next one should start at 30%,
As so: -moz-linear-gradient(left center , #01135b 30%, #ffffff 30%, #ffffff 65%, #df0408 30%)
This will essentially make a hard edge/stop on the previous color
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
display: inline-block;
background: -moz-linear-gradient(left center , #01135b 32%, #ffffff 32%, #ffffff 66%, #df0408 66%);
}
<div class="equipo"></div>
Apply the same principal to the rest.
Try this just added new linear gradients which is overriding your styling if this is what you were looking for you can remove the upper gradients. Also added one alternate with many colors.
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
background-image: -o-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -ms-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(15%,#a8e9ff), color-stop(32%,#052afc),color-stop(90%,#ff8d00));
}
.grad {
background-image: -moz-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: -webkit-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
}
<div class="equipo"></div>
<div class="equipo grad"></div>
here i worked for a flag, this is same as your requirement, try this
.flag-sample {
border-radius: 50%;
border: 1px solid #333333;
width: 100px;
height: 100px;
display: block;
background: -moz-linear-gradient(left center , #01135b 33%, #ffffff 33%, #ffffff 66%, #df0408 66%);
}
<div class="flag-sample"></div>
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.