Questa è la traduzione dell'articolo 4 Uber Cool Css Techniques For Links di Alen Grakalic pubblicato originariamente su CSS Globe il 24 Aprile 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Ho pensato tempo fa di scrivere una serie di tutorial su varie tecniche CSS da associare ai link. Quando ho iniziato ho subito capito che erano estremamente semplici (ed efficaci) e che potevano essere tutte raccolte in un solo articolo di sintesi.
I link (il tag HTML a) sono uno dei più importanti elementi nel contesto di un documento. Senza link non ci sarebbe praticamente navigazione. Come premessa c'è da aggiungere che per l'implementazione di queste tecniche è necessario il supporto della pseudoclasse :hover sui vari browser. Ognuna di queste tecniche usa solo i CSS, senza ricorrere ad hack o a script Javascript.
Potete iniziare scaricando il file zip che contiene tutti gli esempi di cui parleremo nel corso dell'articolo.
Tooltip con i soli CSS
Perché questa tecnica funzioni avrete bisogno di un markup HTML come questo:
<a href="#">Title <span>Tooltip</span></a>
Nel CSS assegniamo un posizionamento relativo all'ancora (a) in stato di :hover. Lo span viene posizionato assolutamente ed esso si applica uno stile separato. Inizialmente lo span viene nascosto, per essere poi visualizzato quando si passa con il mouse sul link (usando il selettore a:hover span).
Ecco il CSS:
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}
Una galleria di immagini con i CSS
Questo trucchetto ci consente di visualizzare un'immagine grande quando si passa con il mouse sulla miniatura corrispondente. Useremo una lista non ordinata. In ogni item della lista (li) piazzeremo un elemento a e al suo interno il riferimento a due immagini, la miniatura e quella a dimensioni normali. L'immagine grande viene inserita all'interno di uno span inizialmente nascosto. Quando si fa il rollover sulla miniatura impostiamo display:block per per lo span nascosto e così mostriamo l'immagine grande.
La struttura HTML è la seguente:
<li>
<a href="#">
<img src="images/02_1s.jpg" alt="gallery thumbnail" />
<span><img src="images/02_1.jpg" alt="gallery image" /></span>
</a>
</li>
E questo il CSS:
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
width:400px;
height:375px;
position:relative;
background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
}
ul#gallery li{
float:left;
display:inline;
margin-top:300px;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a:hover span{
position:absolute;
width:400px;
height:300px;
float:left;
top:0;
left:0;
display:block;
}
Ridimensionare immagini con i soli CSS
Ho scritto altrove su una tecnica che consente di ridimensionare una miniatura ridimensionando l'area visibile dell'immagine stessa. Questo trucchetto mostrerà un'immagine più grande al passaggio del mouse e darà l'effetto di un'immagine realmente ridimensionata. Per ottenere il tutto userò uno schema simile a quello dell'esempio precedente - due immagini, una piccola, una grande, all'interno di un elemento a. L'immagine più grande è inizialmente nascosta, viene mostrata solo sul rollover. Dal momento che l'immagine è piazzata sopra quella piccola, l'impressione è che essa sia ridimensionata.
Questo il codice HTML:
<li>
<a href="#">
<em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em>
<span><img src="images/02_1m.jpg" alt="gallery image" /></span>
</a>
</li>
E questo il CSS:
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
margin:2em 0;
}
ul#gallery li{
float:left;
display:inline;
margin-right:5px;
}
ul#gallery a{
float:left;
display:inline;
position:relative;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover span{
float:left;
display:block;
cursor:pointer;
}
ul#gallery a:hover em{
display:none;
}
ul#gallery a img{
border:1px solid #999;
padding:2px;
background:#fff;
}
ul#gallery a:hover img{
border:1px solid #000;
}
Un pulsante con effetto 3D
Si tratta di un semplice effetto di un pulsante che viene premuto. Abbiamo bisogno di un elemento a con uno span annidato. I bordi superiore e sinistro sono "schiariti", quello inferiore e destro "ombreggiati". Per aggiungere un maggiore effetto ombra aggiungeremo un bordo destro e inferiore anche allo span. Al passaggio del mouse invertiamo i colori dei bordi. Cambiando i bordi spostiamo pure lo span di 1px in basso e a destra.
Da notare che nel mio esempio ho usato il float sugli elementi a per ottenere l'altezza desiderata, ma tutto si può ottenere anche con elementi a inline.
Ecco la parte HTML:
<a href="#" class="button"><span>Roll over here</span></a>
E il CSS:
a.button{
float:left;
font-size:110%;
font-weight:bold;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#333;
width:auto;
}
a.button:hover{
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #999;
border-bottom:1px solid #999;
color:#333;
}
a.button span{
background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
float:left;
line-height:24px;
height:24px;
padding:0 10px;
border-right:1px solid #777;
border-bottom:1px solid #777;
}
a.button:hover span{
border:none;
border-top:1px solid #777;
border-left:1px solid #777;
background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;
cursor:pointer;
}
