Prendete il menu principale del sito di Apple. àˆ fatto con tecniche oggi stra-sperimentate: una bella lista non ordinata, CSS, uso di sprites e quindi immagini.
Possiamo rifinirlo aggiungendo un bell'effetto di transizione basato sulle CSS Transitions. Se avete un browser che le supporta, potete vedere il risultato qui.
Ma John Allsopp ha voluto fare un ulteriore passo in avanti: replicare l'effetto di transizione ma senza usare immagini. Il risultato lo trovate in fondo a questo articolo.
Magia? No, semplicemente CSS3. Un pizzico di angli arrotondati, una spruzzata di gradienti, un'aggiunta di ombreggiature, il tocco finale con le transizioni.
Il tutorial è da leggere tutto. L'ennesima applicazione esemplare del concetto di progressive enhancement (si vedano al riguardo gli screenshot con la resa del menu sui browser che non supportano le funzionalità utilizzate).
/https://www.html.it/app/uploads/2024/04/css.png)
/https://www.html.it/app/uploads/2024/01/cssday.png)
/https://www.html.it/app/uploads/2023/10/cssday2024.png)