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
Utilizzare Container Queries nominali
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Fornire parametri ad un Web component HTML
Testare il failover sulle region in Azure Storage
Utilizzare WhenEach per processare i risultati di una lista di task
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Ottimizzare le performance usando Span<T> e il metodo Split
Gestire codice JavaScript con code splitting e lazy loading
Utilizzare DeepSeek R1 con Azure AI
Creare una libreria CSS universale: Nav menu
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!