Menu con bordi arrotondati senza CSS3

Avete paura ad usare i Css3 e volete aspettare tempi migliori? Questo tutorial vi permetterà di creare un menu di navigazione  arrotondato, perfettamente cross-browser (anche su Ie obsoleti!).

L’articolo e’ stato scritto da Giacomo, che ci ha inviato questo tutorial, e che come me, vuole collaborare al progetto di rendere il web design “pane fruibile per tutti”, ma sopratutto vuole condividere le proprie conoscenze anche ai piu’ “esperti” del settore.

VISUALIZZA LA DEMO  >>

Voglio partire con delle premesse:

– Come credo si capisca dal titolo non userò il css3, non perchè non lo so usare o perchè non mi piace, ma semplicemente perchè sono un fanatico dell’ottimizzazione e purtroppo il css3 non è ancora supportato nativamente da tutti i browser, ecco il motivo di questo tutorial.

– Userò delle immagini gia preparate con Photoshop.

Il concetto degli sprites

Innanzitutto dobbiamo creare il nostro bottone con Photoshop o con qualsiasi programma di grafica. Una volta fatto dobbiamo “ritagliare” porzioni del nostro lavoro suddividendo il bottone in tre sezioni (e file) distinti: sinistra,centrale e destra.

In questo modo potremo rendere il bottone “fluido” (avendo di fatto anche uno sprite centrale, il bottone si adatterà a qualsiasi lunghezza).

Iniziamo con i codici

Innanzitutto creiamo lo “scheletro” del bottone in questo modo:

a.menu { /* APPLICHIAMO DEGLI STILI A TUTTI I LINK CON CLASSE MENU */
display: block; /* RENDIAMO I LINK UN "BLOCCO SOLIDO" DELLA PAGINA */
float: left;
margin: 0; /* TOGLIAMO EVENTUALI MARGINI GIA IMPOSTATI DALLA PAGINA */
padding: 0; /* TOGLIAMO EVENTUALI PADDING GIA IMPOSTATI DALLA PAGINA */
margin-right: 20px; /* DIAMO UN DISTACCO DI 20 PIXEL A DESTRA TRA I LINK */
line-height: 30px; /* ALLINEAMO IL TESTO CENTRATO IN ALTEZZA */
}

Leggi i commenti per capire il codice, con  il comando display: block serve per rendere fisso un elemento che normalmente non è un “blocco solido”.

Ora andiamo ad assegnare i nostri sprite (immagini) alle diverse sezioni del bottone in questo modo:

a.menu i {
display: block;
width: 18px;
height: 30px;
background-image: url(previewsin.png);
float: left;
}

a.menu span {
display: block;
height: 30px;
background-image: url(previewcen.png);
float: left;
}

a.menu b {
display: block;
width: 18px;
height: 30px;
background-image: url(previewdes.png);
float: left;
}

Passiamo al codice Html

<a href="#" class="menu"><i></i><span>testo corto</span><b></b> </a>
<a href="#" class="menu"><i></i><span>testo lungo testo lungo</span><b></b> </a>

Potete vedere l’anteprima a questo indirizzo.

Come vedete il codice risulta abbastanza intuitivo, con i tag <i></i> si ricrea la parte sinistra, con <span> la parte centrale (adattata a tutta la lunghezza del testo), e con <b></b> si riproduce la parte destra del bottone.

Ovviamente questa soluzione e’ decisamente più lunga e complessa rispetto all’uso dei CSS3, ma se, come il nostro amico Giacomo, siete amanti del cross-browser, questa e’ la soluzione che fa per voi. Questo codice risulta molto utile anche nel caso doveste sviluppare per gli ormai obsoleti Ie 6 e 7 (certi pazzi ci sono sempre!).

In alternativa e’ possibile usare i css3, anche con IE8 grazie a CSS3PIE.

Questo è tutto, spero di esservi stato di aiuto, ALLA PROSSIMA!

Se vuoi collaborare al progetto come ha fatto Giacomo , puoi inviarci il tuo articolo!