roixxv
@roixxv
Плод времени.

Как сделать чтобы css код показывал одинаково в разных браузерах?

Доброго времени суток!
у меня проблема в коде, он показывает в браузере google chrome нормально но вот в сафари и в остальных браузерах не как в google chrome.
вот результат в гугле дождь льет: 5e6c52177c64f846175023.png

а вот в SAFARI просто покрыт серебристым прозрачным фоном как цвет самой капли дождя: 5e6c525abfa8f005132214.png

А ВОТ САМ КОД :
html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  
  --s:2px 8px; /* размер капли*/
  --c:#ffffff14;    /* цвет капли*/
  --a:-7deg;   /* градус*/
  --w:53px;    /* ширина */
  --h:55px;    /* толщина */
  
   --rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before,
html:after{
  content:"";
  position:fixed;
  bottom:0;
  right:-20%;
  left:-20%;
  height:calc(100% + var(--h) + 10px); 
  background:
     var(--rad) -12px 3px,
     var(--rad) 17px 0,
     var(--rad) 6px  12px,
     var(--rad) 24px 23px,
     var(--rad) 39px 30px,
     var(--rad) 5px  43px;
  background-size:var(--w) var(--h);
  animation:DOJD 0.2s linear infinite;
  transform:skew(var(--a));
}
html:after {
   --h:70px;
   --w:61px;
}
@keyframes DOJD{
  to {
     transform:skew(var(--a)) translateY(var(--h));
  }
}


P.S помогите сделать так чтобы результат был как в GOOLE CHROME на всех браузерах.
  • Вопрос задан
  • 167 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Замените значение переменной --rad на это:

--rad: radial-gradient(var(--s), var(--c) 0%, rgba(255, 255, 255, 0) 100%)

И заработает:



5e6c7a3a690c4922881817.png
5e6c7acdbde2a749617368.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@topalek
Переменные надо описывать в элементе :root.
:root{
--some-var: 3px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы