Почему chrome не сглаживает градиент?

#css #google_chrome #градиент

                    
Если при создание градиента указывать угол в 30 градусов, то в chrome появляются
лесенки. В firefox вся сглаживается хорошо. Если угол 45 градусов, то также в chrome
отображается нормально. Можно ли это как то исправить ?

http://codepen.io/anon/pen/jPexJr



#triangle {
  width: 100%;
  height: 1px;
}
#triangle:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(30deg, #d3bba3 0%, #d3bba3 50%, transparent 50%, transparent
100%);
  background: -webkit-linear-gradient(60deg, #d3bba3 0%, #d3bba3 50%, transparent
50%, transparent 100%);
}
#triangle:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(-30deg, #dae5e7 0%, #dae5e7 50%, transparent 50%, transparent
100%);
  background: -webkit-linear-gradient(-240deg, #dae5e7 0%, #dae5e7 50%, transparent
50%, transparent 100%);
}




    

Ответы

Ответ 1

Дело в том, что границы цветов (или прозрачности) чётко совпадают. При этом, нет
места для сглаженного перехода, и какой-либо интерполяции. При указании стыков, оставляйте
небольшой запас (под каждый случай, подбирается экспериментально). Например, в вашем
коде, было достаточно развести границы друг от друга всего на 0.5 пикселя(!):



#triangle {
  width: 100%;
  height: 1px;
}
#triangle:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(30deg, #d3bba3 0%, #d3bba3 50%, transparent 50.5%,
transparent 100%);
  background: -webkit-linear-gradient(60deg, #d3bba3 0%, #d3bba3 50%, transparent
50.5%, transparent 100%);
}
#triangle:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(-30deg, #dae5e7 0%, #dae5e7 50%, transparent 50.5%,
transparent 100%);
  background: -webkit-linear-gradient(-240deg, #dae5e7 0%, #dae5e7 50%, transparent
50.5%, transparent 100%);
}

Почему этот радиальный градиент не завершает круг?

#css #css3 #html5 #градиент

Я пытаюсь использовать радиальный градиент для создания границы внутри элементов
круга, которые выполняют роль радио кнопок.  

Основной CSS показан ниже. Я не могу понять, почему красный градиент не охватывает
всю окружность.
Когда белый color-stop приближается к 100%,  появляются красные пробелы  сверху,
справа, слева и снизу.  

Почему это происходит, и как  это исправить,  используя радиальный градиент? 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 2px solid transparent;
  width: 20px;
  height: 20px;
  margin-right: 20px;
}

.radio1 { background: radial-gradient(circle closest-side, white 75%, red 100%); }
.radio2 { background: radial-gradient(circle closest-side, white 90%, red 100%); }
.radio3 { background: radial-gradient(circle closest-side, white 95%, red 100%); }
.radio4 { background: radial-gradient(circle closest-side, white 99%, red 100%); }

  

  

  

  

  





    

Ответы

Ответ 1

Как отмечено в комментариях, ваш процент будет пересчитан в пикселях относительно
вашей ширины / высоты. В вашем случае, 99% и 100% будут очень близки, и у вас возникнет
проблема с воспроизведением субпикселей.    

Вместо этого вы можете использовать calc(), где вы можете легко определить толщину
в виде значения в пикселях независимо от размера элемента.    

Вам также необходимо настроить background-origin и сделать его border-box, чтобы
вы рисовали градиент с учетом области границы, и у вас получился идеальный круг. 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 2px solid transparent;
  width: 20px;
  height: 20px;
  margin-right: 20px;
  background-origin:border-box;
}

.radio1 { background-image: radial-gradient(circle closest-side, white calc(100%
- 1px), red 100%); }
.radio2 { background-image: radial-gradient(circle closest-side, white calc(100%
- 2px), red 100%); }
.radio3 { background-image: radial-gradient(circle closest-side, white calc(100%
- 3px), red 100%); }
.radio4 { background-image: radial-gradient(circle closest-side, white calc(100%
- 4px), red 100%); }

  

  

  

  

  






Вот еще один пример с большим значением border, чтобы лучше проиллюстрировать проблему
background-origin:



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); }

  






Фон рисуется на padding box, затем повторяется по всей области (border box).

Если вы отключите повтор, то у вас будет это: 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); 
  background-repeat:no-repeat;
 }

  






Здесь мы повторим только на оси X:



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); 
  background-repeat:repeat-x;
 }

  






И вот что происходит при использовании 100% для обоих цветов, что похоже на вашу
ситуацию, и вы лучше поймете, почему у вас есть окраска только на углах.



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
  background-image: radial-gradient(circle closest-side, white 100%, red 100%); 
 }
 
 .one {
   background-repeat:no-repeat;
 }
  .two {
   background-repeat:repeat;
 }
 .three {
   border-width:5px;
 }

  

  

  






И если мы изменим origin, это нормально: 



.container {
  background: #ddd;
  width: 400px;
  height: 200px;
  padding: 20px;
}

.radio {
  display: inline-block;
  background: white;
  border-radius: 50%;
  border: 20px solid rgba(0,0,0,0.2);
  width: 50px;
  height: 50px;
  margin-right: 20px;
 background-image: radial-gradient(circle closest-side, white calc(100% - 4px), red
100%); 
  background-origin:border-box;
 }

  

Как создать svg-градиент с 3 точками в треугольнике, которые смешиваются вместе

#html #css #svg #градиент #svg_animation

Я хочу создать svg-градиент в круге с 3 цветными зонами, в виде треугольников.   

   




Я попытался создать линейный градиент с тремя stops, но я не уверен, как расположить
stops там, где они мне нужны (вверху слева направо). 
    

Ответы

Ответ 1

В качестве бонуса добавлены примеры анимации


Вращение градиента 


Добавляется команда анимации группы элементов id="gr1" :

circle cx="50" cy="50" r="5" fill="white" stroke="silver">
     
       


Полный код:









2. Анимация дорожек 

Добавляется команда анимации радиуса окружностей 


     
     








Ответ 2

В примере ниже близко, то, что вы хотите получить. 



svg {
  width: 400px;
}





Поскольку смешивание, которое вы получаете в CSS / SVG, работает исключительно путем
отдельного сочетания красного, зеленого и синего каналов цветов RGB, то он не знает,
что мы ожидаем увидеть зеленый, когда мы смешиваем синий и желтый. Вместо этого вы
получите мутный серый.   

Таким образом, в приведенном выше примере я «обманул», добавив полоски «правильных»
цветов между нашими тремя основными цветами. Например, я положил полоску зеленого цвета
между синим и желтым секторами.  

Если я этого не сделаю, приведенный выше пример будет выглядеть так:  



svg {
  width: 400px;
}

Как сделать блеск на кнопке

#html #css #css3 #градиент

Подскажите пожалуйста как сделать что бы при наведении на кнопку появлялся эффект
блеска. Я думал что этого можно достичь таким способом 

a{
transition: all 1s ease 0s; 
}
a:hover
{
background: linear-gradient(45deg, red, white);
}




Кнопки сделаны в виде списка со ссылками (схематично ниже)

 
 
 
   Text 
 



Выходит что градиент накладывается на всю область сразу, а по тексту идёт с задержкой(Что
очень не приятно :( ) 
В идеале нужно что бы узкая полоска градиента прошла от левого нижнего до правого
верхнего углов. 
Помогите реализоваться пожалуйста. Любые идеи принимаются!
    

Ответы

Ответ 1

Легко гуглится в интернете, например такие кнопки, не важно ссылка это или див, ссылке
же тоже можно применить блочную модель: http://jsfiddle.net/jLhgve2j/



/**
 * Icon
 */

.icon {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 25px 0 25px 25px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  font-family: sans-serif;
}
.icon:nth-child(1) {
  background: cornflowerblue;
}
.icon:nth-child(2) {
  background: salmon;
}
.icon:nth-child(3) {
  background: gray;
}
/**
 * The "shine" element
 */

.icon:after {
  content: "";
  height: 200%;
  left: -230%;
  opacity: 0;
  position: absolute;
  top: -20%;
  transform: rotate(-30deg);
  width: 200%;
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255,
255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}
/* Hover state - trigger effect */

.icon:hover:after {
  left: -50%;
  opacity: 1;
  top: -50%;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-property: left, top, opacity;
  transition-timing-function: ease;
}
/* Active state */

.icon:active:after {
  opacity: 0;
}
let
it
shine

Внутренняя тень градиентом

#css #градиент

Здравствуйте! 

Мне нужно сделать внутреннюю тень у блока, но что бы она была под углом 45deg.

Я пробовал такое сделать обычной тенью, но оно не так выглядит, как надо:



.shadow {
    width: 250px;
    height: 250px;
    box-shadow: inset 0px 0px 50px #000;
}





Мне пришла в голову идея: сделать тень градиентом. Но я не знаю как.

Пример нужной тени:


    

Ответы

Ответ 1

Предлагаю попробовать background:



body {
  margin: 0;
  display: flex;
}

div {
  width: 100vmin;
  height: 100vmin;
  margin: auto;
  background:
    linear-gradient(45deg, transparent 70%, black 100%),
    linear-gradient(-45deg, transparent 70%, black 100%),
    linear-gradient(-135deg, transparent 70%, black 100%),
    linear-gradient(135deg, transparent 70%, black 100%)
}



Ответ 2

.cover {
  width: 300px;
  height: 200px;
  padding: 60px 0 0 0;
  background: hsla(0, 0%, 10%, 1);
}

.shadow {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  box-shadow: 10px 10px 200px hsla(0, 0%, 100%, 1), -10px -10px 200px hsla(0, 0%,
100%, 1);
  background: hsla(0, 0%, 90%, 1);
  transform: rotate(45deg);
}

  

Помогите реализовать градиент через css

#css #css3 #градиент

Подскажите как сделать такой градиент, что бы к углам он становился полностью прозрачный. 
    

Ответы

Ответ 1

body {
  background: url('https://i.stack.imgur.com/7QFOe.png') no-repeat;
  padding: 0;
  margin: 0;
}

.overfade {
  margin-top: 55px;
  height: 50px;
  width: 1280px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-image: 
    linear-gradient(
      to right, 
      rgba(172, 172, 172, 0) 0%, 
      rgba(172, 172, 172, 1) 35%, 
      rgba(172, 172, 172, 1) 65%, 
      rgba(172, 172, 172, 0) 100%), 
    linear-gradient(
      to right, 
      rgba(236, 234, 238, 1) 0%, 
      rgba(236, 234, 238, 1) 50%, 
      rgba(172, 172, 172, 0) 50%, 
      rgba(172, 172, 172, 0) 100%);
  background-position: 0px 55%, 0px 0px;
  background-repeat: no-repeat;
  background-size: 100% 3px, 100% 55%;
}



Ответ 2

в сети есть много сервисом для генерирования градиентов вот например один из них
Ultimate CSS Gradient Generator. В редакторе можно сделать что то на подобие такого 



div {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,000000+89,000000+100&0+0,0.65+9,1+89,0+100 */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65)
9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65)
9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65)
9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',
endColorstr='#00000000', GradientType=1);
  /* IE6-9 */
  height: 300px;
  width: 300px;
}



Ответ 3

что то такое?

background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(209,209,209,1)
9%, rgba(209,209,209,1) 9%, rgba(209,209,209,1) 21%, rgba(209,209,209,1) 34%, rgba(254,254,254,1)
66%, rgba(254,254,254,1) 66%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(209,209,209,1)
9%,rgba(209,209,209,1) 9%,rgba(209,209,209,1) 21%,rgba(209,209,209,1) 34%,rgba(254,254,254,1)
66%,rgba(254,254,254,1) 66%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(226,226,226,1) 0%,rgba(209,209,209,1)
9%,rgba(209,209,209,1) 9%,rgba(209,209,209,1) 21%,rgba(209,209,209,1) 34%,rgba(254,254,254,1)
66%,rgba(254,254,254,1) 66%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1
); /* IE6-9 */


Ответ 4

div {
  overflow: hidden;
}

div:before {
  content: "";
  display: block;
  height: 8px;
  margin-top: -4px;
  background: radial-gradient(ellipse at center, silver 0%, transparent 80%);
}

Как анимировать радиальный градиент с помощью CSS?

#css #html5 #svg #css_animation #градиент

Я пытаюсь создать эффект анимации блеска с радиальным градиентом для блока div, но
я не уверен, что мой способ, - лучший способ сделать это.    

Я не нашел других решений для достижения того, чего я хочу получить. 
Примеры, которые я нашел, - это просто эффекты блеска, которые выглядят как наложение.     

Большинство примеров, которые я нашел, выглядит так:   http://jsfiddle.net/nqQc7/512/.

Ниже то, что у меня пока получилось:



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  /*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%,
#ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite;
}

@keyframes colorChange {
  0% {
    background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%,
#ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  50% {
    background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff
8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  100% {
    background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%,
#ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  /*0% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 0;  }*/
  /*10% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 1;  }*/
  /*40% { transform: translateY(-20vh) translateX(17vw) ; opacity: 1; }*/
  /*50% { transform: translateY(-20vh) translateX(17vw) ; opacity: 0; }*/
  /*60% { transform: translateY(-20vh) translateX(17vw) ; opacity: 1; }*/
  /*90% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 1; }*/
  /*100% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 0; }*/
}

  Shine





Возможно ли и как,  заставить белый блеск сверху плавно переходить слева направо? 
    

Ответы

Ответ 1

Вы можете сделать градиент по-разному и анимировать его позицию. Хитрость состоит
в том, чтобы удвоить размер градиента и сделать так, чтобы значение stop-color составляло
половину их фактических значений, чтобы сохранить тот же визуальный градиент, а затем
анимировать его слева направо.    


Он не будет выглядеть точно так же, как градиент, который вы
определили в анимации из-за вычисления дальнего угла



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff
12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position:top left;
  }
}

  Shine




Чтобы приблизиться к вашему примеру с градиентами, вы также можете
анимировать размер:



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff
12.25%, #800080 31.25%, #b300b3 50%) top right/400% 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate linear;
}

@keyframes colorChange {
  from {
    background-position:top 0 left 33%;
    background-size:400% 200%;
  
  }
  50% {
    background-position:top center;
    background-size:200% 200%;
  }
  to {
    background-position:top 0 right 33%;
    background-size:400% 200%;
  }
}

  Shine




Вы также можете сделать ту же анимацию с учетом псевдоэлемента и
transform, чтобы иметь лучшую производительность:    



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  overflow:hidden;
  position:relative;
  z-index:0;
}
#shine-div:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:400%;
  height:200%;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff
12.25%, #800080 31.25%, #b300b3 50%);
  animation: colorChange 5s infinite alternate linear;
}

@keyframes colorChange {
  from {
    transform:translateX(-50%);
  }
  50% {
    transform:scaleX(0.75) translateX(-50%)
  }
  to {
    transform:translateX(-25%);
  }
 }

  Shine



Ответ 2

Решение SVG

Все фильтры, градиенты, маски, клипы пришли в CSS из SVG. Поэтому необходимо добавить
решение c SVG градиентами.  

Всё в принципе повторю из css решения, те же цвета в stop-color, те же проценты в
stop offset, но анимация получается более мощной и зрелищной.   

Горизонтальное перемещение градиента   

Анимация достигается изменением значения параметра fx радиального градиента, отвечающего
за горизонтальную координату центра градиента. 

Запуск анимации - клик по прямоугольнику




  
  





Атрибут keyTimes обеспечивает неравномерность движения, количество значений должно
равняться количеству значений в атрибуте values  Подробнее здесь.

  values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"


Вертикальная анимация градиента 

В этом случае анимируется fy  




  
  





Анимация по диагонали  

Анимируются одновременно оба параметра fx, fy




  
  





Анимация по наведению курсора  

Условие запуска анимации:   begin="rect1.mouseover"   





  
  

Линейный градиент , как делаются чёткий градиент по схеме?

#css3 #градиент

Вопрос с mail.ru но меня заинтересовало именно реализация ! 

Каким образом можно реализовать такой градиент :



я пытался так но получается размытый градиент: 



html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(45deg, red 20%, yellow 20%, red 30%, yellow 30%);
}




Как это реализовать правильно согласно схеме ?
    

Ответы

Ответ 1

Чтобы краница была чёткой, надо одну и ту же позицию указать дважды подряд:



html, body {
  margin: 0;
  height: 100%;
  background: linear-gradient(45deg, white 20%, black 20%, black 30%, white 30%);
}




Чтобы чуть улучшить сглаживание для произвольных углов, можно добавить 1px:



html, body {
  margin: 0;
  height: 100%;
  background: linear-gradient(45deg, white 20%, black calc(20% + 1px), black 30%,
white calc(30% + 1px));
}




А чтобы эта штука повторялась, надо использовать repeating-linear-gradient:



html, body {
  margin: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, white, white 10%, black 10%, black 20%);
}






html, body {
  margin: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, white, white calc(10% - 1px), black
10%, black calc(20% - 1px), white 20%);
}


Ответ 2

В вашем случае вы тянете градиент под углом 45 градусов, до 20% красный, от 20% до
30% желто красный(вот тут как раз перелив) от 30% желтый. А вам надо например: под
углом 45 градусов, красный до 25%, желтый от 25%, желтый до 50%,  красный от 50%, красный
до 75%, желтый от 75%, понимаете?) вот так:



html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(45deg, red 25%, yellow 25%, yellow 50%, red 50%, red
75%, yellow 75%);
}




То есть цвет должен быть как бы встык, участок от желтого к желтому, потом в тот
же период от красного к красному, нельзя на разных размерах ставить разный цвет - от
этого получается перелив. Это если полоски хотите получить.


Ответ 3

Попытки удались  , реализация 



html,body{
  margin:0;
  padding:0;
  height:100%;
  background:linear-gradient(
45deg, 
black  5%, yellow 0%,
yellow 10%, black 0%,
black 15%,  yellow 0%,
yellow 20%, black 0%,
black 25%,  yellow 0%,
yellow 30%, black 0%,
black 35%,  yellow 0%,
yellow 40%, black 0%,
black 45%,  yellow 0%,
yellow 50%, black 0%,
black 55%,  yellow 0%,
yellow 60%, black 0%,
black 65%,  yellow 0%,
yellow 70%, black 0%,
black 75%,  yellow 0%,
yellow 80%, black 0%,
black 85%,  yellow 0%,
yellow 90%, black 0%,
black 95%,  yellow 0%,
yellow 100%, black 0%);

}

Круглый ProgressBar с 4 цветами (неплавный градиент)

#java #android #progress_bar #градиент

Update: залил новый скриншот, от 0 до 165 у нас круг закрашен, прогресс равен ~ 45%,
остальная часть тусклыми цветами

Есть ли возможность сделать progressbar с 4 цветами? По сути это градиент, но вот
только у тэга gradient нет параметров, позволяющих сделать строго разграниченные цвета
(знаю, что в api 24 такое вроде можно сделать, но мне нужно с api 15 и выше). Для прогресса
использую shape ring:


    
        
    



Заранее спасибо.
    

Ответы

Ответ 1

Путаетесь в терминологии - это раздражает многих, но не меня :-)
(Просьбы о не плавном градиенте равнозначны мольбам о квадрате но без углов)

Видимо вам нужны не градиенты а круговые диаграммы ну а дальше берите любую за основу
и изменяйте в нужном вам направлении; присмотритесь например к MPAndroidChart, как
вам верно подсказал @pavlofff в комментарии.

Полупрозрачный градиент фонового изображения

#css #css3 #градиент

Возможно ли средствами CSS изменить прозрачность фонового изображения (background-image)
линейно, при помощи градиента. Именно прозрачность, а не наложение цвета сверху, дабы
получить «смешивание» наложенных друг на друга изображений с указанием положения начала
(100% видимость) и положения окончания (0% видимость) градиента? Либо другие не громоздкие
варианты получения схожего результата.
    

Ответы

Ответ 1

Use the mask, Luke!



div {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 256px; height: 256px;
}
#left {
  background: url("https://www.rwsfl.org/wp-content/uploads/2015/06/N2-256x256.jpg");
}
#right {
  background: url("https://pbs.twimg.com/profile_images/633782900077408256/F541mrSs_400x400.jpg");
  -webkit-mask: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
}

#originalLeft {
  top: 400px;
  background: url("https://www.rwsfl.org/wp-content/uploads/2015/06/N2-256x256.jpg");
}
#originalRight {
  top: 400px;
  left: 300px;
  background: url("https://pbs.twimg.com/profile_images/633782900077408256/F541mrSs_400x400.jpg");
}








Поддержка достаточно неплохая, но неполная на момент ответа.


Ответ 2

Я предлагаю использовать SVG для этих целей


Первый шаг — создаём некий квадрат который применим для маски к второму изображению.
В генераторе Inkscape сгенерим filter.
Применим этот filter к нашему квадрату.
Для самого высокого изображения ни каких фильтров кроме параметра width и height
и для обоих изображений preserveAspectRatio="none"
Для изображения которое на половину видно применяем как маску наш rect и располагаем
ниже чем прошлое изображение и в итоге получаем это:









Естественно что маски и фильтры надо располагать между тегами defs и тот слой что
ниже на самом деле выше, это работает как z-index в CSS.

Не будет работать в Edge и IE.

Можно ли избавиться от полос работая с радиальным или другим видом градиента?

#css #градиент

Я понимаю причину возникновения данной проблемы, но можно ли каким-то образом обойти
этот момент при увеличении прозрачности?



body {
margin: 0;
padding: 0;
background: #333;
}
div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle farthest-side at 50% 100%, #fff, transparent);
opacity: .1;
}






    

Ответы

Ответ 1

Можно, если увеличить "промежуток" между двумя цветами. Иными словами, выбрать такие
цвета, разница между которыми будет большая.

К тому же, данную проблему разные мониторы видят по разному. На обычных @1 мониторах
менее заметно, на ретине больше. На мониторе с плотностью пикселей выше ретины оно
вовсе ужастно заметно.

Пример ниже, в разы сглаженнее (даже на retina), так как имеет более широкий диапозон:
#555 -> #111


body {
margin: 0;
padding: 0;
}
div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle farthest-side at 50% 100%, #555, #111);
opacity: 1;
}





В текущем контейнере он выглядит хорошо. Но если увеличить контейнер до такого порога,
пока количество "промежуточных цветов" закончатся, то градиент сново будет иметь полоски.

Альтернативное решение

В вашем случае, если имеется фон и на него нужно наложить прозрачно-белую плешку,
то можете воспользоваться box-shadow.


Ответ 2

Обойти нельзя, это связано с ограничениями цветопередачи, количество градаций серого
ограничено цветовым пространством sRGB и их не хватает для каждого пикселя на экране.

Несколько цветов для заполнения stroke по окружности

#javascript #html #css #svg #градиент

Я хочу создать радугу по окружности, как на рисунке ниже.     



Но как мне нарисовать изогнутый и многоцветный градиент?    

Вот мой текущий код:    








Перевод вопроса: svg multiple color on circle stroke
    

Ответы

Ответ 1

Такое возможно при помощи полифилла conic-gradient Лии Веру.



.circle {
  background: conic-gradient(#f00, #ff00bd, #0020ff, #00f3ff, #00ff08, #fff700, #f00);
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: relative;
}

.circle:after {
  position: absolute;
  content: "";
  left: 20px;
  top: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background: #fff;
  border-radius: 50%;
}






Ответ 2

Такой подход не будет работать. SVG не имеет конических градиентов. Чтобы имитировать
эффект, вам нужно было бы подделать его большим количеством маленьких отрезков. Или
применить какую-то другую, подобную технику.  

Update:

Вот пример. Я аппроксимирую 360deg оттенками на шести отрезках, созданными  path's.
 Каждый path содержит дугу, которая покрывает 60 градусов окружности.  Я использую
linear gradient для интерполяции цвета от начала до конца каждого пути.     

Это не идеально (вы можете увидеть некоторые разрывы, где цвета встречаются), но
это не заметит большинство людей. Вы можете увеличить точность, используя более шести
сегментов.     



 


    

Пример на fiddle   

Update 2:

Для вариантов, с шестью и более сегментами, есть решение на javascript, которое будет
создавать круг с любым количеством сегментов.   



function makeColourWheel(numSegments)
{
    if (numSegments <= 0)
        numSegments = 12;
    if (numSegments > 360)
        numSegments = 360;

    var  svgns = xmlns="http://www.w3.org/2000/svg";
    var  svg = document.getElementById("colourwheel");
    var  defs = svg.getElementById("defs");
    var  paths = svg.getElementById("paths");

    var  radius = 100;
    var  stepAngle = 2 * Math.PI / numSegments;

    var  lastX = 0;
    var  lastY = -radius;
    var  lastAngle = 0;
    
    for (var i=1; i<=numSegments; i++)
    {
        var  angle = i * stepAngle;

        // Calculate this arc end point
        var x = radius * Math.sin(angle);
        var y = -radius * Math.cos(angle);
        // Create a path element
        var arc = document.createElementNS(svgns, "path");
        arc.setAttribute("d", "M " + lastX.toFixed(3) + "," + lastY.toFixed(3)
                              + " A 100,100 0 0,1 " + x.toFixed(3) + "," + y.toFixed(3));
        arc.setAttribute("stroke", "url(#wheelseg" + i + ")");
        // Append it to our SVG
        paths.appendChild(arc);
        
        // Create a gradient for this segment
        var grad = document.createElementNS(svgns, "linearGradient");
        grad.setAttribute("id", "wheelseg"+i);
        grad.setAttribute("gradientUnits", "userSpaceOnUse");
        grad.setAttribute("x1", lastX.toFixed(3));
        grad.setAttribute("y1", lastY.toFixed(3));
        grad.setAttribute("x2", x.toFixed(3));
        grad.setAttribute("y2", y.toFixed(3));
        // Make the 0% stop for this gradient
        var stop = document.createElementNS(svgns, "stop");
        stop.setAttribute("offset", "0%");
        hue = Math.round(lastAngle * 360 / Math.PI / 2);
        stop.setAttribute("stop-color", "hsl(" + hue + ",100%,50%)");
        grad.appendChild(stop);
        // Make the 100% stop for this gradient
        stop = document.createElementNS(svgns, "stop");
        stop.setAttribute("offset", "100%");
        hue = Math.round(angle * 360 / Math.PI / 2);
        stop.setAttribute("stop-color", "hsl(" + hue + ",100%,50%)");
        grad.appendChild(stop);
        // Add the gradient to the SVG
        defs.appendChild(grad);

        // Update lastx/y
        lastX = x;
        lastY = y;
        lastAngle = angle;
    }
}


makeColourWheel(60);





Перевод ответа: svg multiple color on circle stroke @Paul LeBeau


Ответ 3

Пожалуй, оставлю это здесь... В Интернете вопрос до сих пор актуален.

SVG:

+ Масштабируемость;
+ Возможность анимации;
+ Малый объём и понятность кода.

Canvas:

+ Масштабируемость;
+ Возможность анимации;
– Объём кода больше, расчёты сложнее.

CSS:

+ Нативный код, без привлечения новых технологий;
– Масштабируемость и анимация затруднительна;
– Непрозрачность внутренней части круга.



/*************
 *    SVG    *
 ************/
var oView = document.getElementById('svg'),
  nHue = 360,
  oCircle,
  nAngle;
while (nHue--) {
  nAngle = nHue * Math.PI / 180;
  oCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  oCircle.setAttribute('cx', 50 - Math.sin(nAngle) * 45);
  oCircle.setAttribute('cy', 50 - Math.cos(nAngle) * 45);
  oCircle.setAttribute('r', '5');
  oCircle.setAttribute('fill', 'hsl(' + nHue + ', 100%, 50%)');
  oView.appendChild(oCircle);
}

/**************
 *   CANVAS   *
 *************/
var cnv = document.getElementById('cnv');
var ctx = cnv.getContext('2d');
var nCY = cnv.height / 2;
var nCX = cnv.width / 2;
var nR = cnv.width / 2;
var nHues = 360;
while (nHues--) {
  nStartCX = nCX + (Math.cos(nHues * Math.PI / 180) * nR * 0.8);
  nStartCY = nCY + (Math.sin(nHues * Math.PI / 180) * nR * 0.8);
  nStopCX = nCX + (Math.cos((nHues + 2) * Math.PI / 180) * nR * 0.8);
  nStopCY = nCY + (Math.sin((nHues + 2) * Math.PI / 180) * nR * 0.8);
  nStartDX = nCX + (Math.cos(nHues * Math.PI / 180) * nR);
  nStartDY = nCY + (Math.sin(nHues * Math.PI / 180) * nR);
  nStopDX = nCX + (Math.cos((nHues + 2) * Math.PI / 180) * nR);
  nStopDY = nCY + (Math.sin((nHues + 2) * Math.PI / 180) * nR);
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(nStartCX, nStartCY);
  ctx.lineTo(nStartDX, nStartDY);
  ctx.lineTo(nStopDX, nStopDY);
  ctx.lineTo(nStopCX, nStopCY);
  ctx.fillStyle = 'hsl(' + nHues + ', 100%, 50%)';
  ctx.fill();
  ctx.closePath();
}
ctx.restore();
/*************
 *    CSS    *
 *************/

.rgb {
  border-radius: 50%;
  position: relative;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255,
255, 255, 1) 56%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%), /* white
hole */
  linear-gradient(10deg, rgb(255, 0, 0) 0%, rgba(255, 0, 0, 0) 40%), /* red */
  linear-gradient(70deg, rgb(255, 255, 0) 0%, rgba(255, 255, 0, 0) 50%), /* yeloow */
  linear-gradient(130deg, rgb(0, 255, 0) 0%, rgba( 0, 255, 0, 0) 45%), /* gren */
  linear-gradient(190deg, rgb(0, 255, 255) 0%, rgba(0, 255, 255, 0) 50%), /* cyan */
  linear-gradient(250deg, rgb(0, 0, 255) 0%, rgba(0, 0, 255, 0) 50%), /* blue */
  linear-gradient(310deg, rgb(255, 0, 255) 0%, rgba(255, 0, 255, 0) 50%)/* magenta */
  ;
}

canvas,
svg,
div {
  display: inline-block;
  height: 180px;
  width: 180px;
}

pre {
  top: 55px;
  position: absolute;
  font: bold 26px monospace;
  text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.75);
}



    SVG       Canvas       CSS


Ответ 4

Добавлю перевод моего ответа на похожий вопрос в английской версии: https://stackoverflow.com/a/58399254/1566316
с дополнением.

Можно использовать преобразование центральной проекции (перспективы) над прямоугольниками
с линейным градиентом, сжав их в треугольники по одной стороне с помощью transform:matrix3d
или rotate3d и perspective в css.

Если четвёртый параметр matrix3d не равен нулю, он задаёт обратное (1/x) значение
кординаты точки схода перспективы на оси х линии горизонта. Тринадцатый параметр смещает
прямоугольник по горизонтали. Хотя и допустимо использовать calc в матрице, она не
работает с единицами измерения, поэтому при масштабировании работа matrix3d сбивается
и использовтать её получается только в svg и только в Firefox, так как в svg в Chromium
не поддерживаются параметры, ответсвенные за перспективу (4, 8). Однако в последнем
уже есть conic-gradient, хотя его нельзя применить к любому элементу svg, а только
к foreignObject. Как работает свойство tranform-origin в svg мне так и не удалось разобраться,
поэтому элементы матрицы частично подобраны наугад.

SVG версия цветового круга.








Контрольные точки градиента получены по следующей формуле (из геометрии прямоугольного
треугольника со сторонами 350х200):

0.5 ± tan(v/255.*pi/3)/350*100.


где v - значение изменяющегося цветового канала.

SVG версия кольца.








В HTML можно использовать transform:rotate3D. Расположив точку зрения очень близко
к прямоугольнику можно получить почти треугольник.



*{
    margin:0;
    padding:0;
}
.c{
   height:90vmin;
   width:90vmin;
   margin:5vmin;
   overflow: hidden;
   border-radius:50%;
   position:absolute;
}
.c>div{
   position:relative;
   height:180vmin;
   width:100vmin;
   perspective: 0.40vmin;
   top:-45vmin;
   left:-4.8vmin;
}
.c>div>div{
   height: 100%;
   width: 100%;
   left:0;
   top:1%;
   height: 98%;
   transform-origin:99.98% 50%;
   position:relative;
   transform: rotate3d(0, 1, 0, -80deg);
   border:black;
}
#YM>div{
   background:linear-gradient(#ef08,#ff0 0.5%,#fc0 18.27%,#f90 29.24%,#f60 37.28%,#f00
50%,#f06 62.72%,#f09 70.76%,#f0c 81.73%,#f0f 99.5%,#e0f8);
}
#MC{
   transform: rotateZ(120deg);
}
#CY{
   transform: rotateZ(-120deg);
}
#MC>div{
   background:linear-gradient(#f0e8,#f0f 0.5%,#c0f 18.27%,#90f 29.24%,#60f 37.28%,#00f
50%,#06f 62.72%,#09f 70.76%,#0cf 81.73%,#0ff 99.5%,#0fe8);
}
#CY>div{
   background:linear-gradient(#0ef8,#0ff 0.5%,#0fc 18.27%,#0f9 29.24%,#0f6 37.28%,#0f0
50%,#6f0 62.72%,#9f0 70.76%,#cf0 81.73%,#ff0 99.5%,#fe08);
}

Внутренняя тень градиентом

Здравствуйте!
Мне нужно сделать внутреннюю тень у блока, но что бы она была под углом 45deg
Я пробовал такое сделать обычной тенью, но оно не так выглядит, как надо:
.shadow { width: 250px; height: 250px; box-shadow: inset 0px 0px 50px #000; }

Мне пришла в голову идея: сделать тень градиентом. Но я не знаю как.
Пример нужной тени:

Ответ

Предлагаю попробовать background
body { margin: 0; display: flex; } div { width: 100vmin; height: 100vmin; margin: auto; background: linear-gradient(45deg, transparent 70%, black 100%), linear-gradient(-45deg, transparent 70%, black 100%), linear-gradient(-135deg, transparent 70%, black 100%), linear-gradient(135deg, transparent 70%, black 100%) }