Menu CSS – Menu a pulsanti

autore dell'articolo Andrea Leti - commenti a: Menu CSS – Menu a pulsanti 0 - Articoli simili li trovi in: CSS

Menu CSS – Menu a pulsanti

Oggi vediamo come creare un menu CSS a pulsanti. La caratteristica principale di un menu a pulsanti a differenza di un menu a blocchi sta nel principio grafico di profondità. Cosa voglio dire: avete presente un classico pulsante di windows?

I pulsanti di windows, e mi riferisco a quelli squadrati, hanno l’effetto ombra che permetta appunto di creare la ‘simulazione‘ di profondità.
L’HTML del menu a pulsanti è sempre un semplice elenco non ordinato:

<ul class="Menu">
     <li><a href="#">prima</a></li>
     <li><a href="#">seconda</a></li>
</ul>

Passiamo adesso ad esaminare le regole CSS:

.Menu{
width:250px;
margin:0;
padding:2px;
border:2px solid #999;
background:#CCC;
color:#000;
text-align:center;
font:weight:bold;
text-transform:uppercase;
}
.Menu li
{
list-style:none;
}
.Menu a{
display:block;
text-decoration:none;
border:1px solid;
border-color:#fff #666 #666 #fff;
padding:3px;
}
.Menu a:link, .Menu:visited
{
background:#ccc;
color:#000;
}
.Menu a:hover, .Menu a:focus, .Menu a:active{
background: #aaa;
color:#000;
}

Ho creato una pagina apposita per questo esempio: Menu CSS a Pulsanti

Provatelo e commentatelo! Al prossimo Menu!

Trova altri articoli con questi tag: , ,

 


Lascia un commento




Vuoi anche tu un avatar per i Blog Wordpress? Vai su Gravatar.com!
E' facile, veloce, Intuitivo! Personalizza i tuoi commenti! Fatti riconoscere!

ULTIMI ARTICOLI IN CSS

Il box model css – Css Zoom Il box model css – Css Zoom

Il box model è forse l’aspetto più importante dei css. Vediamo come è strutturato e come l’antipatico browser Internet explorer lo interpreta.

Come creare una cornice ad una foto con i CSS Come creare una cornice ad una foto con i CSS

Creare una cornice alle foto è sempre oggetto di discussione nei vari forum di grafica e webdesign di tutto il mondo, oggi lo facciamo con i CSS :)

Cambiare opacità degli oggetti con CSS3 Cambiare opacità degli oggetti con CSS3

Con le nuove specifiche CSS3 si può giocare con l’opacità degli oggetti rendendoli cosi semitrasmarenti a nostro piacimento. Vediamo come.

Utilizzare   font personali con i CSS3 Utilizzare font personali con i CSS3

Le specifiche CSS3 rendono il web davvero diverso e sempre più personalizzabile! Con le nuove, specifiche infatti si può giocare con l’opacità degli oggetti rendendoli cosi semitrasmarenti a nostro piacimento. Per utilizzare questo effetto CSS3 dobbiamo ricorrere alla regola opacity. Che ve lo dico a fare questo effetto css3 non funziona su Internet Explorer se [...]

Ombra sui testi con text-shadow CSS Ombra sui testi con text-shadow CSS

Con l’avvento dei CSS3, anche se non sempre supportati bene da tutti i browser, uno fra tutti Internet Explorer, le possibilità di personalizzazione dei siti web a dispodizione dei webdesigner è aumentata notevolmente. Spesso scrivere una determinata frase o headline con quel font che ci piace tanto ci ha portati ad utilizzare una immagine. Grazie [...]

CATEGORIE DEL BLOG

guadagna scrivendo su andrealeti.it

LINK DA NON PERDERE

AndreaLetiTube il canale dei tutorial

Andrea Leti - Chi sono - Portfolio - Google Sitemap - Blog Policy - Licenza Creative Commons - torna su Torna Su