Autore Topic: CSS3 con Gambas: un esempio  (Letto 1498 volte)

Offline vuott

  • Moderatore globale
  • Senatore Gambero
  • *****
  • Post: 11.179
  • Ne mors quidem nos iunget
    • Mostra profilo
CSS3 con Gambas: un esempio
« il: 10 Dicembre 2012, 00:08:04 »
Il protocollo CSS3 funziona perfettamente in modo integrato con Gambas. Vediamo un esempio di semplice animazione:

* attiviamo il componente gb.qt4.webkit

* inseriamo nel form l'oggetto WebView

* creiamo un file con estensione html, che chiameremo h.html, e nel quale inseriremo il seguente codice:
Codice: html [Seleziona]
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:50px;
height:50px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>


* inseriamo il file h.html nella cartella "Dati" del progetto Gambas;

* inseriamo nel progetto gambas il seguente codice:
Codice: gambas [Seleziona]

  Public Sub Form_Open()

    WebView1.Url = "h.html"

  End


Quindi lanciamo il progetto......
« Ultima modifica: 10 Ottobre 2016, 10:36:01 da Gianluigi »
« Chiunque, non ricorrendo lo stato di necessità, nel proprio progetto Gambas fa uso delle istruzioni Shell o Exec, è punito con la sanzione pecuniaria da euro 20,00 a euro 60,00. »

Offline sotema

  • Maestro Gambero
  • ****
  • Post: 467
    • Mostra profilo
Re: CSS3 con Gambas: un esempio
« Risposta #1 il: 10 Dicembre 2012, 08:24:54 »
Carino.
 :)
L'uomo ha inventato la bomba atomica, ma nessun topo al mondo costruirebbe una trappola per topi.
Albert Einstein

Offline Michy9393

  • Gran Maestro dei Gamberi
  • *****
  • Post: 570
  • Ubuntu: Linux for Human Beings
    • Mostra profilo
Re: CSS3 con Gambas: un esempio
« Risposta #2 il: 30 Gennaio 2013, 10:00:47 »
Utile :) Grazie!

Offline vuott

  • Moderatore globale
  • Senatore Gambero
  • *****
  • Post: 11.179
  • Ne mors quidem nos iunget
    • Mostra profilo
Re: CSS3 con Gambas: un esempio
« Risposta #3 il: 22 Luglio 2014, 00:25:13 »
In quest'altro caso avremo l'area dell'oggetto WebView interessata da un effetto di passaggio sfumato da bianco all'azzurro:
Codice: gambas [Seleziona]
Public Sub Form_Open()

 WebView1.html = "<html><head>" &
  "<style type=\"text/css\">" &
  "body {" &
  "background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #AACFEF 100%);" &
  "background-repeat: repeat-x;" &
  "}</body>" &
  "</style></head></html>"

End
« Ultima modifica: 10 Ottobre 2016, 10:34:24 da Gianluigi »
« Chiunque, non ricorrendo lo stato di necessità, nel proprio progetto Gambas fa uso delle istruzioni Shell o Exec, è punito con la sanzione pecuniaria da euro 20,00 a euro 60,00. »