Immagine che.. lampeggia

**Deathlok92** · 19-06-2014, 21:33

Salve,

Ho una immagine che è assemblata da tre file png, praticamente un png funziona come sfondo, uno è un contenitore e l'altro è un punto esclamativo.

Adesso quello che voglio fare è lo sfondo e il contenitore rimangono invariati, ma il punto esclamativo lampeggia cambiando colore. Ho a disposizione tre immagini del punto esclamativo, una grigia, una un po' più chiara e una gialla... E' possibile farlo solo con i CSS? O devo ricorrere a Javascript per forza di cose? Ovviamente lampeggia in automatico, cioè non voglio fare un qualcosa on "hover".

Grazie mille

**carlomarangoni** · 19-06-2014, 22:38

non faresti prima con una gif animata?

**Deathlok92** · 20-06-2014, 00:24

Uhm ci sto provando.. ma ho problemi con la trasparenza dell'immagine

L'animazione funziona correttamente, ho salvato l'immagine con photoshop e ovviamente con la trasparenza attivata.. ma questo è il risultato...

Non saprei come risolvere U.u

**carlomarangoni** · 20-06-2014, 00:30

allega le immagini che prova io a fare una gif animata!
Il lampeggio deve essere veloce, lento, esempio 4 cambi di immagine al secondo?

**Deathlok92** · 20-06-2014, 00:53

L'effetto che voglio ottenere è all'incirca questo http://hwtraders.altervista.org/images/alert1.gif

Adesso ho impostato l'alone dello stesso colore dello sfondo del sito su cui lo uso... ovviamente è una soluzione poco versatile, perchè se cambio sfondo devo rimettere mano a photoshop U.u

Immagini: image.zip

**carlomarangoni** · 20-06-2014, 14:49

Scusa se non ho ancora capito bene! Mi sembra che l'esempio che hai postato funziona bene! Cosa vorresti di diverso?

**Deathlok92** · 20-06-2014, 15:00

Uhm vedi nell'esempio tutto quell'alone grigio? Quello che si vede bene nell'immagine del post precedente, ecco quell'alone l'ho impostato io sul grigio tramite "Alone" di Photoshop, si potesse lasciarlo trasparente in modo che si adegui a tutti gli sfondi senza dover impostarlo ogni volta non mi dispiacerebbe

**KillerWorm** · 20-06-2014, 15:54

Ciao, l'alone biancastro è dovuto al fatto che la trasparenza si fonde con un dato colore di sfondo (propriamente definito "Alone" o "Matte" in inglisc). Chiaramente le gif permettono di applicare la trasparenza ad un unico colore (per il quale si ha una trasparenza del 100%). Quando esporti da un file png, tutti i pixel che hanno una trasparenza intermedia (diversa dal 100%) saranno rielaborati fondendosi col colore impostato come Alone.
Quando salvi/esporti come gif, dovresti impostare appunto l'opzione "Alone" (Matte), ad esempio sul colore nero (o sul presunto colore in cui dovrai piazzare la tua gif).

Ad ogni modo puoi fare un'animazione in css, come hai chiesto.

Ecco un esempio funzionante da cui puoi prendere spunto (ho usato le immagini da te allegate):

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      body{
        background: #000;
      }
      @keyframes blink {
        from {opacity: 0;}
        to {opacity: 1;}
      }
      @-webkit-keyframes blink {
        from {opacity: 0;}
        to {opacity: 1;}
      }
      .blink {
        margin: 50px auto;
        position: relative;
        background: url("image1.png") no-repeat;
        width: 80px;
        height: 80px;
      }
      .blink>img {
        position: absolute;
        left: 21px;
        top: 25px;
      }
      .blink>img:last-child {
        animation: blink 2s infinite alternate;
        -webkit-animation: blink 2s infinite alternate;
      }
    </style>
  </head>
  <body>
    <div class="blink"><img src="Image%2094.png" alt=""><img src="Image%2079.png" alt=""></div>
  </body>
</html>

Giusto per schiribizzo ho provato anche a ricreare in modo testuale il punto interrogativo, utilizzando un font google e qualche effetto ombra. Può essere interessante perché in questo modo si può inserire un qualsiasi carattere/testo per creare delle label:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Exo+2:800' rel='stylesheet' type='text/css'>
    <style type="text/css">
      body{
        background: #000;
      }
      @keyframes blink {
        from {
          color: rgba(200,200,200,.4);
          text-shadow: 0 2px 3px rgba(0,0,0,.8), 0 0 0 rgba(255,255,255, .7);
        }
        to {
          color: rgba(255,200,0,.7);
          text-shadow: 0 2px 2px rgba(0,0,0,.6), 0 0 2px rgba(255,255,100, 1);
        }
      }
      @-webkit-keyframes blink {
        from {
          color: rgba(200,200,200,.4);
          text-shadow: 0 2px 3px rgba(0,0,0,.8), 0 0 0 rgba(255,255,255, .7);
        }
        to {
          color: rgba(255,200,0,.7);
          text-shadow: 0 2px 2px rgba(0,0,0,.6), 0 0 2px rgba(255,255,100, 1);
        }
      }
       
      .b1{background: url("image1.png") center 0;}
      .b2{background: url("image2.png") center -263px;}
      .b3{background: url("image3.png") center -263px;}
      
      .blink {
        color: #fc0;
        margin: 20px auto;
        background-repeat: no-repeat;
        width: 80px;
        height: 80px;
        font-family: 'Exo 2', sans-serif;
        font-size: 22px;
        text-align: center;
        padding-top: 23px;
        animation: blink 2s infinite alternate;
        -webkit-animation: blink 2s infinite alternate;
      }
      
      /* altri gingilli vari */
      @-webkit-keyframes hover, @keyframes hover {
        from {
          color: rgba(255,255,255,.6);
          text-shadow: 0 0 2px #000;
        }
        to {
          color: rgba(255,255,255,1);
          text-shadow: 0 0 2px #000;
        }
      }
      @-webkit-keyframes hover {
        from {
          color: rgba(255,255,255,.6);
          text-shadow: 0 0 2px #000;
        }
        to {
          color: rgba(255,255,255,1);
          text-shadow: 0 0 2px #000;
        }
      }
      .blink:hover {
        color: #fff;
        cursor: pointer;
        animation: .2s hover 1 normal forwards;
        -webkit-animation: .2s hover 1 normal forwards;
      }

    </style>
  </head>
  <body>
    <div class="blink b1">!</div>
    <div class="blink b2">!</div>
    <div class="blink b2">A</div>
    <div class="blink b3">˖◊˖</div>
    <div class="blink b1">ʚĭɞ</div>
  </body>
</html>

**carlomarangoni** · 20-06-2014, 16:36

0000.gif

**Deathlok92** · 20-06-2014, 21:09

Ok, grazie mille

Ma usare i keyframe presenta grossi problemi di compatibilità con i browser un po' datati?

Discussione: Immagine che.. lampeggia

Strumenti discussione

Ricerca discussione

Visualizza

Immagine che.. lampeggia

Permessi di invio