• Programmazione » CSS » Tutorial CSS

Pagina 2 di 2

Seconda variante: bordi + link

E se volessimo associare alla scritta verticale un link? Possiamo farlo tranquillamente; basta soltanto cimentarsi a scrivere il codice esatto ed il gioco è fatto! Ho realizzato un esempio in cui, quando passeremo sulla scritta verticale, cambierà il colore del testo, il colore di sfondo ed il colore dei bordi, oltre a poter collegare effettivamente il testo ad una pagina esterna o interna del sito. Siccome per questo terzo esempio il codice è maggiore, ripeterò, quando necessrio, parti di codice CSS. Anche in questo caso gli elementi ul.verticale e .verticale li rimangono gli stessi, a livello di codice. Introdurrò, adesso, il codice con cui applicare i collegamenti.

.verticale li a, .verticale li a:visited {
text-decoration:none;
color:#000;
display:block;
width:2.2em;
border-top: 0.1em solid #000;
height:auto;
}

Le pseudo-classi a e a:visited hanno le seguenti caratteristiche: si elimina la sottolineatura di dafault associata al link; viene reso come elemento di blocco [display:block;]; l' altezza non viene dichiarata ma dipende da "quanto" testo viene scritto ed il bordo superiore viene dichiarato in questo stato [border-top: 0.1em solid #000;].
La stessa pseudoclasse a deve essere assegnata anche all' elemento <em>:

.verticale li a em{
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}

Siccome ho scritto all' inizio che l' elemento <em> "enfatizza" il testo al quale viene associato, si vuole avere, invece, testo non stampato a video in corsivo, ragione per cui ho scritto che il font deve essere normale [font-style:normal;], allineato al centro [text-align:center;] e vengono dichiarati il colore e la dimensione dei bordi [border-left:0.1em solid #000; border-right:0.1em solid #000;]. Da notare che in questo stato si assegnano i bordi destro e sinistro. Tra poco vedremo anche come fare per assegnare il bordo inferiore. Il passaggio successivo, prevede lo stato :hover; anch' esso devve essere assegnato sia al tag <li> che all' elemento <em>:

.verticale li a:hover{
background:#333;
border-top: 0.1em solid #f60;
}
.verticale li a:hover em {
background:#333;
color: #f60;
border-left:0.1em solid #f60;
border-right:0.1em solid #f60;
}

Nel primo codice [.verticale li a:hover], non facciamo altro che assegnare il colore di sfondo quando il mouse si troverà sul link [background:#333;] ed il colore del bordo superiore [border-top: 0.1em solid #f60;]. Infatti cosa succederà bello stato :hover? Colore del testo e colore dei bordi saranno uguali [#f60], mentre il colore di background sarà un colore quasi nero [#333]. Stessa cosa si deve fare per il secondo codice [.verticale li a:hover em], oltre ad assegnare il colore dei due bordi [destro + sinistro]. Non ci rimane che il bordo inferiore, sia nello stato a che in quello :hover:

.verticale li a em.end{
border-bottom:0.1em solid #000;
}
.verticale li a:hover em.end{
border-bottom:0.1em solid #f60;
}

Contrassegnando anche in questo caso la classe che stabilisce il bordo inferiore con il nome .end, abbiamo che nello stato di link non ancora visitato esso ha il colore nero e nello stato :hover, assumerà il colore #f60, come gli altri 3. Detto ciò, credo che la pagina di esempio finale possa chiarire ogni dubbio in merito.

Alla fine, senza nessuna presunzione, posso affermare che... non mi dispiace affatto questa applicazione; sempre meglio che usare, come accenato all' inizio, immagini .gif magari usate impropriamente quando alla pagina non viene associato nessun foglio di stile. Penso anche a coloro i quali si avvalgono di screen-readers per navigare in rete. Spero che questa piccola applicazione possa aiutarli un pò di più.
Per eventuali dubbi in merito... contattatemi.