Quando sviluppiamo un'app Windows 8 abbiamo a disposizione due toolbar (una superiore e una inferiore) all'interno delle quali posizioniamo dei pulsanti che hanno uno stile ben preciso che lo stesso WinRT ci mette a disposizione. I bottoni sono rotondi, con un'icona dentro e un testo sotto. In questo script vedremo come ricreare lo stesso stile usando solamente HTML e CSS.
Per prima cosa dobbiamo dichiarare un bottone.
<button>Salva</button>
Una volta creato il bottone, da CSS ne impostiamo altezza e larghezza e successivamente ne impostiamo l'arrotondamento del bordo esattamente alla metà delle dimensioni così da ottenere un cerchio.Uuna volta fatto questo non ci resta che impostare un'immagine di sfondo e spostare il testo sotto il cerchio usando la proprietà CSS line-height. Tutto questo è fatto dal seguente codice CSS.
body{ background: #000; } button{ width: 50px; height:50px; border-radius: 25px 25px; border: solid 1px white; background: url(save.png) no-repeat 10px #000; color: white; line-height: 110px; }
L'inconveniente di questa tecnica è che se il testo del bottone è lungo e va su più linee, il line-height mostra la seconda riga molto in basso (su 110px) e quindi si devono cercare altre strade.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare un'applicazione React e configurare Tailwind CSS
Eseguire attività pianificate con Azure Container Jobs
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Linting di un Dockerfile con un workflow di GitHub
Utilizzare flat e flatMap per appiattire array innestati in array
Definire lo stile CSS in base alle dimensioni del container
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Evitare il flickering dei componenti nel prerender di Blazor 8
Gestire liste di tipi semplici con Entity Framework Core
Hosting di componenti WebAssembly in un'applicazione Blazor static
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser