Мне интересно, можно ли сделать что-то подобное с градиентами css:
Я много искал, и все градиенты либо "Линейные", либо "Радиальные". Мой желаемый градиент линейный по кругу!
Мне интересно, можно ли сделать что-то подобное с градиентами css:
Я много искал, и все градиенты либо "Линейные", либо "Радиальные". Мой желаемый градиент линейный по кругу!
Я боюсь, что CSS не допускает линейного радиального градиента. Тем не менее, svg предоставляет решение, хотя и необоснованное. См. Ниже разделы для решения.
Это может быть выполнено с использованием нескольких разделов, которые затем поворачиваются для создания круга.
.wheel,
.umbrella,
.color {
content: "";
position: absolute;
border-radius: 50%;
width: 15em;
height: 15em;
margin: 0;
padding: 0;
}
.wheel {
overflow: hidden;
width: 15em;
height: 15em;
position: relative;
}
.umbrella {
position: relative;
-webkit-transform: scale(1.35);
}
.color,
.color:nth-child(n+7):after {
clip: rect(0, 15em, 15em, 7.5em);
}
.color:after,
.color:nth-child(n+7) {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 7.5em);
top: calc(50% - 7.5em);
width: 15em;
height: 15em;
clip: rect(0, 7.5em, 15em, 0);
}
.color:nth-child(1):after {
background-color: #9ED110;
transform: rotate(30deg);
z-index: 12;
}
.color:nth-child(2):after {
background-color: #50B517;
transform: rotate(60deg);
z-index: 11;
}
.color:nth-child(3):after {
background-color: #179067;
transform: rotate(90deg);
z-index: 10;
}
.color:nth-child(4):after {
background-color: #476EAF;
transform: rotate(120deg);
z-index: 9;
}
.color:nth-child(5):after {
background-color: #9f49ac;
transform: rotate(150deg);
z-index: 8;
}
.color:nth-child(6):after {
background-color: #CC42A2;
transform: rotate(180deg);
z-index: 7;
}
.color:nth-child(7):after {
background-color: #FF3BA7;
transform: rotate(180deg);
}
.color:nth-child(8):after {
background-color: #FF5800;
transform: rotate(210deg);
}
.color:nth-child(9):after {
background-color: #FF8100;
transform: rotate(240deg);
}
.color:nth-child(10):after {
background-color: #FEAC00;
transform: rotate(270deg);
}
.color:nth-child(11):after {
background-color: #FFCC00;
transform: rotate(300deg);
}
.color:nth-child(12):after {
background-color: #EDE604;
transform: rotate(330deg);
}
<div class="wheel">
<ul class="umbrella">
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
</ul>
</div>
Это называется коническим градиентом и в настоящее время невозможно в чистом CSS, но это было предложено для проекта CSS Image Values 4. Недавно Леа Веру создала для них полифилл, есть также плагин PostCSS, который делает то же самое.
Это выполнимо сейчас - по крайней мере, в Chrome. Свойство conic-gradient
CSS может легко достичь этого:
html, body { margin: 0; padding: 0; }
.box {
position: absolute;
width: 200px;
height: 200px;
left: 100px;
}
.colorwheel {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius:50%;
}
.fallback {
text-align: center;
padding: 50px 0;
}
<div class="fallback box">
If you can read<br>this, your browser<br>doesn't support<br>conic-gradient yet.
</div>
<div class="colorwheel box"></div>
SVG сделала мою работу очень тяжело. Лучшим решением, которое я нашел, является использование нескольких срезов круга и их цвет. И это чистый css3.
Вопрос: как сделать изменения цвета плавными? Я нашел ответ: Используя фильтры размытия.
Вот полное решение: Конические градиенты в CSS
Я просто играл с идеей для своего собственного проекта. Я не хотел использовать "конический градиент", так как в настоящее время поддержка для него очень низкая (середина 2019 года). поэтому я придумал следующее:
background:
radial-gradient(circle at 38% 7% ,rgba(255,255,000,1) 20%,rgba(255,255,000,.0) 38%),
radial-gradient(circle at 50% 0%,rgba(128,255,000,1) 22%,rgba(128,255,000,.0) 48%),
radial-gradient(circle at 75% 7% ,rgba(000,255,000,1) 22%,rgba(000,255,000,.0) 48%),
radial-gradient(circle at 93% 24% ,rgba(000,255,128,1) 22%,rgba(000,255,128,.0) 48%),
radial-gradient(circle at 100% 50%,rgba(000,255,255,1) 22%,rgba(000,255,255,.0) 48%),
radial-gradient(circle at 93% 75% ,rgba(000,128,255,1) 22%,rgba(000,128,255,.0) 48%),
radial-gradient(circle at 75% 93%,rgba(000,000,255,1) 22%,rgba(000,000,255,.0) 48%),
radial-gradient(circle at 50% 100% ,rgba(128,000,255,1) 22%,rgba(128,000,255,.0) 48%),
radial-gradient(circle at 25% 93%,rgba(255,000,255,1) 22%,rgba(255,000,255,.0) 48%),
radial-gradient(circle at 7% 75%,rgba(255,000,128,1) 22%,rgba(255,000,128,.0) 48%),
radial-gradient(circle at 0% 50%,rgba(255,000,000,1) 22%,rgba(255,000,000,.0) 48%),
radial-gradient(circle at 7% 25%,rgba(255,128,000,1) 22%,rgba(255,128,000,.0) 48%);
https://jsfiddle.net/p5vxek3u/
Это не точно, но достаточно близко для моих нужд. Я использую это за чем-то с альфа-прозрачностью, поэтому вы можете видеть только небольшую часть за раз.
Я думал, что оставлю это здесь на случай, если это кому-нибудь понадобится.
Вы можете использовать 3 треangularьника с общим кругом. Каждый треangularьник трансформируется центральной проекцией из длинного прямоangularьника с линейным градиентом. Я пробую это с SVG в Firefox, но Chromium не поддерживает центральную проекцию в SVG, но поддерживает конические градиенты, поэтому смотрите комбинированную версию для обоих браузеров.
<svg version="2" viewBox="-207 -207 414 414" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gWt">
<stop style="stop-color:#fff" offset="0"/>
<stop style="stop-color:#fff0" offset="1"/>
</radialGradient>
<!-- part for firefox: using central projection of 3 rectangles -->
<linearGradient id="gYM" x1="0" x2="0" y1="0" y2="100%">
<stop style="stop-color:#ef08" offset="0"/>
<stop style="stop-color:#ff0" offset=".005"/>
<stop style="stop-color:#fc0" offset=".1827"/>
<stop style="stop-color:#f90" offset=".2924"/>
<stop style="stop-color:#f60" offset=".3728"/>
<stop style="stop-color:#f00" offset=".5"/>
<stop style="stop-color:#f06" offset=".6272"/>
<stop style="stop-color:#f09" offset=".7076"/>
<stop style="stop-color:#f0c" offset=".8173"/>
<stop style="stop-color:#f0f" offset=".995"/>
<stop style="stop-color:#e0f8" offset="1"/>
</linearGradient>
<linearGradient id="gCY" href="#gYM">
<stop style="stop-color:#0ef8" offset="0"/>
<stop style="stop-color:#0ff" offset=".005"/>
<stop style="stop-color:#0fc" offset=".1827"/>
<stop style="stop-color:#0f9" offset=".2924"/>
<stop style="stop-color:#0f6" offset=".3728"/>
<stop style="stop-color:#0f0" offset=".5"/>
<stop style="stop-color:#6f0" offset=".6272"/>
<stop style="stop-color:#9f0" offset=".7076"/>
<stop style="stop-color:#cf0" offset=".8173"/>
<stop style="stop-color:#ff0" offset=".995"/>
<stop style="stop-color:#fe08" offset="1"/>
</linearGradient>
<linearGradient id="gMC" href="#gYM">
<stop style="stop-color:#f0e8" offset="0"/>
<stop style="stop-color:#f0f" offset=".005"/>
<stop style="stop-color:#c0f" offset=".1827"/>
<stop style="stop-color:#90f" offset=".2924"/>
<stop style="stop-color:#60f" offset=".3728"/>
<stop style="stop-color:#00f" offset=".5"/>
<stop style="stop-color:#06f" offset=".6272"/>
<stop style="stop-color:#09f" offset=".7076"/>
<stop style="stop-color:#0cf" offset=".8173"/>
<stop style="stop-color:#0ff" offset=".995"/>
<stop style="stop-color:#0fe8" offset="1"/>
</linearGradient>
<rect id="r" width="2000" height="700" style="transform:matrix3d(
-29,0,0,100,
0,1,0,0,
0,0,1,0,
200,-350,1,1
); mix-blend-mode:lighten"/>
</defs>
<clipPath id="cc">
<circle r="200" id="c"/>
</clipPath>
<circle r="199" fill="#000"/>
<g clip-path="url(#cc)" id="m">
<use href="#r" fill="url(#gCY)" transform="rotate(-120)"/>
<use href="#r" fill="url(#gYM)"/>
<use href="#r" fill="url(#gMC)" transform="rotate(120)"/>
<!-- for Chrome use conic gradient (does not work with any svg object but with foreign)
Firefox ignores this object due to unknown keyword in style -->
<foreignObject width="400" height="400" x="-200" y="-200" style="background:conic-gradient(from 90deg,
#f00,#f0f,#00f,#0ff,#0f0,#ff0,#f00);
background-repeat: no-repeat;
background-position: center center;
background-size: auto;"/>
</g>
<g>
<!-- Points for visual test -->
<circle cx="-200" r="6" fill="#0ff"/>
<circle cx="-195.6" cy="-41.6" r="6" fill="#0fc"/>
<circle cx="-182.7" cy="-81.3" r="6" fill="#0f9"/>
<circle cx="-161.8" cy="-117.6" r="6" fill="#0f6"/>
<circle cx="-133.8" cy="-148.6" r="6" fill="#0f3"/>
<circle cx="-100" cy="-173.2" r="6" fill="#0f0"/>
<circle cx="-61.8" cy="-190.2" r="6" fill="#3f0"/>
<circle cx="-20.9" cy="-198.9" r="6" fill="#6f0"/>
<circle cx="20.9" cy="-198.9" r="6" fill="#9f0"/>
<circle cx="61.8" cy="-190.2" r="6" fill="#cf0"/>
<circle cx="100" cy="-173.2" r="6" fill="#ff0"/>
<circle cx="133.8" cy="-148.6" r="6" fill="#fc0"/>
<circle cx="161.8" cy="-117.6" r="6" fill="#f90"/>
<circle cx="182.7" cy="-81.3" r="6" fill="#f60"/>
<circle cx="195.6" cy="-41.6" r="6" fill="#f30"/>
<circle cx="200" r="6" fill="#f00"/>
<circle cx="-195.6" cy="41.6" r="6" fill="#0cf"/>
<circle cx="-182.7" cy="81.3" r="6" fill="#09f"/>
<circle cx="-161.8" cy="117.6" r="6" fill="#06f"/>
<circle cx="-133.8" cy="148.6" r="6" fill="#03f"/>
<circle cx="-100" cy="173.2" r="6" fill="#00f"/>
<circle cx="-61.8" cy="190.2" r="6" fill="#30f"/>
<circle cx="-20.9" cy="198.9" r="6" fill="#60f"/>
<circle cx="20.9" cy="198.9" r="6" fill="#90f"/>
<circle cx="61.8" cy="190.2" r="6" fill="#c0f"/>
<circle cx="100" cy="173.2" r="6" fill="#f0f"/>
<circle cx="133.8" cy="148.6" r="6" fill="#f0c"/>
<circle cx="161.8" cy="117.6" r="6" fill="#f09"/>
<circle cx="182.7" cy="81.3" r="6" fill="#f06"/>
<circle cx="195.6" cy="41.6" r="6" fill="#f03"/>
</g>
<circle r="200" fill="url(#gWt)"/>
</svg>