Utilizzare CSS per creare un pulsante immagine
Prerequisiti
• Accesso a Vuforia Studio
• Un file immagine
Passi
1. Aprire Vuforia Studio e creare un nuovo progetto Dispositivo mobile.
2. Trascinare e rilasciare un widget Pulsante nell'area di lavoro. Nel riquadro DETTAGLI, cancellare il campo Testo.
3. Fare clic su
accanto a
RISORSE nel riquadro
PROGETTO per aggiungere il file immagine all'esperienza. In questo esempio useremo un'immagine per l'azione Riproduci.
4. Nel riquadro PROGETTO, fare clic su Applicazione in STILI.
Viene visualizzato l'editor degli stili dell'applicazione, dove si definiscono le classi CSS.
5. Nell'editor, immettere quanto segue:
.image-button, .image-button.activated {
background: rgba(0,0,0,0.0);
border-style: none;
background-repeat: no-repeat;
background-position: center;
}
.image-button.activated {
-webkit-filter: opacity(30%) drop-shadow(1px 1px 0px grey);
}
.image, .image.activated {
background-image: url(#{$resources}/Uploaded/play.png);
}
| Sostituire play.png con il nome del file immagine. |
6. Dopo aver definito le classi CSS, fare clic su Salva. Al termine del salvataggio, fare clic su Home in VISTE per tornare all'area di lavoro.
7. Selezionare il pulsante nell'area di lavoro. Nel riquadro DETTAGLI, inserire quanto segue nel campo Classe:
image-button image
In questo modo vengono applicate le classi image-button e image al pulsante.
