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
Disabilitare automaticamente un workflow di GitHub
Eseguire una query su SQL Azure tramite un workflow di GitHub
Applicare un filtro per recuperare alcune issue di GitHub
.NET Conference Italia 2024
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Miglioramenti nell'accessibilità con Angular CDK
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
C# 12: Cosa c'è di nuovo e interessante
Gestire domini wildcard in Azure Container Apps
Utilizzare le collection expression in C#
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare database e servizi con gli add-on di Container App
I più letti di oggi
- Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
- Utilizzare il TransferControl in Windows Phone
- Gestione dei token negli input di testo con la Universal Windows Platform
- Dare temporaneamente accesso ad un blob di Azure Storage
- Impostare le policy CORS con Azure API Management
- Utilizzare database e servizi con gli add-on di Container App
- Utilizzare HttpModule in modalità asincrona
- Indicizzare i Blob Storage con Azure Search
- Creazione di StateTrigger personalizzati in Universal Windows Platform
- Modificare i criteri della clausola Where del LinqDataSource di ASP.NET