Come faccio a fare il mio colore di sfondo cominciare da azzurro a poco a poco diventano blu scuro?

voti
-1

Mi piacerebbe davvero sapere come creare questo effetto in Javascript, dove lo sfondo sfumato cambia radialmente. Come fanno a fare questo?

entrare

È pubblicato 09/10/2015 alle 08:25
fonte dall'utente
In altre lingue...                            


3 risposte

voti
1

Non hai bisogno di javascript in questo lavoro, basta usare i CSS radial-gradient

#grad {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #474747, #999); /* Standard syntax */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="grad"></div>
</body>
</html>

Risposto il 09/10/2015 a 08:32
fonte dall'utente

voti
1

Con ColorZilla è possibile generare il seguente, che è compatibile con quasi tutti i browser:

.gradient-class
{
  background: #7db9e8; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #1e5799 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7db9e8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* IE10+ */
  background: radial-gradient(ellipse at center, #7db9e8 0%,#1e5799 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Risposto il 09/10/2015 a 08:33
fonte dall'utente

voti
0

Spero che questo sarà utile

<div class="abc">
</div>

.abc{
 width:200px;
 height:200px;
 display:inline-block;
background: rgba(73,155,234,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(32%, rgba(73,155,234,1)), color-stop(60%, rgba(32,124,229,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
}

jsfiddle

Risposto il 09/10/2015 a 08:35
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more