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
Continuous Deployment tramite GitOps
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript
Taggare le query create con EF Core con informazioni di debug sul codice
Utilizzare la parola chiave var con lambda eExpression e method group in C# 10
Parallelizzare le chiamate HTTP con async/await e le Promise in JavaScript
Introduzione alla security con GitHub
Utilizzare la keyword with in JavaScript
Generare le release note automaticamente tramite una GitHub Action
Definire una tabella come memory optimized su Sql Server tramite EF Core
Monitorare metriche delle risorse Azure con Load Testing
Le novità di .NET 7 e C# 11
GitHub Actions e Terraform: l'infrastruttura, dalla definizione al deploy
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
- .NET Conference Italia 2022 - Milano e Online
- Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript